EDIT: this question is partially answered at this point, thanks to Neil who has put me on the right path using the scrollTo plugin; however, as detailed below, I'm still having an issue with getting the "next" and "previous" links to correctly adjust the scrolling thumbnail list as desired. thus, I'm wondering if any other skilled jQuery programmers out there would like to take a stab at this and try to help me overcome this obstacle... thanks much in advance.

/////////////////////////

wondering if any proficient jQuery programmers out there can offer some assistance in modifying an image gallery script: I would like to use Galleriffic in an upcoming project-- a great plugin if you're not familiar-- but instead of dividing the thumbnails into pages, I'd like to have a scrolling div displaying all the thumbs at once, as shown here.

my question is whether it's possible to have the scrolling list of thumbs "follow" the state of the large image-- that is, if one clicks "next photo" to display a full-size image, and the corresponding thumbnail is out of view, the list will scroll automatically to show the current thumbnail, if that makes sense. I guess such a script would require the full-size image to follow or "sense" the viewable state of thumbnails and adjust visibility as required. Please let me know if I should be more specific.

I'm hoping there's perhaps some existing jQuery function to accomplish this task (?), and I thank you in advance for any direction here.

2 Answers
2

It allows you to specify an element, e.g. a thumbnail 'IMG' to which you would like to scroll. It also allows you to specify effects on how to do the scrolling.

Check out the examples on how to use it.

Regarding your follow-up comment below:

The buttons to move next and previous have the class "next" or "prev" and the anchor containing the large image has the class "advance-link", they all have a "href" attribute to go to the next/previous slide. So, to scroll to the thumbnail for that slide you should code something like that shown below at, or near, the beginning of your jQuery code. I've only inspected it by eye, so it may have a a typo in it, but you should get the drift.:

thanks for the response Neil-- I guess where I'm a bit confused is in the fact that the full-size image container at right is generated by jQuery, so I'm not sure where to specify the anchor values to call the scrollTo script in snycing position with the thumbnail list... as I mention in my comment below, when a user clicks the full-size image or next/previous button, I'm hoping to not only disply the next/previous full-size image, but reflect the scroll position of the corresponding thumbnail at left...
–
nickpishJan 26 '11 at 0:16

thanks Neil! I seem to be on the right track as you can see from this link: tinyurl.com/4k374zo. It works perfectly when clicking the large image to progress, but seems to get ahead of itself in the scrolling thumb list when clicking "next photo"... I'm wondering if (a) I properly modified your code, and (b) if I placed it in the right spot, right after the jQuery doc ready initialization of the Galleriffic plugin... seems to work in all the browsers I've tested except for IE7; any further guidance would be most appreciated.
–
nickpishJan 27 '11 at 9:48

1

Nick, what seems to be happening is that because there are two click-event handlers on the NEXT and PREV buttoms, you can sometimes (most times actually) pick up the "rel" values of the new image you have displayed, rather than the old one you were replacing. If you can modify the Galleria javascript, then find where the click-handlers are and merge our code into them. I'm afraid I don't have access to IE7 (I use the latest browsers IE8, Firefox 3.6.13 etc.) so I don't know what the problem is there. Maybe the merged code will work.
–
NeilJan 27 '11 at 11:04

hi Neil, thanks that makes sense; now can I just add code that refers to the scrollTo function to the galleriffic script, even though it's defined in a separate js file, or should I actually merge the two scripts? thanks again for the help.
–
nickpishJan 28 '11 at 3:41

thanks much for all the responses guys; and generalhenry, if you'll forgive my lackluster programming knowledge and provide a bit more specifics as to how this would be applied, I'd be most appreciative. I realize that I'm effectively trying to do two things when a user either clicks the larger image or the next/previous buttons: (1) change to the next/previous full-size image and (2) reflect that selection in the position of the thumbnail scroll list
–
nickpishJan 26 '11 at 0:11