Set first selected image in Galleriffic jQuery plugin?

Question

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.

score 6 · Accepted Answer · answered Feb 13 '12 at 07:34

6

or just do it in your client:

$(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.

answered Feb 13 '12 at 07:34

alphakevin

515
3
11

Thanks for your answer! The `$.galleriffic.gotoImage(id)` method works if I use the image position (starting at 1) as the id. Every thumbnail's anchor has this position in the href-tag (``). However, do you know if there is any way of replacing this automatically set number, with my own ID that I recieve from the database? – ajgarn Feb 13 '12 at 22:05
1

I think you can go to image by hash, try $.galleriffic.gotoImage("#bigleaf"); on the example 4 http://www.twospy.com/galleriffic/example-4.html ... it works! – deb Feb 29 '12 at 00:32
1

"bigleaf" is the value of the name attribute of the link containing the thumbnail, btw – deb Feb 29 '12 at 01:35

score 1 · Answer 2 · answered Feb 12 '12 at 22:06

You can use some jQuery to click on a specific image after the gallery loads:

$("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'].";"; ?>

Set first selected image in Galleriffic jQuery plugin?

2 Answers2