How To Make a Beautiful Image Slideshow Gallery CSS & jQuery

Introduction

When you go ahead and have a website, it grabs users attention with a nice value image slider design that promotes your products  which users will admire. In this tutorial im going to show you a apple-like slideshow gallery which is a simillar way to the one they use on apple.com to showcase their apple products. It will be totally front-end, no php code or databases will be required.

DEMO | DOWNLOAD

Step 1 – XHTML

As said above, there will be no need for php coding. We will just be focusing on CSS, XHTML + Jquery. There will be no databases needed, this means that it is really easy to add this to your website, you only need to change a few lines of html coding.

Demo.html

<div id="main">

<div id="gallery">

<div id="slides">

<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" /></div>

</div>

<div id="menu">

<ul>
<li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" /></a></li>
</ul>

</div>

</div>

</div>

Step 2 – CSS

Now the html coding is their, lets see whats inside our CSS stylesheet. The styles found are the styles used directly by the gallery itself, you can view the rest of the other styles, used to show in the demo, which can be found in demo.css.

Demo.css

body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
	/* Page reset */
	margin:0px;
	padding:0px;
}

body{
	/* Setting default text color, background and a font stack */
	color:#444444;
	font-size:13px;
	background: #f2f2f2;
	font-family:Arial, Helvetica, sans-serif;
}

/* Gallery styles */

#gallery{
	/* CSS3 Box Shadow */
	-moz-box-shadow:0 0 3px #AAAAAA;
	-webkit-box-shadow:0 0 3px #AAAAAA;
	box-shadow:0 0 3px #AAAAAA;

	/* CSS3 Rounded Corners */

	-moz-border-radius-bottomleft:4px;
	-webkit-border-bottom-left-radius:4px;
	border-bottom-left-radius:4px;

	-moz-border-radius-bottomright:4px;
	-webkit-border-bottom-right-radius:4px;
	border-bottom-right-radius:4px;

	border:1px solid white;

	background:url(img/panel.jpg) repeat-x bottom center #ffffff;

	/* The width of the gallery */
	width:920px;
	overflow:hidden;
}

#slides{
	/* This is the slide area */
	height:400px;

	/* jQuery changes the width later on to the sum of the widths of all the slides. */
	width:920px;
	overflow:hidden;
}

.slide{
	float:left;
}

#menu{
	/* This is the container for the thumbnails */
	height:45px;
}

ul{
	margin:0px;
	padding:0px;
}

li{
	/* Every thumbnail is a li element */
	width:60px;
	display:inline-block;
	list-style:none;
	height:45px;
	overflow:hidden;
}

li.inact:hover{
	/* The inactive state, highlighted on mouse over */
	background:url(img/pic_bg.png) repeat;
}

li.act,li.act:hover{
	/* The active state of the thumb */
	background:url(img/active_bg.png) no-repeat;
}

li.act a{
	cursor:default;
}

.fbar{
	/* The left-most vertical bar, next to the first thumbnail */
	width:2px;
	background:url(img/divider.png) no-repeat right;
}

li a{
	display:block;
	background:url(img/divider.png) no-repeat right;
	height:35px;
	padding-top:10px;
}

a img{
	border:none;
}

We have used a number of CSS3 specific properties in this slideshow gallery:

• box-shadow, whichthis will make the gallery cast with an light shadow around its edges.
• border-radius, which rounds the bottom corners of the gallery.

Step 3 – jQuery

As above, the gallery doesn't use any php code or databases, so its all up to the front end to make the slideshow work.

script.js

$(document).ready(function(){
	/* This code is executed after the DOM has been completely loaded */

	var totWidth=0;
	var positions = new Array();

	$('#slides .slide').each(function(i){
		/* Loop through all the slides and store their accumulative widths in totWidth */
		positions[i]= totWidth;
		totWidth += $(this).width();

		/* The positions array contains each slide's commulutative offset from the left part of the container */

		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
	});

	$('#slides').width(totWidth);

	/* Change the cotnainer div's width to the exact width of all the slides combined */

	$('#menu ul li a').click(function(e){

		/* On a thumbnail click */
		$('li.menuItem').removeClass('act').addClass('inact');
		$(this).parent().addClass('act');

		var pos = $(this).parent().prevAll('.menuItem').length;

		$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
		/* Start the sliding animation */

		e.preventDefault();
		/* Prevent the default action of the link */
	});

	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
	/* On page load, mark the first thumbnail as active */
});

The whole main idea of the jquery script is to loop through the slides and sim up the width and assign the sum to the slides container. The div with the id ="slides". As the slides are floated to the left side and have enough room, they align next to each other. This means when you click the thumbnail, the script calculates the on which slide to show and scrolls the #slides div.

Finished Result

Having problems? Don’t understand the the tutorial, too lazy? Download the source files

Zenbix Team.