How to get Lightbox2 working for an Ajax-loaded content?

On 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

You 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.

<a rel="lightbox[gallery_name_here]"
     onclick="Lightbox.start(this, false, false, false, false); return false;"
     href="/lightbox_image_here.jpg">
  <img src="/zoom_image_here.jpg" />
</a>

It 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 the onclick 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

Actually in D6, the solution is much easier. You should just need to call the js function Drupal.attachBehaviors();

hi,

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

The 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?

http://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?

I 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

I'd also appreciate a little more guidance here.

Here's case similar to the one we have above:

Drupal.behaviors.aThing  = function(context) {
  $('#item').html('<a href="node/1" rel="lightmodal">This should open node 1 in an overlay</a>');
}

Currently , this redirects the browser to node/1 as would any regular link do.

Excellent. Thanqverymuch Stella

Hi,

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:

Lightbox.initList();

Thank you dmatthey! That worked perfect for me :)

hello

i have thumbnails and one bigger preview image.
event mouseover over thumbnail change src attribute of preview image.
something like this:

$('img.imagefield-field_image_thumb').hover(function(){
    $('#preview-img').attr('src', $(this).attr('src'));
});

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:

$('img.imagefield-field_image_thumb').hover(function(){
    $('#preview-img').parent().attr('href', $(this).attr('src'));
    $('#preview-img').attr('src', $(this).attr('src'));
});

I can confirm that #19 enabled Lightbox2 links added after page load with jQuery

Immediately after I created the links, I placed Lightbox.initList();

happiness (-:

Confirming that #19 worked for me as well on D7 and lightbox2 7.x.-1.0

Thanks!

Ivanhoe123, 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.

Here's an example:

$("#trigger").click(function(){
  $("#target").load("/some-url-to-load", function(){
    // This is the function called upon success
    // Do whatever you want here and add the following line at the end:
    Lightbox.initList();
  }, 500);
});

Hope this helps

Thanks for that Ivanhoe123. It definitely explains how to implement this in a Drupal Behavior.

Cheers!

#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 :

var dernier_acces_output = '<a rel="lightmodal[|width:800px; height:654px;]" href="mysite/somelink .content">click here to show content in lightbox</a>';
jQuery("#dernier-acces").html(dernier_acces_output);
Lightbox.initList();
Lightbox.end('forceClose');

I had to do this in the callback after the ajax tab completed:

$('.lightbox-processed').removeClass('lightbox-processed');
Lightbox.initList();

Same as #22, but had to remove the existing "processed" class first, otherwise the links were skipped in the initList call.

Thank you dmatthey! That worked perfect for me :)

Thank you all -- removing the lightbox-processed class and then doing Lightbox.initList() did the trick after loading new links via AJAX.