Ketika kita berbicara tentang web design dan usability, maka kita tidak dapat melupakan sebuah perusahaan IT yaitu Apple. Produk-produk apple terkenal dengan design dan usability yang menawan. Ketika kita mengunjugi website apple kita akan melihat sebuah slide show yang terdiri atas dua bagian yaitu galery product dan thumbnailnya. Pada tutorial ini kita akan memadukan antara css dan jquery untuk membuat slideshow yang mirip seperti punyanya apple

DEMO APPDOWNLOAD

1. Membuat Struktur HTML

Berikut ini adalah struktur Utama dari slideshow

<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">&nbsp;</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>

Secara umum ada dua div utama yaitu Div dengan Id=”Menu” dan id=”slides”. Div menu berfungsi sebagai tempat thumbnail dari div Slides. Jadi jumlah image yang ada di slide harus sama dengan jumlah yang ada du thumbnail.

Untuk menambah/mengganti slide cukup dengan menambah atau mengganti image silde dan thumbnailnya. untuk thumbnail anda harus menngunakan tipe PNG.

2. Memberikan Style Css

Slideshow Apple

Selelah terbentuk strukturnya step selanjutnya adalah memberikan style pada struktur tersebut.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103

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;
}

3. Menambahkan Script jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

$(document).ready(function(){
	var totWidth=0;
	var positions = new Array();
        //Lakukan luping di semua div image didalam div slide
	$('#slides .slide').each(function(i){
		positions[i]= totWidth;
		totWidth += $(this).width();
 
		if(!$(this).width())
		{
			alert("Please, fill in width & height for all your images!");
			return false;
		}
	});
 
	$('#slides').width(totWidth);
 
        //jika thumbnail di klik
	$('#menu ul li a').click(function(e){
 
		$('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);
 
		e.preventDefault();
	});
 
	$('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
});

Kode ini sangat simple, kita akan memanfaatkan fungsi animasi dari jquery untuk mempermudah proses slideshow.

Dimodifikasi dari http://tutorialzine.com/2009/11/beautiful-apple-gallery-slideshow/

 

12 Comments

 

  1. May 21, 2010  10:02 pm by husen Reply

    ak pke slide ini di web q.tp mash offline.
    dari semua configurasi tak bikin satu di file.php
    wktu di esekusi melaui
    "http://localhost/demo/gallery.php"
    dia bisa muncul
    tetapi wktu saya panggil agar di dalam web,dia tidak muncul!!
    tolong bantuananya

    • May 24, 2010  11:49 am by ibnoe Reply

      mungkin path imagenya salah mas.. coba di cek lagi

  2. May 28, 2010  10:26 pm by bukhory212 Reply

    tambah mantap neh belajar jquery nya..

  3. December 24, 2010  4:15 pm by delpiero Reply

    God bless you ibnoe.. thanks

  4. January 12, 2011  10:14 pm by Steven Tanda Putra Reply

    Saya baru baca - baca, abis uda ngantuk.. Cuman akan saya coba pelajari.. Nice Info n share.. Thx

  5. January 20, 2011  11:26 am by cefer Reply

    makasih mas buat infonya.. :)
    salam kenal

  6. February 7, 2011  12:44 am by pendakimimpi Reply

    apple galery yg sangat istimewa
    tpi ......... saya dah mncobanya ....
    tampilannya sudah bisa tpi kok scriptnya gk jalan ya mas ...
    mhon bantuannya ........... !!

  7. March 11, 2011  7:02 pm by adam Reply

    keren2 ...
    jadi kepikiran bikin pake jflow :)

    trims mas Ibnu

  8. July 15, 2011  10:56 am by dedy Reply

    mas..., kompitible nya kadang g semua browser ya..., contohnya saja pada waktu saya jalankan di netscape..., kacau...
    buttonnya gak muncul...

  9. September 14, 2011  9:31 pm by Errol Maslak Reply

    Whoa! I'm absolutely enjoying the template of this website http://www.koder.web.id/tutorial-jquery/membuat-slideshow-dengan-apple-style. It's simple, yet still powerful. A lot of times it can be challenging to get that perfect balance between superb usability and visual appeal. I must say you have done a fantastic job on this. Additionally, your blogging site loads very quick for me on Internet explorer. Outstanding site!

  10. February 14, 2012  11:21 pm by supersub Reply

    nice info gan,, still creative gan,, salute..

  11. February 21, 2012  10:37 am by supersub Reply

    mantap gan,, salam kenal yah,,

  12. February 21, 2012  10:40 am by supersub Reply

    itu nyimpen scriptnya dimana gan,, web saya lagi mo dibikinin slidenya nih,, mohon pencerahannya.. mksh

  13. April 16, 2012  10:39 am by Wydh Reply

    Mantapp..
    gan klo mau d'atur waktu slidenya dmna?

Leave a reply

 

Your email address will not be published.

Related posts