Forums

Christian Artists

<html>
<head>
<title>Christian Artists Slide</title>
<style type=\"text/css\">
#slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
                   position: relative; margin: 50px 0; }
#mover           { width: 2880px; position: relative; }
.slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
                   color: #ac0000; }
.slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img       { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
                   padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }
</style>
<script language=\"JavaScript\" type=\"text/javascript\">
function doMove(panelWidth, tooFar) {
	var leftValue = $(\"#mover\").css(\"left\");

	// Fix for IE
	if (leftValue == \"auto\") { leftValue = 0; };

	var movement = parseFloat(leftValue, 10) - panelWidth;

	if (movement == tooFar) {
		$(\".slide img\").animate({
			\"top\": -200
		}, function() {
			$(\"#mover\").animate({
				\"left\": 0
			}, function() {
				$(\".slide img\").animate({
					\"top\": 20
				});
			});
		});
	}
	else {
		$(\".slide img\").animate({
			\"top\": -200
		}, function() {
			$(\"#mover\").animate({
				\"left\": movement
			}, function() {
				$(\".slide img\").animate({
					\"top\": 20
				});
			});
		});
	}
}

sliderIntervalID = setInterval(function(){
	doMove(panelWidth, tooFar);
}, delayLength);

$(\"#slider-stopper\").click(function(){
	if ($(this).text() == \"Stop\") {
		clearInterval(sliderIntervalID);
	 	$(this).text(\"Start\");
	}
	else {
		sliderIntervalID = setInterval(function(){
			doMove(panelWidth, tooFar);
		}, delayLength);
	 	$(this).text(\"Stop\");
	}
});

// -->
</script>
</head>
<body>
<div id=\"slider\">

	<div id=\"mover\">

		<div id=\"slide-1\" class=\"slide\">

			<h1>Garden Rack</h1>

			<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>

			<a href=\"http://c4.ac-images.myspacecdn.com/images02/38/l_bcb803af2cc94773904437c7617c2d1f.jpg\"><img src=\"images/slide-1-image.png\" alt=\"learn more\" /></a>

		</div>

		... additional slides follow format of this one, except no need for ID ... 

	</div>
</div>

<div class=\"slide\">
   <h1>Name of Slide</h1>
   .etc
</div>

</body>

</html>

I just need to know if this javascript code is correct! I hope to hear from you soon!

Christian Artists

I forgot to write this in the first reply, but how many pictures can I add to the slider. I am trying to add over 250 photo images. I hope to hear from you soon.

Robskiwarrior

Hey Christian :)

250 images?! ooff... well what you have to think about is that the code that Chris wrote does not have any preloading techniques, because its really only designed for a few images. Imagine loading up your site and all its images, and then having to load 250 images within that slider... considering most servers would really only let about 3 requests at a time happen, that's a lot of loading...

You could still do it, what I would think about doing is modifying the script so that it would load the images in groups of 5 after the main page is all set up and the first 5 images are rolling... then it would be preloading the images out of site without any impact the the users experience.

Although to be honest I would not recommend doing that, and it begs the question why 250 images? that's a lot of images even for a photography portfolio site!

Christian Artists

Okay! Do you know of any sites or programs that have Flash Banner or Sliders that allow you to upload over 250 images for a reasonable price? Also is the javascript code written correctly. I just want to know if the codes are placed in the right spots.
I hope to hear from you soon.
Thanks

Robskiwarrior

you could have a look here :)

http://net.tutsplus.com/articles/web-ro ... use-today/

:D

meena

how to change the text start / stop with images of play and pause???

thanks in advance

treehouse : what would you like to learn today?

Forums

Start & Stop Slider