How to display image on main page with resetting scroll list of thumbnails?

[budgie]

Hi all,
I have no idea if this is possible or not, in fact I'm sure it's NOT a PP issue at all (rather it's more of a HTML problem), however does anyone know how I can display an image (selected from the thumbnail list at the bottom of my main page) without reloading the entire page (which resets the thumbnail scoll list)?

My site is here: http://www.tonybudge.com.au/

As you can see, underneath my displayed picture I have a thumbnail list of pics in a scrollable box. What happens now, is when I scroll through my thumbnail'd list of pics (say I click on the 1st picture on the 3rd row down) the pic gets displayed on the main page (all good so far) however as the whole page has reloaded the thumbnail scrolldown list has also refreshed which means that if I want to now go and view the 2nd picture on the 3rd row I have to re-scroll down through the thumbnail list. This isn't a big issue however the way it's working now means that it's difficult for visitors to look at my pictures in sequence (ie: look at pic1, then pic2 and so on) as the scroll list keeps resetting back to the top... Ideally, I'd like it so that a user clicks on a thumbnail (say 1st pic on 3rd row) and that pic is displayed on the main page AND the thumbnail list of pics stays where the user had scrolled down too so they can easily click on another pic to view it.

As I said, I don't believe this is a PP issue at all but would appreciate any idea's on how I might get this working.

cheers tony

[jaywilliams+]

The only way I can think of doing that would be to use Javascript.
You could have the script scroll to the current image. Possibly by a named link.

It's a thought.

[austriaka+]

I see three possibilities.
1. with pure html: give each thumb a <a name="imgid_xx"></a> and make the link in the thumbnail to the image with "#imgid_xx" at the and. But I guess that the whole page would scroll to the thumb with this mehtod.

2. with javascript: use scriptaculous effects, there is one "scroll". You can provide scrolling to a definated place with onClick.

3. with javascript: use Javascript to exchange the large center image without re-loading the page. But be aware that you have to exchange the image title as well.

HTH
KArin

[dakwegmo+]

I have a simple JavaScript that would allow you to do it, but using it requires hacking one of the core files to get the JavaScript event handlers where they need to be. Let me know if you're interested.

Very Nice Photos, BTW.

[GeoS+]

1. I belive all JS hacks doesnt need to use core files hack. There is enough to attache one more JS lib in the template file and there add event handling (also with starting event handling method i.e. by executing it when page is loaded).

2. Going back to budgie problem - there are many solutions like:
Thickbox - http://jquery.com/demo/thickbox/
GreyBox - http://orangoo.com/labs/GreyBox/
LightBox - http://www.huddletogether.com/projects/lightbox/
and many other a specialy mutations of few the most popular.

Here is mine example of thickbox usage (click on ):
http://www.zpaf.pl/pl/content/studium/stud_wyst.php

All what you need to do is to attache correct JS lib to the template file and hack a little mine addon.