6 replies to this topic

[Csabi]

The first part: Creating a Slideshow using only Javascript, HTML and CSS part1Now the slideshow can change the images, it can resize them and place them in the center. Now let`s make it more stylish: I will change the background color of the slideshow div to black, but you can leave it white if you like. (if you change it to black don`t forget to set the text color to white).


Loading...
Another way to make it look better is to show a loading... message with a transparent background while the image is loaded: Placed over the image in the center. I think it will look great. so let`s code it.

First create a div with the id loadingimage inside the slideshow div BEFORE the slideshowimage div. I`we capitalized before because this is important and you will see immediately why. Place inside your div the loading message, (I will use Loading...) and change the background color to black.

Now the loading message is displayed at the top of the slideshow and it`s always visible. Now we need to overlay it on the image and place it in the center. We will do this using only CSS, using the z-index property. If two or more thing are overlaying then there need`s to be and order to specify what element is in the front and what is behind. The element with the highest z-index value is in the front. This property works only with positioned elements, so set the position of the div to absolute. Now set the height and the width, I will use 100px width and 20px height, and use the text-align:center; property to center the text inside the div.
Now my loadingimage div look in the following way:

<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;">Loading...</div>

After setting the position to absolute the div overlays on the image, but now we need to place it in the center. We will make this using the margin property.
Here is an easy way to calculate the pixels required to place the image in center:

w - the width of slideshowimage div
h - the height of slideshowimage div
wl - the width of loadingimage div
wh - the height of loadingimage div

Space required from left:
(w - wl) / 2
Mine is
(400px - 100px) / 2 = 150px

Space required from top:
(h - hl) / 2
Mine is
(300px - 20px) / 2 = 140px

Now we need just to create a snippet what will make the above calculations and change the margin property. This can be changed using the .style.margin property. This piece of code needs to be placed before the functions, at the beginning of the code, because the divs size will not change while the script is running and so we don`t need to change the margin property each time we change the image. This snippet should look like this:

document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');

Note: The parseInt() converts a string to an integer (number), this is needed because the .style.height and the .style.width properties will return strings like "400px" not numbers like "400" - so if we want to make mathematical calculations we need to convert them to numbers.

Now that the loading message is in the center we just need to make it transparent and to display it only when it`s needed.

Making the loading message div transparent
We will make it transparent using CSS. For a better browser compatibility we will use two CSS properties in the following way:

<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;margin:150px 140px;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>

Show the loading message only when needed
To do this we will use the waitimage function. In this function we will change the z-index value of the loading message so it will be on the top of the image. This code should look like this:

document.getElementById('loadingimage').style.zIndex = 1;

Place it after the lines what check if the image is complete or not, because if the slideshow is showing the same image multiple times it will nod be loaded again so we don`t need to show the loading message.
After the loading message is displayed we need to hide it again when the image is loaded. To do this we just need to set the zIndex of the loading message to -1 using the same method as above, but this code will need to be placed in the positioningimage function after the image has been placed in the right place.

My code look in the following way, your should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;">
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
changeimage(0);
</script>

</body>
</html>

Styling the controls
We will make the controls (the slideshowcontrols) to look much better and it will be displayed only on mouseover, we will overlay the slideshowcontrols div on the images (like the loadingimage div) and we will show it only when the cursor is over the image.

So let`s start:
Overlaying the controls on the images
This is very simple, we will use only CSS:
Add the following properties to the slideshowcontrols div:
- position:absolute;
- height: 20px; (you can use any other value)
- margin: -20xp 0; (use the same value as at the height but with a - in front)
It should look like this:

<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;">

Making it transparent
We will make it transparent, but using a better method:
At the loading message the text is transparent too, this is not a problem for the loading message, but the controls will look better with clear white buttons. To get rid of this problem we will create a second div, with the id slideshowcontrolsbg with a black background and we will make this div transparent instead of slideshowcontrols.

Create the slideshowcontrolsbg and place it right before the slideshowcontrols div.
Now add all the CSS properties from the slideshowcontrols to it (don`t remove the properties from slideshowcontrols) and add the following properties, too:
- background: black;
- filter:alpha(opacity=60);
- opacity:0.6;
Now the two divs should look like this:

<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>

Display the controls only on mouseover
Now we will make the controls to be displayed only when the cursor is over the image. We will make this using the z-index property to hide the controls when it`s needed.
First add the z-index:-1; CSS property to the slideshowcontrolsbg and slideshowcontrols divs. This will hide the controls. Now we need to make it to reappear when the cursor is over the image. To do this we will create a function called showcontrols what will set the z-index of the two divs to 1 and it will be triggered by the onMouseOver even on slideshow div. The funtion should look like this:

function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}

Now we just need an another function what will hide the controls when the cursor is moved away. I will name this function hidecontrols, this will be very similar to the showcontrols function, but this will set the z-index values to -1 and it will be triggered by the onMouseOut event.

After making all the changes my code look like this, your should look the same:

<html>
<head>
</head>

<body>

<div id="slideshow" style="width:400px;overflow:hidden;background:black;color:white;" onMouseOver="showcontrols();" onMouseOut="hidecontrols();">
<div id="loadingimage" style="background:black;position:absolute;width:100px;height:20px;text-align:center;filter:alpha(opacity=60);opacity:0.6;">Loading...</div>
<div id="slideshowimage" style="height:301px;width:400px;overflow:hidden;">
</div>
<div id="slideshowcontrolsbg" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;background:black;filter:alpha(opacity=60);opacity:0.6;z-index:-1;"></div>
<div id="slideshowcontrols" style="width:400px;overflow:hidden;position:absolute;height:20px;margin:-20px 0;z-index:-1;">
<a onClick="changeimage(-1);">Prev</a>
<a onClick="changeimage(1);">Next</a>
</div>
</div>

<script type="text/javascript">
var images = new Array;
images[1] = "http://www.carpages.co.uk/guide/@images/skoda/skoda-octavia.jpg";
images[2] = "http://image.automotive.com/f/reviews/driven/11352663+pheader/0812_01_z+2009_volkswagen_jetta_tDI+front_three_quarter_view.jpg";
images[3] = "http://www.carautoportal.com/car-images/audi/audi-r8-car.jpg";
images[4] = "http://www.roadfly.com/new-cars/wp-content/uploads/gallery/2008-mercedes-benz-c-class/2008-mercedes-benz-C350-sport.jpg";
images[5] = "http://capital.automotive-enewsletters.com/wp-content/uploads/2009/12/bmw.jpg";
var currentimage = 1;
document.getElementById('loadingimage').style.margin = ((parseInt(document.getElementById('slideshowimage').style.height) - parseInt(document.getElementById('loadingimage').style.height))/2 + 'px ' + (parseInt(document.getElementById('slideshowimage').style.width) - parseInt(document.getElementById('loadingimage').style.width))/2 + 'px');
function changeimage(change){
currentimage += change;
if(currentimage > images.length - 1){
currentimage = 1;
}
else if(currentimage < 1){
currentimage = images.length - 1;
}
document.getElementById('slideshowimage').innerHTML = '<img id="image" width="' + document.getElementById('slideshowimage').style.width +'" src="' + images[currentimage] + '"/>';
waitimage();
}
function waitimage(){
if(document.getElementById('image').complete){
positioningimage();
return;
}
document.getElementById('loadingimage').style.zIndex = 1;
setTimeout('waitimage()',250);
}
function positioningimage(){
document.getElementById('image').style.marginTop = (parseInt(document.getElementById('slideshowimage').style.height) - document.getElementById('image').height) / 2 + 'px';
document.getElementById('loadingimage').style.zIndex = -1;
}
function showcontrols(){
document.getElementById('slideshowcontrols').style.zIndex = 1;
document.getElementById('slideshowcontrolsbg').style.zIndex = 1;
}
function hidecontrols(){
document.getElementById('slideshowcontrols').style.zIndex = -1;
document.getElementById('slideshowcontrolsbg').style.zIndex = -1;
}
changeimage(0);
</script>

</body>
</html>

if something is not clear pleas ask me! The 5th part is coming soon, but if you can`t wait check out the original tutorial: Creating a Slideshow using only Javascript, HTML and CSS part 5

[Paulo_Jorge]

great tutorial;

how can i put a feature like this;

when the user click on one of the pictures a new tab is opened with the picture, like a link in the pictures ??

thanks,

[s0ftwarep1ay]

Is this code like a flash catalist tool?
I mean javascript is still a overused language that could be considered equal to the effects of an other framework just like flash catalist or
spry

Is there any User interface in which you can use javascript like the one used for flash catalist?

Thanks

[klobel]

Is there a way to make the images automatically rotate through if someone isn't pushing a button?

[AtiburRahman]

bro there is nothing showing in my browser without the codes. can u help me where is the problem??

[Monkeyking]

I want to say appreciate providing these details, you are doing a great job

[maky]

nice post. thank you very much