Good evening everyone,
I am using a JavaScript to load/override content from an HTML-File into specified divs.
You can watch a demo.
The javascript that does the load job looks like the following:
function loadScreenie(elementSelector, sourceURL) {
$(""+elementSelector+"").load("img/screenies/"+sourceURL+"");
}
and gets invoked by a hyperlink looking like this:
mibmib
( i have also tried the same with onclick="")
This is the content of screenie2.htm
hello world<br />
<img src="screenie2.png" />
The problem is that images are not displayed. The behaviour is like this:
- you click the link and the javascript is executed.
- the text in screenie2.htm is displayed correctly in the correct div
- the image is not displayed. there also isnt any broken image symbol or an empty space.
Do you have an idea what could cause this error?
Thanks a lot in advance,
-- benny
Ok. Let me conclude to you what is happening here.
When link is clicked, jQuery loads "img/screenies/screenie2.htm
The image-tag <img src="screenie2.png" /> is inserted into the DOM.
So, we have an image linking to a supposed image at ./screenie2.png, where you would believe it should be linking to *./**img/screenies/**screenie2.png*.
You need to use absolute URLs in your load():ed content.
If you're testing with IE, the problem might be that Jquery uses innerHTML instead of creating individual dom elements with the load command. IE can be very finicky about that.
Related
I'd like to change a test made by a javascript on a website
<img src="https://img_small.jpg" class="pictures_load" of="true" onclick="var src='https://img_big.jpg';
if(this.readAttribute('of')) src='/noimagehown.gif';
the idea is to remove each javascript test line :
if(this.readAttribute('of')) src='/noimagehown.gif';
so I could see the big image version onclick, I tried it by removing the ligne when inspecting the page code and it worked.
Thanks
Based on what you have provided so far, the intension is to prevent the function of the following onclick.
if(this.readAttribute('of')) src='/noimagehown.gif';
Since above is dependent on this.readAttribute('of'), then the goal can be achieved easily be removing of="true"
Here is an example:
Look for all images with of="true" and remove of attribute
document.querySelectorAll('img[of="true"]').forEach(item => item.removeAttribute('of'));
I'm trying to make it work lightbox-style image popups, but nothing - all of the extensions do not work. Seems something wrong with typo3 config or whatelse.
E.e. "Perfect Lightbox" - installed, template added, in contect images checkboxes "click enlarge" and "lightbox" checked. But nothing happens. In browser console no JS errors, JS files for Perfect Lightbox loaded. In the page source a piece of code around image looks like:
<a href="http://.../index.php?eID=tx_cms_showpic&file=17&md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11¶meters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw¶meters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi¶meters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2¶meters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D" onclick="openPic('http:\/\/...\/index.php?eID=tx_cms_showpic\u0026file=17\u0026md5=14b002d6aa25f9dd945e2a4e6c21ea4347298d11\u0026parameters%5B0%5D=YTo0OntzOjU6IndpZHRoIjtzOjQ6IjgwMG0iO3M6NjoiaGVpZ2h0IjtzOjQ6IjYw\u0026parameters%5B1%5D=MG0iO3M6NzoiYm9keVRhZyI7czo0MToiPGJvZHkgc3R5bGU9Im1hcmdpbjowOyBi\u0026parameters%5B2%5D=YWNrZ3JvdW5kOiNmZmY7Ij4iO3M6NDoid3JhcCI7czozNzoiPGEgaHJlZj0iamF2\u0026parameters%5B3%5D=YXNjcmlwdDpjbG9zZSgpOyI%2BIHwgPC9hPiI7fQ%3D%3D','thePicture','width=800,height=600,status=0,menubar=0'); return false;" target="thePicture">
<img src="http://.../fileadmin/_processed_/csm_room_05_3bd2eeb267.jpg" width="150" height="112" alt="" />
</a>
No any classes of lightbox generated (should be there?)
Just stumbled upon this Problem today, too!
This will work in your ts-setup:
# deactivate fsc popup, lightbox wrap
lib.fluidContent.settings.media.popup {
directImageLink = 1
JSwindow = 0
linkParams.ATagParams.dataWrap = class="lightbox" data-fancybox-group="lb{field:uid}"
}
You have to change the "dataWrap"-Attributes according to your lightbox-plugin, the given example works for fancybox.
( Originally found here: https://forum.typo3.org/index.php/t/213375/ )
as of TYPO3 7 you can use CSC (css_styled_content) or FSC (fluid_styled_content) to render your pagecontent. both extensions use different approaches for rendering of content elements. What do you use?
maybe the extensions you looked at enhances/modified only the other rendering extension?
What extensions have you tried yet?
Have you included their static template?
If you are unsatisfied with all of them you can also use any javascript-gallery/-picture-viewer and mostly needs little to insert special markup and little JS to initialize the viewer:
one example lightbox library found on http://lokeshdhakar.com/projects/lightbox2/
aside of inclusion of jquery and the JS-library, you need to include some JS with the initialization based on your HTML-markup. This library seems to work on all images with the same data-attribute data-lightbox:
set option:
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
and for your images be sure to enhance the renderung with the following data-attribute like:
Image #2
Image #3
Image #4
you might make it more complex to have multiple lightboxes available on one page or to include only selected images
The Link is in your code snippet is still using the default rendering to open a popup window.
As Bernd mentioned, you might have forgotten to add the static template.
maybe you can try to add the following
# turn of the popup window
tt_content.image.20.1.imageLinkWrap.JSwindow = 0
# create a link to a bigger verion of the image
tt_content.image.20.1.imageLinkWrap.directImageLink = 1
If the js and css are in place it might maybe work then.
EDIT:
Since your using fluid_styled_content:
styles {
content {
textmedia {
linkWrap.lightboxEnabled = 1
linkWrap.lightboxCssClass = fluidbox
linkWrap.lightboxRelAttribute >
}
}
}
Modify lightboxCssClass and lightboxRelAttribute to your needs. With JS and CSS in place you don't need any Extension.
I'm trying to load a parent page into an object tag, and whilst I can get an alert to show I've got the code, I cannot get it into the <object> Any clues?
var page=parent.document.documentElement.innerHTML;
alert(page);
document.getElementById('close_skin').style.visibility="visible";
document.getElementById('show_skin').style.visibility="visible";
document.getElementById('show_skin').setAttribute("data",page);
Assuming I can get the code to appear, how can I "toggle" to a different set of styles? The parent uses ".xxx_fixed" classes, but the code in the object needs to use the ".xxx_float" classes that are also in the template CSS at top of page. (When I did it in another PERL program, it was easy just to rename the tags in the <body> from "class='xxx_fixed' " to "class='xxx_float' " (Can't do that so easily with global javascript replace as that would also rename the classes at top of code as well!)
I have just tried adding some script to the top of the var page object - which MAY work if I can get the code to appear ...
+'document.getElementById(\'icon_outer\').setAttribute(\'class\', \'icon_outer_float\')'
If you're interested as to the "why", the "fixed" keep menu / top bar fixed in one place when viewed in full screen browser, but the 'float' makes everything move in unison within the <object> "window" allowing viewer to pan around the template page like a static magnifying glass;
.menu_back_float{position:relative;top:0px;background-color:#f5eca4;min-height:520px;height:auto}
.menu_back_fixed{position:relative;top:35px;background-color:#f5eca4;min-height:550px;height:auto}
To load the parent page into an <object> element, you have to specify the URL of the page. To get the code and place it in a alert box, you can use jQuery's $.get() method (as long as you load it via a proxy domain), like this:
HTML:
// I'm just using W3Schools just to save time
<object data="http://www.w3schools.com/" width="1500" height="1200">
<embed src="http://www.w3schools.com/" width="1500" height="1200"></embed>
Your browser does not support the object tag.
</object>
JavaScript:
window.jQuery.get("http://www.yourdomain.com/?url=www.w3schools.com", function(response) {
window.alert(response);
}
For the second part of your question, you can use jQuery to change the name of the class from .xxx_fixed to .xxx_float:
function main() {
$('object').removeClass('xxx_fixed').addClass('xxx_float');
}
$(document).ready(main);
Hopefully I have answered your question correctly and thouroughly, and if I haven't, feel free to let me know so I can edit this.
I am using tooltipster to generate tool tips. All works fine except in the situation where I need to set the contents of a div based on user input using a simple JavaScript function. The div contents consists of images, when hovering over each image, a tool tip should display. However, the tip displays as the default browser behaves for displaying title= with an image. The JavaScript I use is simple:
function setAwards() {
var awardsdiv=document.getElementById("awards"); awardsdiv.innerHTML="";
if (document.setvalues.superstar.checked == true) awardsdiv.innerHTML=awardsdiv.innerHTML + "<img class=\"tooltip\" title=\"Description of award\" width=\"16\" src=\"/pix/superstar.png\" alt=\"[ Super Star ]\" />";
[... stuff removed ...]
}
Is there a way to make this work? Tool tips do display elsewhere on this web page, so the resources needed appear to be set up correctly.
Thank you!
You must initialize the tooltip ($(...).tooltipster({...})) after you have inserted your new HTML content or use delegation.
For "automatic" initialization, you might want to use delegated event listeners for that, see https://github.com/iamceege/tooltipster/issues/499
I know this has been asked before but the answers given did not work for me and my scenario is in any case slightly different.
I am just starting to evaluate nanoGallery, which looks good for my requirement which is to run a slideshow of inline image references. But I simply want to run the slideshow from a link rather than having to display a set of thumbnails and then clicking/tapping on one to actually start the slideshow. Which doesn't seem to me to be a particularly unusual requirement, especially for a very large slideshow where the set of thumbnails would occupy far too much space on the screen.
My HTML is simply:
<a id="startlink" href="javascript:void(0)" style="margin-bottom: 40px;">run slide show</a>
<div id="nanoGallery">
<a id="first" href=... data-ngdesc=... />
...
So I have tried:
$(document).ready(function () {
$("#startlink").click(function (e) {
$("#nanoGallery").nanoGallery({
slideshowAutoStart: true,
...
});
$("#first").trigger("click");
});
});
I have tried various alternatives, including placing the script block at the end of body rather than in head, simply doing click() rather than trigger("click"), referencing $("#nanoGallery").children()[0] rather than $("#first"), and so on. I have even tried the createEvent/dispatchEvent approach as suggested elsewhere. But all I ever get is the row of (in my case empty as I have not supplied thumbnail images) thumbnail blocks which I still have to click on to start the slideshow. So it is possible that nanoGallery uses a different event or events rather than click? Has anyone actually got this to work with nanoGallery?
I have also seen a suggestion to use 'deep linking' using a hash value in the URL to identify the gallery/album in question, but I have no idea how to generate or determine this value and it may be that this only works with an online image repository such as Picasa.
Jon