9 min read

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  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="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="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="./img/image_1.jpg" title="Lorem ipsum" />
	<img src="./img/image_1.jpg" title="Lorem ipsum" />
	<img src="./img/image_1.jpg" title="Lorem ipsum" />
	<img src="./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="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
	<img src="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
	<img src="./img/thumbnail_1.jpg" title="Lorem ipsum"/>
	<img src="./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="./img/image_1.jpg" title="Lorem ipsum" rel="1"/>
	<img src="./img/image_1.jpg" title="Lorem ipsum" rel="2"/>
	<img src="./img/image_1.jpg" title="Lorem ipsum" rel="3"/>
	<img src="./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="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="1"/>
	<img src="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="2"/>
	<img src="./img/thumbnail_1.jpg" title="Lorem ipsum" rel="3"/>
	<img src="./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="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="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'));
					
	})		
   	});
	});
Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here