.png)
By 
10:43 PM
This specific 7 days, we have been producing a great Apple-like slideshow gallery, exactly like the a single that they employ on the web page in order to showcase their own items. It's going to be entirely front-end dependent, not any PHP or even data source expected.
Thus just download this instance supply value along with go on together with the 1st step.
HTML CODE (index.html)
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>Apple Slideshow Gallery</title>
6:
7: <link rel="stylesheet" type="text/css" href="demo.css" />
8:
9: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>1:2: <script type="text/javascript" src="script.js"></script>
10:
11: <!--[if lte IE 7]>
12: <style type="text/css">
13: ul li{
14: display:inline;
15: /*float:left;*/
16: }
17: </style>
18: <![endif]-->
19:
20: </head>
21:
22: <body>
23:
24: <div id="main">
25:
26: <h1>Apple Slideshow Gallery</h1>
27:
28: <div id="gallery">
29:
30: <div id="slides">
31:
32: <div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
33: <div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
34: <div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
35: <div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>
36:
37: </div>
38:
39: <div id="menu">
40:
41: <ul>
42: <li class="fbar"> </li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
43: </ul>
44:
45:
46: </div>
47:
48: </div>
49:
50: </div>
51: </body>
52: </html>
CSS CODE (demo.css)
1: body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{
2: /* Page reset */
3: margin:0px;
4: padding:0px;
5: }
6:
7: body{
8: /* Setting default text color, background and a font stack */
9: color:#444444;
10: font-size:13px;
11: background: #f2f2f2;
12: font-family:Arial, Helvetica, sans-serif;
13: }
14:
15: /* Gallery styles */
16:
17: #gallery{
18: /* CSS3 Box Shadow */
19: -moz-box-shadow:0 0 3px #AAAAAA;
20: -webkit-box-shadow:0 0 3px #AAAAAA;
21: box-shadow:0 0 3px #AAAAAA;
22:
23: /* CSS3 Rounded Corners */
24:
25: -moz-border-radius-bottomleft:4px;
26: -webkit-border-bottom-left-radius:4px;
27: border-bottom-left-radius:4px;
28:
29: -moz-border-radius-bottomright:4px;
30: -webkit-border-bottom-right-radius:4px;
31: border-bottom-right-radius:4px;
32:
33: border:1px solid white;
34:
35: background:url(img/panel.jpg) repeat-x bottom center #ffffff;
36:
37: /* The width of the gallery */
38: width:920px;
39: overflow:hidden;
40: }
41:
42: #slides{
43: /* This is the slide area */
44: height:400px;
45:
46: /* jQuery changes the width later on to the sum of the widths of all the slides. */
47: width:920px;
48: overflow:hidden;
49: }
50:
51: .slide{
52: float:left;
53: }
54:
55: #menu{
56: /* This is the container for the thumbnails */
57: height:45px;
58: }
59:
60: ul{
61: margin:0px;
62: padding:0px;
63: }
64:
65: li{
66: /* Every thumbnail is a li element */
67: width:60px;
68: display:inline-block;
69: list-style:none;
70: height:45px;
71: overflow:hidden;
72: }
73:
74: li.inact:hover{
75: /* The inactive state, highlighted on mouse over */
76: background:url(img/pic_bg.png) repeat;
77: }
78:
79: li.act,li.act:hover{
80: /* The active state of the thumb */
81: background:url(img/active_bg.png) no-repeat;
82: }
83:
84: li.act a{
85: cursor:default;
86: }
87:
88: .fbar{
89: /* The left-most vertical bar, next to the first thumbnail */
90: width:2px;
91: background:url(img/divider.png) no-repeat right;
92: }
93:
94: li a{
95: display:block;
96: background:url(img/divider.png) no-repeat right;
97: height:35px;
98: padding-top:10px;
99: }
100:
101: a img{
102: border:none;
103: }
104:
105:
106: /* The styles below are only necessary for the demo page */
107:
108: h1{
109: font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
110: font-size:36px;
111: font-weight:normal;
112: margin-bottom:15px;
113: }
114:
115: h2{
116: font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
117: font-size:12px;
118: font-weight:normal;
119: position:absolute;
120: right:0;
121: text-transform:uppercase;
122: top:15px;
123: }
124:
125: #main{
126: /* The main container */
127: margin:15px auto;
128: text-align:center;
129: width:920px;
130: position:relative;
131: }
132:
133: a, a:visited {
134: color:#0196e3;
135: text-decoration:none;
136: outline:none;
137: }
138:
139: a:hover{
140: text-decoration:underline;
141: }
142:
143: p{
144: padding:10px;
145: text-align:center;
146: }
JavaScript Code (script.js)
1: $(document).ready(function(){
2: /* This code is executed after the DOM has been completely loaded */
3:
4: var totWidth=0;
5: var positions = new Array();
6:
7: $('#slides .slide').each(function(i){
8:
9: /* Traverse through all the slides and store their accumulative widths in totWidth */
10:
11: positions[i]= totWidth;
12: totWidth += $(this).width();
13:
14: /* The positions array contains each slide's commulutative offset from the left part of the container */
15:
16: if(!$(this).width())
17: {
18: alert("Please, fill in width & height for all your images!");
19: return false;
20: }
21:
22: });
23:
24: $('#slides').width(totWidth);
25:
26: /* Change the cotnainer div's width to the exact width of all the slides combined */
27:
28: $('#menu ul li a').click(function(e,keepScroll){
29:
30: /* On a thumbnail click */
31:
32: $('li.menuItem').removeClass('act').addClass('inact');
33: $(this).parent().addClass('act');
34:
35: var pos = $(this).parent().prevAll('.menuItem').length;
36:
37: $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);
38: /* Start the sliding animation */
39:
40: e.preventDefault();
41: /* Prevent the default action of the link */
42:
43:
44: // Stopping the auto-advance if an icon has been clicked:
45: if(!keepScroll) clearInterval(itvl);
46: });
47:
48: $('#menu ul li.menuItem:first').addClass('act').siblings().addClass('inact');
49: /* On page load, mark the first thumbnail as active */
50:
51:
52:
53: /*****
54: *
55: * Enabling auto-advance.
56: *
57: ****/
58:
59: var current=1;
60: function autoAdvance()
61: {
62: if(current==-1) return false;
63:
64: $('#menu ul li a').eq(current%$('#menu ul li a').length).trigger('click',[true]); // [true] will be passed as the keepScroll parameter of the click function on line 28
65: current++;
66: }
67:
68: // The number of seconds that the slider will auto-advance in:
69:
70: var changeEvery = 10;
71:
72: var itvl = setInterval(function(){autoAdvance()},changeEvery*1000);
73:
74: /* End of customizations */
75: });
DEMO
DOWNLOAD
Add this widget to your website for $10. Please contact us : info@9pixle.com
0 comments