Noobslide tutorial: advanced slideshow (sample 7)

Posted by Jean-Baptiste Jung on Jul 10, 2008 in Web development • 36 comments

Some time ago, I wrote a tutorial about the first sample of Noobslide exemples. Now, I’m going to show you how to create an advanced slideshow, with clickable snapshots. In the noobslide exemples, this is the 7th sample.

I assume you had read the first noobslide tutorial I wrote.

Noobslide tutorial: advanced slideshow

Part 1: Creating our html document

After you downloaded noobslide archive, let's create a html document named sample7.html in the class.noobSlide.js directory.
We have to include the Javascript classes and the stylesheets in the head section of the document:

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="_mootools.js"></script>
<script type="text/javascript" src="_class.noobSlide.js"></script>

Now, let's create the html for the slideshow. Paste the code below in the body section of your sample7.html file.

<h2>Sample 7</h2>
<div class="sample">
	<div class="mask6">
		<div id="box7">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>

	<div id="thumbs7">
		<div class="thumbs">
			<div><img src="img1.jpg" alt="Photo Thumb" /></div>
			<div><img src="img2.jpg" alt="Photo Thumb" /></div>
			<div><img src="img3.jpg" alt="Photo Thumb" /></div>
			<div><img src="img4.jpg" alt="Photo Thumb" /></div>
			<div><img src="img5.jpg" alt="Photo Thumb" /></div>
			<div><img src="img6.jpg" alt="Photo Thumb" /></div>
			<div><img src="img7.jpg" alt="Photo Thumb" /></div>
			<div><img src="img8.jpg" alt="Photo Thumb" /></div>
		</div>

		<div id="thumbs_mask7"></div>

		<p id="thumbs_handles7">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</p>
	</div>
</div>

Let's have a look at the html we just wrote. We create 3 different kind of data: Thumbs, pictures and buttons. This html part isn't really good in terms of semantics, but it will be ok for the exemple. As an exercise, why not trying to get the same result with a better html structure?

Part 2: The Javascript

Here's the coolest part: Javascript. In order to animate our content, we have to include the followig script in the head section of our html document, or put it in a separate .js file, which is a better solution in my opinion.

<script type="text/javascript">
	window.addEvent('domready',function(){
		var startItem = 3; // First item to be displayed
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
		var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
		var hs7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $ES('span','thumbs_handles7'),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		hs7.walk(0);
	});
</script>

That's all. You now have a fully functionnal slideshow gallery which will for sure enhance your website!

Any questions and/or comments? Ask us!

36 reactions

» Comments RSS Feed

Leave a comment