Question

I think I may be way in over my head here…

I’m using a WP custom post type and attachments in conjunction with FancyBox to create a slideshow/gallery. Nothing fancy, I don’t think. You can see it here: http://photo.convoke.info/galleries/test-gallery/

Except, I want to be able to link to a particular image. So, in that particular gallery, there are two images. I’d like to be able to give someone a link like http://photo.convoke.info/galleries/test-gallery#1 and have it open up the gallery page with the first image already open in the lightbox. #2 for the second image, etc.

Is this possible?

It doesn’t have to be #1… could be any sort of identifier. I’m pretty noob at javascript/jQuery stuff, so please forgive me… I tried googling around but couldn’t find anything of use.

Thanks!

Answer 1

Whelp, after a few weeks of mucking around, I finally figured it all out. I needed a few functions:

 $(document).ready(function() {
               if (window.location.hash) { // if there is a hash
                       $.fancybox.open($('.fancybox'), {index : parseInt(location.hash.substring(1))});
               }
       });

This badboy checks for a hash, and opens the image corresponding to said hash using fancy box ONLY WHEN THE PAGE IS LOADED.

function sethash(id)
{  
   top.document.location.hash = id;
}

This little guy is called by the links to each image in the gallery markup. It sets tthe hash of the page equal to the index of whatever image you’ve clicked on.

<a onclick="sethash('$count')>Image</a>

This isn’t REAL code, but you get the idea. I have a variable called count that I use to index each image in the gallery. This number corresponds to the index of the image in the fancybox slideshow (i.e. it starts at 0 for the first image in the gallery)

It was a lot of work, but it’s finally working (almost) perfectly. The last thing I’m going to try is to get the hash to change/update when you click on the previous/next arrows in fancybox. But frankly, if that doesn’t work, I don’t really care.