I am using the Galleriffic jQuery plugin for my photo gallery. The gallery images are loaded from a database in PHP. I want to be able to link to one photo in the gallery from another web page, with an URL query that passes the ID of that image. This image should then be selected and shown in the big preview (or slideshow container), instead of the first image which is the default.
What I want to do is:
mywebsite.com/pictures/?pid=12345
where 12345 is the ID of the image to be selected.
You can use some jQuery to click on a specific image after the gallery loads:
ReplyDelete$("img#"+id).trigger('click');
There's a couple different way to populate the id variable. If you're using php as well you could use this:
<?php echo "var id = ".$_GET['pid'].";"; ?>
or just do it in your client:
ReplyDelete$(function(){
var id = location.href.replace(/.*pid=/, '');
$.galleriffic.gotoImage(id);
});
You can try to add id to the hash of the URL instead of query strings.
e.g.
URL would be:
http://mywebsite.com/pictures/#12345
add these code to your page:
$(function(){
$.galleriffic.gotoImage(location.hash);
});
this would be better because Galleriffic doesn't change page URL when viewing different pictures.
I came up with a solution.
ReplyDeleteWhile looping through the database results I compare the $_GET['pid'] with the ID of the current photo in the loop. If the values match i add the location of that photo (an iterating number starting at 1) into a variable.
$i = 1;
foreach($resultArray as $result) {
if($_GET['pid'] == $result['ID'])
$imagePos = $i;
$i++;
...
}
After this loop I put the $imagePos variable into a javascript variable, so I can use it when the Galleriffic plugin has loaded. You must use the "" characters before and after the value to make $.galleriffic.gotoImage() method to work.
if($imagePos)
echo '<script type="text/javascript">var imagePos = "' . $imagePos . '";</script>';
After I have loaded the Galleriffic plugin with $("#my_gallery").galleriffic({...}) I call the function $.galleriffic.gotoImage(position), using the imagePos variable I set earlier:
$.galleriffic.gotoImage(imagePos);