Hi,
I've got an interesting problem. See any page on my site, e.g. http://www.vacilando.eu/bg -- there is a row of tiny images at the top rim. For screensize-detection reasons I have to use Ajax to load that row. So there is a div which sends info about user window size and only the right number of images is delivered.
The problem is that although each of them has a Lightbox2-enabled link (actually a lightshow but what I write applies to lightbox rel as well) -- well, if you click any of those images you will only get to view that jpeg, but not in Lightbox2.
For your convenience (it's not easy to get to the source of the Ajax div), here's how an image with the link looks like:
<a href="http://www.vacilando.eu/sites/vacilando.eu/files/albums/2008/20080510-18_iceland/DSC03059.JPG" rel="lightshow[x1462067]" title="DSC03059"><img style="border: 0; margin:0px; padding:0px;" alt="" src="http://www.vacilando.eu/sites/all/modules/brilliant_gallery/image.php?imgp=L3Zhci93d3cvdmhvc3RzL3ZhY2lsYW5kby5ldS9odHRwZG9jcy9zaXRlcy92YWNpbGFuZG8uZXUvZmlsZXMvYWxidW1zLzIwMDgvMjAwODA1MTAtMThfaWNlbGFuZC9EU0MwMzA1OS5KUEc=&imgw=13&imgh=10" /></a>
Now, for a test, I've put this very image in the header (see it above the letter 'V' if I haven't taken it off yet!) directly into the template (thus not loaded by Ajax) -- and then Lightbox2 works!
So the problem clearly occurs only in the Ajax-loaded content.
But why is that? I mean, I load just a chunk of html to a page that has all the necessary JavaScript to recognize the rel="lighshow..." attributes.
And, crucially, how can I enable it for this case? Do I have to include the necessary JavaScripts (which ones?) inside the chunk of HTML I am receiving via Ajax?
Thanks for any thoughts on this!
Tomáš (vacilando)
Comments
Comment #1
stella CreditAttribution: stella commentedOn page load the lightbox2 module processes all of the image links which have a lightbox rel attribute and adds an
onclick
event to them. This onclick event is what opens the lightbox. Check out the jquery function$.getScript()
and add it to your AJAX js - use it to load the lightbox2/js/lightbox.js file. You'll need to rerun it every time you update the set of images available on the site (assuming they're not there on page load).Cheers,
Stella
Comment #2
Vacilando CreditAttribution: Vacilando commentedLogical, nice, clean. Working perfectly, thanks, Stella!
Tomáš (vacilando)
Comment #3
Anonymous (not verified) CreditAttribution: Anonymous commentedAutomatically closed -- issue fixed for two weeks with no activity.
Comment #4
Vacilando CreditAttribution: Vacilando commentedStella - is the above solution supposed to work in D6 and 6.x-1.8?
It works, even in D6, when I load the D5 version of lightbox.js:
But when I change the URL to the D6 version of lightbox2, it displays images directly in browser.
Note that lightbox2 otherwise works on the D6 site, it only fails when using the above AJAX trick.
Any idea, please?
Comment #5
Anonymous (not verified) CreditAttribution: Anonymous commentedWhere exactly did you input the above code?
TIA,
txcrew
Comment #6
Vacilando CreditAttribution: Vacilando commentedBasically I have a block in the header area that contains a div which, after the page loads, includes via AJAX a set of lightbox2-enabled images. When you click on any of the image in this AJAX-loaded set, however, lightbox2 does not work. It does function on other images on the page though.
In D5 stella recommended me to use .getScript to load lightbox.js with the AJAX set -- and that was the solution.
Now in D6 it works ONLY if I .getScript the D5 lightbox.js, curiously! That's thus the problem.
You can see it at the link mentioned in my first post above.
Comment #7
millenniumtreeYou can use this solution if the image has already been Lightboxed (as when you want to link a JS/Ajax-created zoom image from a group of already lightboxed thumbnails)
The key is the Lightbox.start() function.
In your JS/Ajax-created code, create the link as such.
Comment #8
Anonymous (not verified) CreditAttribution: Anonymous commentedThanks for the replies,
Is this the same idea if I'm trying to do this inside of magic tabs (http://drupal.org/project/magic_tabs) or does that need special bit of code?
txcrew
Comment #9
stella CreditAttribution: stella commentedIt should still work. If you send me a link to your site I could take a look. However, one thing to check is whether the links to the images have the class
lightbox-processed
. If that class name exists on the link, then theonclick
event won't be added to that link and so lightbox won't work.If the images are created by other modules, e.g. image module, then you will also need to add the lightbox2/js/auto_image_handling.js file too.
Cheers,
Stella
Comment #10
stella CreditAttribution: stella commentedActually in D6, the solution is much easier. You should just need to call the js function
Drupal.attachBehaviors();
Comment #12
sakshay CreditAttribution: sakshay commentedhi,
I am using the jcarousel for image displaying using ajax . but after using this module with ajax lightbox2 do't work.
I am trying on the site http://klimalosninger.dk/ at the middle of the home page with the block name KLIMAGALLERIET .Please help me to work with the light box.
Regards
sudhakar sarswat
Comment #13
vegeneric CreditAttribution: vegeneric commentedThe solution mentioned in comment #10 (http://drupal.org/node/282089#comment-1181269) seems to work, but I'm still having a related issue...
I have a teaser view where I am using ajax to replace the typical 'read more' link so that instead of taking you to the node page it loads the full node content and replaces the teaser. At that point, it also changes the 'read more' to 'read less' which, when clicked, reverts the content back to the teaser. The initial load of the teaser view is lightbox processed fine. Using the solution above, I've gotten the full node images lightbox processed as well. The problem arises when someone clicks 'read less' and reverts to the teaser - since I'm not reloading the content but just re-displaying it, the class="lightbox-processed" is already there, so calling Drupal.attachBehaviors(); accomplishes nothing.
The work-around I'm using now is to just run a replace() to strip out the class="lightbox-processed" before displaying the content and re-running the js... is there a simpler / more elegant way to solve this?
Comment #14
vegeneric CreditAttribution: vegeneric commentedComment #15
bgogoi CreditAttribution: bgogoi commentedhttp://www.changemakers.com/en-us/node/20252 -- they have achieved this 'read-more' and 'read-less' which is quite interesting.. can someone please explore and elaborate this .. how to adopt this useful solution for our site?
Comment #16
vronkdaut CreditAttribution: vronkdaut commentedI seem to have related issue, so I try here.
I want to open a lightbox-iframe (the detail of the image) out of the caption of lightbox.
But when I click in lightbox, the detail of the image gets loaded in the main window
(as is default behaviour with [View Image Details].)
I added the rel-attribute and based on this thread tried also adding Lightbox.start(...) or Drupal.attachBehaviors(), but didn't quite know where/when to add it.
I tried on the onclick event of the link-element, but this didn't help.
Any clues?
Thanks
Matej
Comment #17
fp CreditAttribution: fp commentedI'd also appreciate a little more guidance here.
Here's case similar to the one we have above:
Currently , this redirects the browser to node/1 as would any regular link do.
Comment #18
drupaling.in CreditAttribution: drupaling.in commentedExcellent. Thanqverymuch Stella
Comment #19
dmatthey CreditAttribution: dmatthey commentedHi,
Another solution is to simply call the initList Lightbox function, so that the page will be parsed again.
You can do that by adding the following code into your Ajax success callback function:
Comment #20
smyleeface CreditAttribution: smyleeface commentedThank you dmatthey! That worked perfect for me :)
Comment #21
tyctor CreditAttribution: tyctor commentedhello
i have thumbnails and one bigger preview image.
event mouseover over thumbnail change src attribute of preview image.
something like this:
click event on preview image should start lightbox2 preview.
when page is loaded preview image is set to first thumbnail (on server side).
if i click on preview image, it opens in lightbox.
till now everythings works. (closing lightbox)
now i change preview image to other thumbnail.
if now i click on preview image, image opened in light box is not right, it is still same image as in first step.
and so on...
seems that lightbox is initialized on page load and doesnt recognize that image src was changed.
hope that i wrote it comprehensibly.
please, can you advise me, how to tell lightbox2, that image src was changed?
problem was elsewhere :o)
this is solution:
Comment #22
decibel.places CreditAttribution: decibel.places commentedI can confirm that #19 enabled Lightbox2 links added after page load with jQuery
Immediately after I created the links, I placed
Lightbox.initList();
happiness (-:
Comment #23
Ivanhoe123 CreditAttribution: Ivanhoe123 commentedConfirming that #19 worked for me as well on D7 and lightbox2 7.x.-1.0
Thanks!
Comment #24
profelm CreditAttribution: profelm commentedIvanhoe123, how did you go about implementing this in D7?
I am having problems doing this for a content type, and am fairly confused about ajax success callback functions.
Comment #25
Ivanhoe123 CreditAttribution: Ivanhoe123 commentedHere's an example:
Hope this helps
Comment #26
profelm CreditAttribution: profelm commentedThanks for that Ivanhoe123. It definitely explains how to implement this in a Drupal Behavior.
Cheers!
Comment #27
punkrack CreditAttribution: punkrack commented#19 confirmed +1 ! Drupal 7.
Been searching for 2 hours...
This should be documented a little better...
Here's an example for my usage, creating a link and update innerHTML with jQuery :
Comment #28
john.oltman CreditAttribution: john.oltman commentedI had to do this in the callback after the ajax tab completed:
Same as #22, but had to remove the existing "processed" class first, otherwise the links were skipped in the initList call.
Comment #29
mustafa.ata CreditAttribution: mustafa.ata commentedThank you dmatthey! That worked perfect for me :)
Comment #30
44sunsets CreditAttribution: 44sunsets commentedThank you all -- removing the lightbox-processed class and then doing Lightbox.initList() did the trick after loading new links via AJAX.