CODEWITHSUNDEEP
javascriptjqueryhtmlimagefancybox-2
screth
screth

Reputation: 68

Open specific image in fancybox from main image area

I have fancybox opening when I click on the main image area in my gallery, and no matter what image is open fancybox always starts at the first image in the gallery. For example, when a user clicks on the 4th image thumbnail, it loads into the main image area correctly, but when clicking on the main image fancybox starts from the beginning.

I understand why it's doing this because the main image area is wrapped in:

<a rel="gallery" class="fancybox" href="#hover0"> <img/> </a>

But what I would like to happen is to have the href #hover0 change to #hover2, #hover3, #hover4, etc when the corresponding image is loaded in the main area. I'm not sure how to go about doing this.

Test Page: http://www.pixlsnap.com/j/testb.php

Upvotes: 2

Views: 1116

Answers (1)

AyB
AyB

Reputation: 11665

Alright, so I have tested this by saving your whole page (along with all the resources linked to your live site, so glad the images had a direct path), you could do the following, but before I go to that there is a script error that you need to correct:

 $(function(){
        // Bind a click event to a Cloud Zoom instance.
        $('#1').bind('click',function(){

^ You have not closed this function correctly, it needs an extra }); at the end.

Now there are 2 things you need to do for your problem:

1) Paste the following code above the function I mentioned previously (the order matters so it needs to be above it):

$(document).ready(function(){
    $('#imgconstrain img').on('click',function(){
        $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
        $('#1').closest('a').attr('href','#'+$new_hoverid);
    });
});

To explain what this code is doing, when the big image is clicked, we are going to get the active image, in case you haven't noticed, when you click on a thumbnail it gets the class cloudzoom-gallery-active. So, on click of the bigger image, we are going to retrieve the id of the thumbnail with the cloudzoom-gallery-active class.

Now, since we are getting the id attribute, each image should have a unique id. So here we go for the second part:

2) Give your thumbnails image a unique id like:

<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
                                <!-- ^ here -->

<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&amp;m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
                                <!-- ^ here -->

...till hover6 and that's it.

Let me know if that works for you and feel free to ask if the explanation wasn't clear enough ^-^

Edits:

So as per the comments, here's a few things to be done:

1) In your this anchor tag:

<div id="imgconstrain">
<a rel="gallery" class="fancybox" href="#hover0">
<img class = "cloudzoom" id="1" src =
  • Take out rel="gallery" (this is the reason fancybox is showing from start on click of next) and remove fancybox class and instead add open-fancybox (the reason for this is coming later)

2) All these lines:

<script type="text/javascript">
  function displayCaption() {
            var caption = document.getElementById('caption');
            caption.innerHTML = this.alt;
        }

        document.getElementById('1').onclick = displayCaption;
        document.getElementById('2').onclick = displayCaption;
        //....
</script>
  • is not needed, we will do this in a smaller way

3) Like I mentioned previously, please add the ids here:

<li><img class = 'cloudzoom-gallery' id="hover1" src ="http://brecksargent.com/slideshowpro/p.php?a=eXt1NExlZT1uemwuIjItOjI6Hys4OzouNio%2BNC4iKyAiPjQjJjs%2FNCY%2BLiY0&amp;m=1383849642" alt ="LIG Hippie Commune" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/lig5_on.jpg' "> </li>
                                    <!-- ^ here -->
<li><img class = 'cloudzoom-gallery' id="hover2" src ="http://brecksargent.com/slideshowpro/p.php?a=cX12XnxkJXl0bSczJSgwOzIDOjY5OyYzKzE8LTI%2BMiU%2BJzE%2FOicjKD8nNyM%3D&amp;m=1383853420" alt ="Dunno weird though" data-cloudzoom = "useZoom: '.cloudzoom', image:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg', zoomImage:'http://brecksargent.com/slideshowpro/albums/album-16/lg/dod_on.jpg' "> </li>
                                    <!-- ^ here -->
  • and so on till the last image.

4) Now the final piece:

$('ul#carousel.elastislide-list img').on('click',function(){
            //here we get the updated id (hover1, hover2 etc.)
            //and pass it to the cloud-zoomed anchor tag
    $new_hoverid = $('img.cloudzoom-gallery-active').attr('id');
    $('#imgconstrain a').attr('href','#'+$new_hoverid);

    //get the caption of the thumbnail image and set it to the
    //p tag with id caption
    caption_text = $(this).attr('alt');
    var caption_element = document.getElementById('caption');
    caption_element.innerHTML = caption_text;
});

    //what this code does is, when the cloud-zoomed image is clicked,
    //we get the updated href (which is what the above code does)
    //and we are going to make that href get clicked so that the fancybox opens
$('#imgconstrain a.open-fancybox').on('click',function(){
    $to_open = $(this).attr('href');
    $('a.fancybox[href="'+$to_open+'"]').click();
});

});

You can take out this code which was in my previous answer as I have already placed it in the new one:

$(document).ready(function(){

$('#imgconstrain img').on('click',function(){

$new_hoverid = $('img.cloudzoom-gallery-active').attr('id');

$('#1').closest('a').attr('href','#'+$new_hoverid);

});

Full code pastebin

Let me know if it works for you :)

Upvotes: 1

Related Questions