Building an Image Slideshow using Scripty2

Exclusive offer: get 50% off this eBook here
PHP and script.aculo.us Web 2.0 Application Interfaces

PHP and script.aculo.us Web 2.0 Application Interfaces — Save 50%

Build powerful interactive AJAX applications with script.aculo.us and PHP

€16.99    €8.50
by Jose Argudo Blanco | May 2010 | Open Source Web Development

In this article by Jose Argudo, we will build an Image Slideshow using Scripty2.

In our previous Scripty2 article, we saw the basics of the Scripty2 library, we saw the UI elements available, the fx transitions and some effects. We even build an small example of a image slide effect.

This article is going to be a little more complex, just a little, so we are able to build a fully working image slideshow. If you haven't read our previous article, it would be interesting and useful if you do so before continuing with this one.

You can find the article here: Scripty2 in Action

Well, now we can continue. But first, why don't we take a look at what we are going to build in this article:

As we can see in the image we have three main elements. The biggest one will be where the main images are placed, there is also one element where we will make the slide animation to take place. There's also a caption and some descriptive text for the image and, to the right, we have the miniatures slider, clicking on them will make the main image to also slide out and the new one to appear.

Seems difficult to achieve? Don't worry, we will make it step by step, so it's very easy to follow. Our main steps are going to be these:

  • First we we will create the html markup and css necessary, so our page looks like the design.
  • Next step will be to create the slide effect for the available images to the right.
  • And our final step will be to make the thumbnail slider to work.

Good, enough talking, let's start with the action.

Creating the necessary html markup and css

We will start by creating an index.html file, with some basic html in it, just like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es-ES" lang="es-ES" >
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Scripty2</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body id="article">

<div id="gallery">

</div>


<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>
</body>
</html>

Let's take a look at what we have here, first we are including a reset.css file, this time, for a change, we are going to use the Yahoo one, which we can find in this link:

http://developer.yahoo.com/yui/3/cssreset/

We will create a folder called css, and a reset.css file inside it, where we will place the yahoo code. Note that we could also link the reset directly from the yahoo site:

<link rel="stylesheet" type="text/css"
href="http://yui.yahooapis.com/3.1.1/build/cssreset/reset-min.css">

Just below the link to the reset.css file, we find a styles.css file. This file will be the place where we are going to place our own styles. Next we find a div:

<div id="gallery">

</div>

This will be our placeholder for the entire slideshow gallery. Then one last thing, the link to the Scripty2 library:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>

Next step will be to add some styles in our styles.css file:

html, body{
background-color: #D7D7D7;
}

#gallery{
font-family: arial;
font-size: 12px;
width: 470px;
height: 265px;
background-color: #2D2D2D;
border: 1px solid #4F4F4F;
margin: 50px auto;
position: relative;
}

Mostly, we are defining a background colour for the page, and then some styles for our gallery div like its width, height, margin and also a background colour. With all this our page will look like the following screenshot:

We will need to keep working on this, first in our index.html file, we need a bit more of code:

<div id="gallery">
<div id="photos_container">

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" />
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" />
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" />
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" />
</div>

<div id="text_container">
<p><strong>Lorem Ipsum</strong><br/>More lorem ipsum but smaller text</p>
</div>

<div id="thumbnail_container">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
</div>
</div>

We have placed three more divs inside our main gallery one. One of them would be the photos-photos_container, where we place our big photos. The other two will be one for the text- text_container, and the other for the thumbnail images, that will be thumbnail_container.

After we have finished with our html, we need to work with our css. Remember we are going to do it in our styles.css:

#photos_container{
width: 452px;
height: 247px;
background-color: #fff;
border: 1px solid #fff;
margin-top: 8px;
margin-left: 8px;
overflow: hidden;
}

#text_container{
width: 377px;
height: 55px;
background-color: #000000;
color: #ffffff;
position: absolute;
z-index: 2;
bottom: 9px;
left: 9px;
}

#text_container p{
padding: 5px;
}

#thumbnail_container{
width: 75px;
height: 247px;
background-color: #000000;
position: absolute;
z-index: 3;
top: 9px;
right: 9px;
}

#thumbnail_container img{
margin: 13px 13px 0px 13px;
}

strong{
font-weight: bold;
}

Here we have added styles for each one of our divs, just quite basic styling for the necessary elements, so our page now looks a bit more like the design:

Though this looks a bit better than before, it still does nothing and that's going to be our next step.

Creating the slide effect

First we need some modifications to our html code, this time, though we could use id tags in order to identify elements, we are going to use rel tags. So we can see a different way of doing things. Let's then modify the html:

<div id="photos_container">

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" rel="1"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" rel="2"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" rel="3"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum" rel="4"/>

</div>

<div id="text_container">
<p><strong>Lorem Ipsum</strong><br/>More lorem ipsum but smaller text</p>
</div>

<div id="thumbnail_container">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="1"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="2"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="3"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="4"/>
</div>

Note the difference, we have added rel tags to each one of the images in every one of the divs. Now we are going to add a script after the next line:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>

The script is going to look like this:

<script type="text/javascript">
$$('#thumbnail_container img').each(function(image){
image.observe('click', function(){

$$('#photos_container img[rel="'+this.
readAttribute('rel')+'"]').each(function(big_image){

alert(big_image.readAttribute('title'));

})
});
});
</script>

First we select all the images inside the #thumbnail_container div:

$$('#thumbnail_container img')

Then we use the each function to loop through the results of this selection, and add the click event to them:

image.observe('click', function(){

This event will fire a function, that will in turn select the bigger images, the one in which the rel attribute is equal to the rel attribute of the thumbnail:

$$('#photos_container img[rel="'+this.readAttribute('rel')+'"]').each(function(big_image){

We know this will return only one value, but as the selected could, theoretically, return more than one value, we need to use the each function again.

Note that we use the this.readAttribute('rel') function to read the value of the rel attribute of the thumbnail image. Then we use the alert function to show the title value of the big image:

alert(big_image.readAttribute('title'));

If we now click on any of the thumbnails, we will get an alert, just like this:

We have done this just to check if our code is working and we are able to select the image we want. Now we are going to change this alert for something more interesting. But first, we need to do some modifications to our styles.css file, we will modify our photos container styles:

#photos_container{
width: 452px;
height: 247px;
background-color: #fff;
border: 1px solid #fff;
margin-top: 8px;
margin-left: 8px;
overflow: hidden;
position: relative;
}

Only to add the position relate in it, this way we will be able to absolute position the images inside it, adding these styles:

#photos_container img{
position: absolute;
}

With these changes we are done with the styles for now, return to the index.html file, we are going to introduce some modifications here too:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js">
</script>
<script type="text/javascript">
var current_image = 1;

$$('#photos_container img').each(function(image){

var pos_y = (image.readAttribute('rel') * 247) - 247;
image.setStyle({top: pos_y+'px'});
})

.
.
.

I've placed the modifications in bold, so we can concentrate on them. What have we here? We are creating a new variable, current_image, so we can save which is the current active image. At page load this will be the first one, so we are placing 1 to its value.

Next we loop through all of the big images, reading its rel attribute, to know which one of the images are we working with. We are multiplying this rel attribute with 247, which is the height of our div. We are also subtracting 247 so the first image is at 0 position.

note

Just after this, we are using prototype's setStyle function to give each image its proper top value. Now, I'm going to comment one of the css styles:

#photos_container{
width: 452px;
height: 247px;
background-color: #fff;
border: 1px solid #fff;
margin-top: 8px;
margin-left: 8px;
//overflow: hidden;
position: relative;
}

You don't need to do this, I' will do it for you, so we can see the result of our previous coding, and then I will turn back and leave it as it was before, prior to continuing. So our page would look like the next image:

As we see in the image, all images are one on top of the others, this way we will be able to move them in the y axis. We are going to achieve that by modifying this code:

$$('#thumbnail_container img').each(function(image){
image.observe('click', function(){

$$('#photos_container img[rel="'+this.
readAttribute('rel')+'"]').each(function(big_image){
alert(big_image.readAttribute('title'));

})
});
});
PHP and script.aculo.us Web 2.0 Application Interfaces Build powerful interactive AJAX applications with script.aculo.us and PHP
Published: May 2009
eBook Price: €16.99
Book Price: €26.99
See more
Select your format and quantity:

To this new one:

$$('#thumbnail_container img').each(function(image){

image.observe('click', function(){


var change_image = this.readAttribute('rel');

if(change_image != current_image){

$$('#photos_container img').each(function(image){

if(change_image > current_image){

image.morph('top: '+(parseFloat(image.getStyle('top'))-(247
* (change_image - current_image)))+'px', {duration: 2,
transition: 'spring' });
}else{
image.morph('top: '+(parseFloat(image.getStyle('top'))+(247 *
(current_image - change_image)))+'px', {duration: 2, transition:
'spring' });
}
});
}

current_image = change_image;

});
});

Note that this time, I've placed in bold the code that remains the same. All the rest is new, and that's what we are going to comment. First thing we do is read the rel attribute of the clicked image, and save it into the change_image variable:

var change_image = this.readAttribute('rel');

We will use that in our future calculations, our next step will be to check if the image clicked is different to the current image:

if(change_image != current_image){

If we click on the current active image, nothing will happen, but if the image is different we will loop through all of them:

$$('#photos_container img').each(function(image){

Next check we made is to find out if the clicked image has a rel attribute bigger than the current one:

if(change_image > current_image){

If the clicked image has a bigger rel attribute, we will move all images upwards:

image.morph('top: '+(parseFloat(image.getStyle('top'))-
(247 * (change_image - current_image)))+'px', {
duration: 2, transition: 'spring' })

Otherwise we will do it downwards:

image.morph('top: '+(parseFloat(image.getStyle
('top'))+(247 * (current_image - change_image)))+
'px', {duration: 2, transition: 'spring' });

Here we are using the morph Slidy2 function to change the top attribute of each image. But first we need to know which is the current value for this attribute:

image.getStyle('top')

We use the parseFloat JavaScript function because the getStyle function will return the numeric value, but also with the px string, something like 247px and so on. As we want to add a value to this result, we need to use the parseFloat function first. After we know the current top value, we can add or substract from that value quite easily.

Our last step is to change the current_image variable, to reflect the clicked one:

current_image = change_image;

With all this code in place, we can now try our code, and when we click in one of the thumbnails, all of the big images will move:

Give it a try! But there are many things still to do! So after you give it a try, come back and continue with us!

One of these things would be the opacity of the text_container div, this is quite easy to achieve, let's do it:

var current_image = 1;

$('text_container').setStyle({opacity: 0.5});

Again our setStyle funcion will be of great help for this, as adding opacity this way is not going to give inconsistencies between browsers, it's safe to use. Take a look at the result:

Better this time, much more like the original design. But we still need to place the correct text when the thumbnail is clicked, ready for that? Well, first I've modified a bit the html so we actually see some differences:

<div id="photos_container">

<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text one" rel="1"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text two" rel="2"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text three" rel="3"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text four" rel="4"/>

</div>

But be free to place any text you want. Let's take a look at the code we need to change this text:


.
.
.

var change_image = this.readAttribute('rel');

$$('#photos_container img[rel='+change_image+']').each(function(image){

var text = image.readAttribute('title');
$('text_container').replace('<div id="text_container"><p>'+text+'</p></div>');
$('text_container').setStyle({opacity: 0.5});

});

if(change_image != current_image){
.
.
.

We need to select the image first, and we will do it using the rel attribute, and the change_image variable:

$$('#photos_container img[rel='+change_image+']')

Remember that this method returns an array, so though in this case it only returns an element, we need to use the each function. Then we read the value of the title attribute of that image, and save it to a variable:

var text = image.readAttribute('title');

As we now have the necessary data, we will use the replace function to change the text_container div the new content:

$('text_container').replace('<div id="text_container"><p>'+text+'</p></div>');

Note that the replace method will remove the text_container div, so in the new html we are placing we create it again, along with the new title text.

Also, as the text_container is created again, it will be completely black, we need to change the opacity again:

$('text_container').setStyle({opacity: 0.5});

And we are done, now when we click on the little thumbnails the text will also be modified:

Good, our slideshow gallery is advancing, but we are able to enhance it a bit more, lets do that.

Lets add some enhancements to the slider

The thumbnails need something that makes them stand out, a white border would be good for that, so in our styles.css we will add these modifications:


#thumbnail_container img{
margin: 13px 13px 0px 13px;
border: 1px solid #ffffff;
cursor: pointer;

}

Also the cursor: pointer style will add to the feeling of the thumbnails to be links. Our next enhancement is going to be more practical than aesthetic. Maybe you have noticed that if you start clicking on the thumbnails, and continue clicking before the effect has ended the ending position of the images is not well calculated. That's because of our getStyle('top'):

image.morph('top: '+(parseFloat(image.getStyle('top'))

As the effect is running the top position is calculated in a position that is in between of the starting position and the ending one. That's a big problem, as images can end up at the middle of our gallery viewpoint. How can we solve this problem? Well there are some steps involved, first we are going to declare a new variable:

var current_image = 1;
var effect = 0;
$('text_container').setStyle({opacity: 0.5});

This effect image is going to be used to save the state of the effect, if its value is 0, it would mean that no effect is taking place. Now, how do we change its value when an effect is taking place? This requires a modification of the morph Scripty2 function:

image.morph('top: '+(parseFloat(image.getStyle('top'))-(247 *
(change_image - current_image)))+'px', {duration: 2, transition:
'spring', before: function(){ effect = 1;}, after: function(){
effect = 0; current_image = change_image;}
});

We have added two new options to the morph function, we now have a before option containing a function that changes the value of the effect variable to 1.

The before option takes place, as it name says, before the morph effect takes place. Also we have an after option, which a function, that is called when the effect has finished. In that after function we place the value of the effect variable to 0.

The current_image variable is also changed here, it's necessary to do it here, because is now when the effect has taken place, and ended.

Good, so now, before the effect has taken place the effect variable changes it's value to 1, so we can check if an animation is taken place. And when that animation ends, we change the value to 0, so we know that we can start another new animation. But how do we do these checks? I will show you that in a moment:


$$('#photos_container img[rel='+change_image+
']').each(function(image){

if(effect == 0){
var text = image.readAttribute('title');
$('text_container').replace('<div id="text_container">
<p>'+text+'</p></div>');
$('text_container').setStyle({opacity: 0.5});
}

});

That was the code we used to change the text, we have placed a check here, so the text doesn't changes either when an animation is taking place, and we click on another thumbnail before the animation has ended.

Now, to place the check on the effects:



$$('#photos_container img[rel='+change_image+']').
each(function(image){

if(effect == 0){
var text = image.readAttribute('title');
$('text_container').replace('<div id=
"text_container"><p>'+text+'</p></div>');
$('text_container').setStyle({opacity: 0.5});
}
});


That was the code we used to change the text, we have placed a check here,
so the text doesn't changes either when an animation is taking place,
and we click on another thumbnail before the animation has ended.
Now, to place the check on the effects:

if(change_image != current_image){

//We loop through all of the images
$$('#photos_container img').each(function(image){

if(effect == 0){

//And move all the images
if(change_image > current_image){
image.morph('top: '+(parseFloat(image.getStyle('top'))-
(247 * (change_image - current_image)))+'px', {duration:
2, transition: 'spring', before: function(){ effect = 1;},
after: function(){ effect = 0; current_image = change_image;} });
}else{
image.morph('top: '+(parseFloat(image.getStyle('top'))+
(247 * (current_image - change_image)))+'px', {duration:
2, transition: 'spring', before: function(){ effect = 1;
}, after: function(){ effect = 0; current_image = change_image;} });
}

}
});
}

Don't forget to remove the next line, that will be at the end of our code:

}	
});
}

current_image = change_image;
});
});

Good, now, when we click on a thumbnail, if we try to click on another one, before the effect ends, nothing will happen. Now, what can we do, so that the users of our little gallery notice they can click? As it's not a good idea to have our users click, and nothing happens we will add a little loader. I like to use the ones we can found here:http://ajaxload.info/

Download the one you like, place it in the css folder, and add this div to our html code:

<div id="gallery">
<div id="loader">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./css/ajax-loader.gif" />
</div>

We will also need to add some style in our styles.css file:

#loader{
position: absolute;
top: 9px;
left: 9px;
z-index: 100;
display: none;
}

Also, we will need to make some changes to the before and after options of the morph effect:

if(change_image > current_image){	
image.morph('top: '+(parseFloat(image.getStyle('top'))-(247 *
(change_image - current_image)))+'px', {duration: 2, transition:
'spring', before: function(){ effect = 1; $('loader').setStyle({
display: 'block'}
); }, after: function(){ effect = 0;
current_image = change_image; $('loader').setStyle({display: 'none'});} });
}else{
image.morph('top: '+(parseFloat(image.getStyle('top'))+(247
* (current_image - change_image)))+'px', {duration: 2, transition:
'spring', before: function(){ effect = 1; $('loader').setStyle({display:
'block'});
}, after: function(){ effect = 0; current_image = change_image;
$('loader').setStyle({display: 'none'});} });

So in the before option we use the setStyle function to show the div, and in the after option we hide it. So when an animation is taking place, we will see something like the next image:

Good, all the pieces are almost in place. Only one big thing is still needed, the thumbnail slider, just work on that now.

Working on the thumbnail slider

This is going to work in a quite similar fashion as the image slider, first we are going to repeat some of the images, so we have more than only four:

<div id="photos_container">				
...
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text five" rel="5"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/image_1.jpg" title="Lorem ipsum: More Lorem ipsum text six" rel="6"/>

</div>

<div id="text_container">
<p><strong>Lorem Ipsum</strong><br/>More lorem ipsum but smaller text</p>
</div>

<div id="thumbnail_container">
...
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text five" rel="5"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text six" rel="6"/>
</div>

Now we need to add the little arrows, we will end up with this code:

<div id="thumbnail_container">
<div id="up_arrow">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./css/up_arrow.gif" />
</div>
<div id="thumbnails">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text one" rel="1"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text two" rel="2"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text three" rel="3"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text four" rel="4"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text five" rel="5"/>
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./img/thumbnail_1.jpg" title="Lorem ipsum text six" rel="6"/>
</div>
<div id="down_arrow">
<img src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="./css/down_arrow.gif" />
</div>
</div>

}

Now to the css code, open our styles.css file and add this:

#up_arrow img, #down_arrow img{
border: 0;
}

#thumbnails{
height: 189px;
overflow: hidden;
position: relative;
}

#thumbnails img{
position: absolute;
}

Now we need to change this code:

$$('#thumbnail_container img').each(function(image){

To this new one:

$$('#thumbnails img').each(function(image){	

We also need the code to make the arrows to work, let's see it:

$$('#thumbnails img').each(function(image){	
var pos_y = (image.readAttribute('rel') * 53) - 53;
image.setStyle({top: pos_y+'px'});
})

$('u_arrow').observe('click', function(){

$$('#thumbnails img').each(function(image){
if(effect == 0){

image.morph('top: '+(parseFloat(image.getStyle('top'))
-(168))+'px', {duration: 0.2, transition: 'easeFrom',
before: function(){ effect = 1; $('loader').setStyle({
display: 'block'}); }, after: function(){ effect =
0; $('loader').setStyle({display: 'none'});} });

}
});

});

$('d_arrow').observe('click', function(){

$$('#thumbnails img').each(function(image){
if(effect == 0){

image.morph('top: '+(parseFloat(image.getStyle('top'))+(168))+
'px', {duration: 0.2, transition: 'easeFrom', before: function()
{ effect = 1; $('loader').setStyle({display: 'block'}); }, after:
function(){ effect = 0; $('loader').setStyle({display: 'none'});} });
}
});

});

Most of this code is very, very, similar to the previous code we have seen through the article. Anyway I'm going to explain it to you. First we loop through the thumbnail images positioning them:

$$('#thumbnails img').each(function(image){
var pos_y = (image.readAttribute('rel') * 53) - 53;
image.setStyle({top: pos_y+'px'});
})

Then we add a click even to the up arrow:

$('u_arrow').observe('click', function(){

And when this arrow is clicked we move all the thumbnail images:

$$('#thumbnails img').each(function(image){	
if(effect == 0){
image.morph('top: '+(parseFloat(image.getStyle('top'))-(168))+'px',
{duration: 0.2, transition: 'easeFrom', before: function()
{ effect = 1; $('loader').setStyle({display: 'block'}); },
after: function(){ effect = 0; $('loader').
setStyle({display: 'none'});} });

}
});

The down arrow is equal but in opposite direction. But now we are done, we can see the end result here:

Polishing our slider

At this point, we will have a really big piece of JavaScript code, it would be better if we placed it outside our index.html file, and that's what we are going to do. Create a slider.js file, place it inside the js folder. Then copy and paste all the JavaScript code we have created into that file.

Then we need to link this file, just as the Scripty2 one:

<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/prototype.s2.min.js"></script>		
<script type="text/javascript" src='//dgdsbygo8mp3h.cloudfront.net/sites/default/files/blank.gif' data-original="js/slider.js"></script

And our slider will continue to work, just the same, but everything will be better organized. We can also modify the way our titles are shown, by know we have:

var text = image.readAttribute('title');
$('text_container').replace('<div
id="text_container"><p>'+text+'</p></div>');
$('text_container').setStyle({opacity: 0.5});

But if we make use of the JavaScript split function, we can modify this code like this:

var text = image.readAttribute('title');
text = text.split(':');
$('text_container').replace('<div id="text_container"><p><strong>'+
text[0]+'</strong><br/>'+text[1]+'</p></div>');
$('text_container').setStyle({opacity: 0.5});

This will make our title text to split by the colon sign, so we can have the first part in bold, and the other one like normal text, just like in the design.

Summary

This has been quite a long article, again I hope it has been interesting for you, and that you had fun reading it, as I had writing it. Scripty2 is a very powerful library, and with this article I hope to have given you some ideas about how to use it.

The slider can be further enhanced, but now it is up to you to do so, give it a try, modify it and have fun using the Scripty2 library, you won't be disappointed. Some ideas to enhance it would to build it like a plugin so it can be used in any project, receive the images to use from an Ajax call, or dynamically creating the thumbnails. All of these are good ideas to follow.


Further resources on this subject:


About the Author :


Jose Argudo Blanco

Jose Argudo Blanco is a web developer from Valencia, Spain. After finishing his studies he started working for a web design company. After working for six years for that company and some others, he decided to work as a freelance.

Now, after some years have passed, he thinks it's the best decision he has ever takena decision that let him work with the tools he likes, such as CodeIgniter, Joomla!, CakePHP, JQuery, and other well-known open source technologies.

For the past few months he has also reviewed some books for Packt Publishing, such as Magento 1.3 Theme Design, Magento: Beginner's Guide, Joomla! 1.5 SEO, Symfony 1.3 Web Application Development, and Joomla! with Flash. The one yet to be published is Magento Development with PHP.

Books From Packt

Pentaho 3.2 Data Integration: Beginner's Guide
Pentaho 3.2 Data Integration: Beginner's Guide

Moodle 1.9 Theme Design: Beginner's Guide
Moodle 1.9 Theme Design: Beginner's Guide

GlassFish Security
GlassFish Security

Drupal E-commerce with Ubercart 2.x
Drupal E-commerce with Ubercart 2.x

Learning jQuery 1.3
Learning jQuery 1.3

jQuery 1.4 Reference Guide
jQuery 1.4 Reference Guide

Firebug 1.5: Editing, Debugging, and Monitoring Web Pages
Firebug 1.5: Editing, Debugging, and Monitoring Web Pages

Django 1.1 Testing and Debugging
Django 1.1 Testing and Debugging

Code Download and Errata
Packt Anytime, Anywhere
Register Books
Print Upgrades
eBook Downloads
Video Support
Contact Us
Awards Voting Nominations Previous Winners
Judges Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software
Resources
Open Source CMS Hall Of Fame CMS Most Promising Open Source Project Open Source E-Commerce Applications Open Source JavaScript Library Open Source Graphics Software