-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (140 loc) · 7.55 KB
/
index.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>iPad Slideshow with Cycle</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href='http://fonts.googleapis.com/css?family=Coustard' rel='stylesheet' type='text/css'>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<link href="http://mgiulio.github.com/prjnotes/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
img {
float: left;
margin-right: 15px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<div id="page-wrap">
<h1>A Cycle Slideshow skinned like an iPad</h1>
<p>
<a href="#demo">
<img
src="http://mgiulio.altervista.org/wp-content/uploads/2011/05/sshot-ipad-slideshow-v1.0-tn.jpg"
alt="ipad-slideshow v1.0 screenshot"
title="ipad-slideshow v1.0 screenshot"
width="300" height="238"
>
</a>
<p>This project was inspired by the JavaScript slideshow demo published on <a href="http://designshack.co.uk" rel="nofollow">http://designshack.co.uk</a>. In the article the author shows how to implement an <a href="http://designshack.co.uk/articles/javascript/build-an-ipad-themed-image-slider-with-jquery">iPad-skinned image slider with jQuery</a>. In particular, he is using the <a href="http://designshack.co.uk/articles/javascript/build-an-ipad-themed-image-slider-with-jquery">Nivo Slider</a>.</p>
<p>I really liked the demo and so I decided to remake a similar <a href="#demo">slideshow</a> but using the <a href="http://jquery.malsup.com/cycle/">Cycle jQuery plugin</a> by <a href="http://jquery.malsup.com/">Malsup</a>.</p>
<p>Here are some quick notes about the implementation.</p>
<h2 style="clear: left;">Expected behaviour</h2>
<p>A brief description of the interactions and behaviours provided by the slideshow user interface:</p>
<ul>
<li>Autoplay</li>
<li>After the last slide go back to the first one</li>
<li>When mouse pointer enters the slide area, pause and show prev/next buttons</li>
<li>When mouse exits slide area hide prev/next buttons and resume the slideshow</li>
<li>The effect used for a slide transition is a scrolling</li>
<li>When user clicks on the prev button use a scroll right animation</li>
<li>When user clicks on the next button use a scroll left animation</li>
<li>Use of a pager to provide ‘random access’ to the slides(in contrast with the sequential access provided by prev/next buttons) and to display the number of slides and which one the user is watching.</li>
<li>On hovering on the pager the behaviour is the same as when the user hovers on the slide area.</li>
</ul>
<h2>Graphics and software resources used</h2>
<p>The <a href="http://www.openclipart.org/detail/29785">iPad frame picture</a> was found on OpenClipArt, an archive of clip art that can be used for free for any use. This is a SVG resource so I edited it in Inkscape, added a floor reflection and exported it to a .jpg</p>
<p>The prev/next navigation arrows were made from scratch in Inkscape and exported as .png.</p>
<p>The slides are from my <a href="http://mgiulio.altervista.org/?p=175">ScrnShot account.</a></p>
<p>About the software:</p>
<ul>
<li><a href="http://developer.yahoo.com/yui/3/">YUI</a> Reset and Base style sheets.
<li>jQuery 1.5.2</li>
<li>Cycle latest version from GitHub</li>
</ul>
<h2>Markup structure and JavaScript</h2>
<p>This is the slideshow markup on the page:</p>
<script type="syntaxhighlighter" class="brush: xml"><![CDATA[
<div id="slides">
<a href="http://www.scrnshots.com/users/giuliom/screenshots/282517"><img src="img/slide-1.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/283489"><img src="img/slide-2.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/283317"><img src="img/slide-3.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/285898"><img src="img/slide-4.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/284145"><img src="img/slide-5.jpg"></a>
</div>
]]></script>
<p>After the page is fully loaded the script augment this structure wrapping it in this way:</p>
<script type="syntaxhighlighter" class="brush: xml"><![CDATA[
<div id="frame">
<div id="screen">
<a class="nav_arrow" id="prev" href="#" style="display: none; ">prev</a>
<a class="nav_arrow" id="next" href="#" style="display: none; ">next</a>
<div id="slides">
<a href="http://www.scrnshots.com/users/giuliom/screenshots/282517"><img src="img/slide-1.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/283489"><img src="img/slide-2.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/283317"><img src="img/slide-3.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/285898"><img src="img/slide-4.jpg"></a>
<a href="http://www.scrnshots.com/users/giuliom/screenshots/284145"><img src="img/slide-5.jpg"></a>
</div>
</div>
<div id="pager"></div>
</div
]]></script>
<p>This markup transformation is done with the following code:</p>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
var
$slides = $('#slides'),
$frame = $('<div id="frame"></div>'),
$prev = $('<a class="nav_arrow" id="prev" href="#">prev</a>'),
$next = $('<a class="nav_arrow" id="next" href="#">next</a>'),
$screen = $('<div id="screen"></div>')
.append($prev, $next)
.hover(function() { $slides.cycle('toggle'); $prev.toggle(); $next.toggle(); }),
$pager = $('<div id="pager"></div>').hover(
function() { $slides.cycle('toggle'); $prev.toggle(); $next.toggle(); }
)
;
$slides.after($frame);
$frame.append($screen, $pager);
$screen.append($slides);
]]></script>
<p>In the previous snippets appear also the event handling code. Using the Cycle toggle command and the jQuery .toggle() method we can implement the required hovering behaviours.</p>
<p>After this we call the Cycle plugin:</p>
<script type="syntaxhighlighter" class="brush: js"><![CDATA[
$slides.cycle({
fx: 'scrollHorz',
timeout: 4000,
speed: 500,
prev: '#prev',
next: '#next',
pager: '#pager'
});
]]></script>
<p>The use of the ‘scrollHz’ value for the fx option give us a nice sliding animation with a’ natural behaviour’: when accessing a slide that in the slideshow order comes after the current one(with the next button or with the pager) Cycle will use a left scrolling, and when accessing a previous slide it will use a right scrolling.</p>
<h2>Browser tested</h2>
<ul>
<li>Firefox: 3.6.x, 4</li>
<li>Chrome: 11</li>
<li>Opera: 10.63, 11.10</li>
<li>MSIE: 9</li>
</ul>
<h2>Future Work</h2>
<ul>
<li>Test IE < 9</li>
<li>Misc improvements and new features…maybe.</li>
</ul>
<h2><a name="demo">Demo and source</a></h2>
<ul>
<li><a href="http://mgiulio.github.com/ipad-slideshow/demo.html">Demo</a></li>
<li><a href="https://github.com/mgiulio/ipad-slideshow">Source</a></li>
</ul>
</div> <!-- #page-wrap -->
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js"></script>
<script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js"></script>
<script>
SyntaxHighlighter.all();
</script>
</body>
</html>