Hi all,
I came across this awesome image slider:
Thumbnails Navigation Gallery with jQuery
The problem is …you have to click on “best shots” to see the thumbnail navigation…
-
How do you show this thumbnail navigation straight away on loading the page? (ie “best shots” and other list items dont need to be there)
-
and get the thumbnails show near the bottom of the page?
-
and also get the next image to fade in automatically say after 5 seconds, without having to click on a thumbnail, although one can?
Thanks in advance!
its a nice image script its just missing a few things , and there is no tutorial on these tweaks 
Ah well, if that’s the case 
Easy stuff first.
To get the “Best shots” to appear near the bottom, dig in to http://www.bluecrushdesign.co.za/filth/css/style2.css and find “ul.st_navigation” and instead of telling it to be positioned at the top, tell it to be at the bottom:
ul.st_navigation {
position: absolute;
width: 100%;
bottom: 10px; /* instead of top:60px use bottom */
left: -500px;
list-style: none;
}
Next, find the “st_wrapper” class in style2.css and modify it so it’s positioned from the bottom as well.
.st_wrapper{
/* Make sure to remove the "display:none" so the thumbs show by default */
position: absolute;
width:100%;
height:126px;
overflow-y:hidden;
bottom:0px; /* This was changed from top:50px; */
left:0px;
}
In the markup, if you don’t want the “Best shots” link shown, remove it from the markup 
<!-- it's safe to remove this: -->
<span class="st_link">Best Shots<span class="st_arrow_down"></span></span>
Now for the hard(er) part, the auto-rotate.
There are several things we need to do for this.
- Firstly, we’ll want to keep track of which thumbnail is the currently active one.
- then we need to make sure that if someone has interacted with a thumbnail we stop auto-rotating
The code is probably too long to post here, so I’ve put it up on my server and attached in a zip. (I’ve taken your markup / styles / images and worked with it)
The auto rotate method looks like this:
/** Autorotate method */
function autoRotate(delay) {
//check of the thumbs have been interacted with
if (thumbsInteractedWith === true) {
clearTimeout(theAutoRotateTimer);
return;
}
//the timer function
theAutoRotateTimer = setTimeout(function(){
//make sure we don't enter the body of the method if someone clicked ona thumb
if (thumbsInteractedWith === true) {
return;
}
//find the currently active thumb and make the next one active.
$active = $(".st_thumbs .active");
$next = $active.next();
if ($active.is(":last-child")) {
$next = $active.parent().find("img:first");
}
setImage($next);
//call autorotate again ... yay for recursiveness
autoRotate(delay);
}, delay);
}
autoRotate(3000);
hi there,
ive already spent hours adding in my own images…
so thats why i asked as this is the slider i wanted;-)
There must be somebody who knows javascript in this forum , to be able to help out …
So please if others can help id appreciate it…
my page im working on is here:
Thumbnails Navigation Gallery with jQuery
Thanks in advance
No probs, glad to help.
The “autoRotate(3000)” call is where you set how quick the images swap out.
the 3000 is milliseconds, so just take the amount of seconds you want and multiply by 1000
I did start working on a version that would automatically restart after a given time, but it was about 3am so I decided to go to bed instead 
Making sure the autorotate starts again is a tiny bit harder, but not too much extra effort. Unfortunately I don’t have the time right now to write it though
You could get the loading div in to the middle by changing its CSS slightly:
.st_loading {
position: fixed;
top: 50%;
left: 50%;
z-index: 10000000;
width:70px;
height:20px;
margin:-25px 0 0 -85px;
/* Things that don't need to change ... */
background:#000 url(../images/icons/loader.gif) no-repeat 10px 50%;
padding:15px 40px 15px 60px;
-moz-box-shadow:0px 0px 2px #000;
-webkit-box-shadow:0px 0px 2px #000;
box-shadow:0px 0px 2px #000;
opacity:0.6;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=60);
}
ps - so these other javascript files you didnt need?;
<script src=“js/cufon-yui.js” type=“text/javascript”></script>
<script src=“js/Quicksand_Book_400.font.js” type=“text/javascript”></script>
<script type=“text/javascript”>
Cufon.replace(‘span,p,h1’,{
textShadow: ‘0px 0px 1px #ffffff’
});
</script>
Not sure if you needed these or not, just removed them from my local version
Hi there,
thanks again for this, i really appreciate it…
ok so i got your files from your server…then tweaked them again a bit:
heres my version: Thumbnails Navigation Gallery with jQuery
One question…
where in code do you change the amount of seconds that the rotation occurs for the big photo?
Also, is there a way we can re-start this rotation again , after say a few seconds, after someone has clicked on a thumbnail?
is this it?
//call autorotate again … yay for recursiveness
autoRotate(delay);
}, delay);
}
autoRotate(3000);
if so , what is 3000? 3000 seconds before it starts again?
im not sure its working though, if that is it , i waited a while
Ps: do u know how do you get the “loading” into the centre of where big images will show?,
i changed the position to relative in that class, but this messed up the width and height of it, i then specified width and height which didnt seem to work
ps - so these other javascript files you didnt need?;
<script src=“js/cufon-yui.js” type=“text/javascript”></script>
<script src=“js/Quicksand_Book_400.font.js” type=“text/javascript”></script>
<script type=“text/javascript”>
Cufon.replace(‘span,p,h1’,{
textShadow: ‘0px 0px 1px #ffffff’
});
</script>