0

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!

convoke
  • 191
  • 11
  • Doing a bit of digging into the fancybox api. There's a function called jumpto that sort of sounds promising (takes you to an image based on its index number)... but I have no idea how to go about implementing this... – convoke Mar 22 '12 at 18:32

3 Answers3

1

You need to do two things either with pure js or jquery.

1) when you click an image, set the window.location.hash to your desired value. (or use Jquery history plugin, or use html5 history object, take your pick). This will put the hash in the URL. 

 <img onclick='setHash(this.id)' ...

where setHash is your function to add the hash. Then on pageload/hash change you will want a handler to invoke the lightbox with the proper image based on the hash. Usually i just make the id of my image match and use that to pass around. But there might be a bettwe way like convoke said from within the fancybox thingy.

FlavorScape
  • 13,301
  • 12
  • 75
  • 117
1

You can hand out URLs with a query string to accomplish this easily enough.

http://photo.convoke.info/galleries/test-gallery?fancybox=1

Then using something like the code found here (credit):

function getParameterByName(name)
{
  name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
  var regexS = "[\\?&]" + name + "=([^&#]*)";
  var regex = new RegExp(regexS);
  var results = regex.exec(window.location.search);
  if(results == null)
    return "";
  else
    return decodeURIComponent(results[1].replace(/\+/g, " "));
}

you can easily check for / do something if that value exists. In your $(document).ready() check for the value, and if it exists, trigger the $.fancybox.jumpto( [index] ) method.

You can expand on / make this as complex as you want, for instance if you had multiple galleries on a page, you could also include another key/value in the URL to indicate which gallery.

http://photo.convoke.info/galleries/test-gallery?fbgallery=fanexpo&fbphoto=1
Community
  • 1
  • 1
Betard Fooser
  • 526
  • 5
  • 14
  • Whoah, thanks for this. I don't know how I missed your response until now. I've managed to get the hash changing every time you click an image, and even managed to call an alert every time the hash changes (using Ben Alman's Hashchange plugin)... But, I can't get fancybox.jumpto to work, even for a static index value. Any thoughts? I've been working on the same gallery, so you should be able to see some changes in the code... – convoke Mar 29 '12 at 14:53
0

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.

convoke
  • 191
  • 11