A Beautiful Apple-style Slideshow Gallery With CSS & jQuery

 

 

 

Introduction

When speaking about design, there is one company that is impossible to go without. Apple values design – being a new product, a fancy catalog or their website – there is always something to admire.
This week, we are making an Apple-like slideshow gallery, similar to the one they use on their website to showcase their products. It will be entirely front-end based, no PHP or databases required.
So go ahead and download the example source code and continue with the first step.

Step 1 – XHTML

There is no need for a database nor a PHP back-end for this gallery. This means that it is really easy to incorporate into an existing site – you just have to change a few lines of html code.
Lets take a closer look at the XHTML markup:

demo.html

view sourceprint?

01	<div id="main">

02

03	<div id="gallery">

04

05	<div id="slides">

06

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

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

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

10

11

div>

12

13	<div id="menu">

14

15

<ul>

16	<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>

17

ul>

18

19

div>

20

21

div>

22

23

div>

The idea is simple – there are two main container DIVs – the one with id=”menu” holds the thumbnails, and the other – “slides” holds the slides themselves.
To add a new slide, you’ll just have to add new elements to both containers. The slides are JPGs, and the thumbnails are transparent PNGs, but you can use any image type you want.
You can even put any kind of HTML in as well. For example you could make a certain slide into a hyperlink by just putting the image inside of an anchor tag.
That said, it is important to have the width and height attributes set up of the slide images – it is used by jQuery to determine the width of the sliding area, as you’ll see in a moment.
Also notice that the thumbnail LI elements. The first one is assigned a class name of fbar , used to only show a vertical dividing bar, and the others are assigned a menuItem class – used as the slideshow control buttons.
Now lets continue with the next step.

An Apple-like Slideshow Gallery

Step 2 – CSS

Lets see what lays hidden in our stylesheet. I’ve only included the styles that are directly used by the gallery. You can view the rest of the styles, used to show the demo, in demo.css.

demo.css

view sourceprint?

001	body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{

002	/* Page reset */

003	margin:0px;

004	padding:0px;

005

}

006

007

body{

008	/* Setting default text color, background and a font stack */

009	color:#444444;

010	font-size:13px;

011	background: #f2f2f2;

012	font-family:Arial, Helvetica, sans-serif;

013

}

014

015	/* Gallery styles */

016

017

#gallery{

018	/* CSS3 Box Shadow */

019	-moz-box-shadow:0 0 3px #AAAAAA;

020	-webkit-box-shadow:0 0 3px #AAAAAA;

021	box-shadow:0 0 3px #AAAAAA;

022

023	/* CSS3 Rounded Corners */

024

025	-moz-border-radius-bottomleft:4px;

026	-webkit-border-bottom-left-radius:4px;

027	border-bottom-left-radius:4px;

028

029	-moz-border-radius-bottomright:4px;

030	-webkit-border-bottom-right-radius:4px;

031	border-bottom-right-radius:4px;

032

033	border:1px solid white;

034

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

036

037	/* The width of the gallery */

038	width:920px;

039	overflow:hidden;

040

}

041

042

#slides{

043	/* This is the slide area */

044	height:400px;

045

046	/* jQuery changes the width later on to the sum of the widths of all the slides. */

047	width:920px;

048	overflow:hidden;

049

}

050

051

.slide{

052	float:left;

053

}

054

055

#menu{

056	/* This is the container for the thumbnails */

057	height:45px;

058

}

059

060

ul{

061	margin:0px;

062	padding:0px;

063

}

064

065

li{

066	/* Every thumbnail is a li element */

067	width:60px;

068	display:inline-block;

069	list-style:none;

070	height:45px;

071	overflow:hidden;

072

}

073

074	li.inact:hover{

075	/* The inactive state, highlighted on mouse over */

076	background:url(img/pic_bg.png) repeat;

077

}

078

079	li.act,li.act:hover{

080	/* The active state of the thumb */

081	background:url(img/active_bg.png) no-repeat;

082

}

083

084

li.act a{

085	cursor:default;

086

}

087

088

.fbar{

089	/* The left-most vertical bar, next to the first thumbnail */

090	width:2px;

091	background:url(img/divider.png) no-repeat right;

092

}

093

094

li a{

095	display:block;

096	background:url(img/divider.png) no-repeat right;

097	height:35px;

098	padding-top:10px;

099

}

100

101

a img{

102	border:none;

103

}

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

• box-shadow, which makes the gallery cast a light shadow around its edges. To use it, you have to provide offsets by X and Y (0 0 here), the blurring (3px in this example) and the color of the shadow;
• border-radius, which rounds the bottom corners of the gallery.

Unfortunately, these properties are only supported in Safari, Chrome and Firefox for now. However in the rest of the browsers you still have a completely functional gallery.
Now it is time for some jQuery magic.

Step 3 – jQuery

As I already mentioned, this gallery does not use any server-side code, so it is all up to the front end to make the slideshow tick.

script.js

view sourceprint?

01	$(document).ready(function(){

02	/* This code is executed after the DOM has been completely loaded */

03

04	var totWidth=0;

05	var positions = new Array();

06

07	$('#slides .slide').each(function(i){

08	/* Loop through all the slides and store their accumulative widths in totWidth */

09	positions[i]= totWidth;

10	totWidth += $(this).width();

11

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

13

14	if(!$(this).width())

15

{

16	alert("Please, fill in width & height for all your images!");

17	return false;

18

}

19

});

20

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

22

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

24

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

26

27	/* On a thumbnail click */

28	$('li.menuItem').removeClass('act').addClass('inact');

29	$(this).parent().addClass('act');

30

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

32

33	$('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);

34	/* Start the sliding animation */

35

36	e.preventDefault();

37	/* Prevent the default action of the link */

38

});

39

40	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');

41	/* On page load, mark the first thumbnail as active */

42

});

The main idea behind this script is to loop through all the slides, sum up their widths and assign the sum to the slides container – the DIV with the id=”slides“. Because the slides are floated to the left and have enough room, they align next to each other.
Later, when you click a thumbnail, the script calculates which slide to show and scrolls the #slides div by assigning a negative margin via the animate method.
And with just 40 lines of code, the Apple-like slider gallery is finished!

The Gallery Explained

Conclusion

In three easy steps we created a beautiful Apple-style slideshow gallery. It can be easily included into any website by just adding a few lines of code.
You are free to modify and built upon the gallery for your own projects. Also be sure to share what you’ve done with the community via our Tutorial Mashups (above the comment section)

Share on Facebook Share on Twitter Share on Google Plus

About Moh.Ridwan