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=&amp;imgw=13&amp;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

Status:Active» Fixed

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

Logical, nice, clean. Working perfectly, thanks, Stella!

Tomáš (vacilando)

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

Version:5.x-2.8» 6.x-1.8
Status:Closed (fixed)» Active

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

<script type="text/javascript">
$.getScript("http://www.myD5site.org/sites/all/modules/lightbox2/js/lightbox.js", function(){
});
</script>

But when I change the URL to the D6 version of lightbox2, it displays images directly in browser.

<script type="text/javascript">
$.getScript("http://www.myD6site.org/sites/all/modules/lightbox2/js/lightbox.js", function(){
});
</script>

Note that lightbox2 otherwise works on the D6 site, it only fails when using the above AJAX trick.

Any idea, please?

Where exactly did you input the above code?

TIA,
txcrew

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

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>

Thanks 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

Status:Active» Fixed

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();

Status:Fixed» Closed (fixed)

Automatically closed -- issue fixed for two weeks with no activity.

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?

Status:Closed (fixed)» Active

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

Version:6.x-1.8» 6.x-1.11

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!

Version:6.x-1.11» 7.x-1.x-dev

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