roman10
Noobslide is a MooTools based javascript library allows you to create a web-based image gallery or slideshow easily. (MooTools is a compact JavaScript framework designed for intermediate to advanced JavaScript developer.)
To download the noobslide code, one can refer to the official website here. The package contains the MooTools script, the noobSlide script, two css files, a couple of images and a sample page.
The examples provided are quite easy to understand, here we illustrate two examples, sample 2 and sample 7.
To get started, one need to include the javascript library and the CSS files in the head part of the html page.
<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-1.2-core.js"></script>
<script type="text/javascript" src="_class.noobSlide.packed.js"></script>
Sample 2
In the body of the html page, one needs to include the following html code,
<div id="cont">
<div class="sample">
<div class="mask2">
<div id="box2">
<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>
<p class="buttons">
<span id="prev1"><< Previous</span>
<span id="play1">Play ></span>
<span id="stop1">Stop</span>
<span id="next1">Next >></span>
</p>
</div>
</div>
The code should be clear and easy to understand.
Then in the head part, we call javascript function defined in noobSlide library to achieve the slideshow effects.
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 2 (transition: Bounce.easeOut)
var nS2 = new noobSlide({
box: $('box2'),
items: [0,1,2,3,4,5,6,7],
interval: 3000,
fxOptions: {
duration: 1000,
transition: Fx.Transitions.Bounce.easeOut,
wait: false
},
addButtons: {
previous: $('prev1'),
play: $('play1'),
stop: $('stop1'),
next: $('next1')
},
autoPlay:true
});
});
</script>
The autoPlay parameter set to true will let the slideshow start automatically once the page is loaded.
You can view the effect of the sample here (as a separate page) or below.
Sample 7
In the body part, insert the following html code,
<div id="cont">
<div class="sample">
<div class="mask6">
<div id="box7">
<span><img src="img1.jpg" alt="Photo" style="width:300;"/></span>
<span><img src="img2.jpg" alt="Photo" style="width:300;"/></span>
<span><img src="img3.jpg" alt="Photo" style="width:300;"/></span>
<span><img src="img4.jpg" alt="Photo" style="width:300;"/></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>
<div id="thumbs_mask7"></div>
<p id="thumbs_handles7">
<span></span>
<span></span>
<span></span>
<span></span>
</p>
</div>
</div>
</div>
Then in the head part of the html page, insert the JavaScript code,
<script type="text/javascript">
window.addEvent('domready',function(){
//SAMPLE 7
var startItem = 3; //or 0 or any
var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*100-550)+'px').set('opacity',0.8);
var fxOptions7 = {property:'left',duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
var thumbsFx = new Fx.Tween(thumbs_mask7,fxOptions7);
var nS7 = new noobSlide({
box: $('box7'),
items: [0,1,2,3],
size: 300,
handles: $$('#thumbs_handles7 span'),
fxOptions: fxOptions7,
onWalk: function(currentItem){
thumbsFx.start(currentItem*100-550);
},
startItem: startItem,
autoPlay:true
});
//walk to first with fx
nS7.walk(0);
});
</script>
Note that if you want to adjust the image or thumbnail size, there’re a few places needs to be changed, including the size parameter value and several places in the style.css file. Also, the thumbs_mask.gif file needs to resized properly to fit the thumbnail size you want.
You can refer here (as a separate page) or below for the effect of sample 7.
You can refer here for another sample.
If you enjoyed this article, please consider sharing it!
