Question

Note: I have used lightbox and its many alternatives in an attempt to fix this and im using clearbox at the moment.

The Problem: Currently i have javascript code that depending on the element that is clicked, the modal popup of the lightbox should show the user a different set of images. Below is the code I am currently modifying.

$("download").html(" \
<span style='color:white'> \
    <a href='img/26.jpg' rel='clearbox' title='Caption'>View Screenshots</a> \
</span><br /> \

However the link does not initiate the lightbox (works on links already on the page) and i have spent two days looking through google and stackoverflow trying to find a fix.

Outline of what I am trying to achieve: A Showcase of my work where one image will be dynamically added through javascript as a hyperlink depending on the work chosen. When the user clicks it will allow them to go through all the other images that are hidden but part of the gallery. There will be multiple galleries. Thank you for reading.

Edit 1: Please excuse the mspaint job
https://i.stack.imgur.com/rN8q1.jpg

Answer 1

The issue is that you have to call clearbox on any links that are pulled into the page via ajax. When you call clearbox initially, jQuery grabs all of the elements from your selector and adds the functionality to them. If you then, pull in additional links via ajax (or even add them to the dom later), then clearbox has not been instantiated for those elements.

The jQuery .live() function fixes this for elements added to the dom, but clearbox is not built to use .live(). Therefore, you’ll have to call clearbox on any additional links that are added to the page separately.

http://api.jquery.com/live/

---

EDIT
I’ve had a quick look at the clearbox doc page: http://www.clearbox.hu/index_en.html

It states that you can call CB_Init() to add clearbox to new items:

Using the script with AJAX
If you load new content with AJAX in your
webpage without refreshing it and you want, that the clearbox work
with the new content too, you have to call CB_Init(); function AFTER
your AJAX content-load.

So you can just do this:

$("download").html(" \
        <span style='color:white'> \
           <a href='img/26.jpg' rel='clearbox' title='Caption'>View Screenshots</a> \
        </span><br /> \ ");
CB_Init();