Image slider on load?

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…

  1. 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)

  2. and get the thumbnails show near the bottom of the page?

  3. 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 :frowning:

Ah well, if that’s the case :wink:

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 :slight_smile:

<!-- 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

Sounds like you might need to take a look at some [URL=“http://www.designyourway.net/blog/resources/28-useful-jquery-sliders-you-need-to-download/”]list [URL=“http://vandelaydesign.com/blog/web-development/jquery-image-galleries/”]posts [URL=“http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/”]with [URL=“http://www.tripwiremagazine.com/2011/03/165-awesome-jquery-sliders-and-other-useful-jquery-effects.html”]lots of [URL=“http://speckyboy.com/2009/06/03/15-amazing-jquery-image-galleryslideshow-plugins-and-tutorials/”]sliders.

There’s probably one out there that already does (almost) exactly what you want :wink:

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 :slight_smile:

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 :stuck_out_tongue:

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 :frowning:

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 :wink:

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 :wink:

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>

:wink: