Attach an HREF and a class to an img link generated by the PhotoSlider script?

Question

Hi folks, I'm using the very nice PhotoSlider script from http://opiefoto.com/articles/photoslider to create a slide show of images for one of my clients.

This script replaces a previous hand-coded Javascript solution that allowed for the large image to be clicked resulting in a lightbox modal popup showing the full-size version of the clicked picture.

Of course the client insists that this functionality remain intact, but the HTML code for the large image is generated on-the-fly by the PhotoSlider script itself.

This means I'll need to modify the script slightly to attach a class ("lightbox") and an href (or just a click event, whichever makes more sense), but I'm not quite sure how best to accomplish this. I figure the event and class will have to be attached each time a thumbnail is clicked, but if this isn't the best way to do it any advice will be appreciated.

The script is implemented into my page as can be seen here, without the click or class. I'd really appreciate any assistance stackoverflowites can offer.

Thanks in advance!

Answer 1

After the thumbnail is clicked, and the new image is shown, you can attach a click event to the new image using jQuery's bind. If you find you need to remove it later, you can use unbind.

Answer 2

Wait for the script to finish generating its HTML code and then modify it to your taste. Modification on each click is not needed as PhotoSlider generates its HTML once.

Answer 3

Take a look at the jquery live() method, which allows you to attach an event to a selector that exists either now or in the future. Effectively, you can do something like (based on the example at the photoslider site):

$(document).ready(function() { 
  $('.photoslider_main img').live('click', function() {
    $(this).showLightbox();
  });
});

Answer 4

The live() method suggested by GregMac looks like it's going to be very useful. I also found another question on here that suggests an approach that closely matches the way I conceptualised the solution:

$(".photoslider_main img").each(function() {
    var src = $(this).attr('src').replace('pn.','.');
    var a = $('<a/>').attr('href', src);
    $(this).wrap(a);
});

Only problem is it tells me "$(this).attr("src") is undefined"

Any ideas?

Answer 5

Here's the full code that results in the variable 'src' being undefined -- not sure why.

<div class="photoslider" id="default"></div>

<script type="text/javascript">
$(document).ready(function(){
    //change the 'baseURL' to reflect the host and or path to your images
    FOTO.Slider.baseURL = '';

    //set images by filling our bucket directly
    FOTO.Slider.bucket = {
        'default': {
            <% if imgs1 <> "" then %> 0: {'thumb': '<%=replace(imgs1,"pn.","tn.")%>', 'main': '<%=imgs1%>'}<% end if %><% if imgs2 <> "" then %>,
            1: {'thumb': '<%=replace(imgs2,"pn.","tn.")%>', 'main': '<%=imgs2%>'}<% end if %><% if imgs3 <> "" then %>,
            2: {'thumb': '<%=replace(imgs3,"pn.","tn.")%>', 'main': '<%=imgs3%>'}<% end if %><% if imgs4 <> "" then %>,
            3: {'thumb': '<%=replace(imgs4,"pn.","tn.")%>', 'main': '<%=imgs4%>'}<% end if %><% if imgs5 <> "" then %>,
            4: {'thumb': '<%=replace(imgs5,"pn.","tn.")%>', 'main': '<%=imgs5%>'}<% end if %>
        }
    };
    FOTO.Slider.reload('default');  
    FOTO.Slider.preloadImages('default');  
    FOTO.Slider.enableSlideshow('default');  

    //or set our images by the bucket importer
    //var ids = new Array(0,1,2,3);
    //FOTO.Slider.importBucketFromIds('default',ids);


    console.log($('.photoslider_main img'));
    var src = $(".photoslider_main img").attr("src");
    $(".photoslider_main img").wrap($('<a/>').attr('href', 'waka').attr('class','lightbox'));

    $('a.lightbox').lightBox();

 // $('.photoslider_main img').live('click', function() {
 //   $(this).showLightbox();
 // });
});



</script>