-
Notifications
You must be signed in to change notification settings - Fork 380
/
index.html
308 lines (255 loc) · 14.4 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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>AnythingSlider</title>
<link rel="stylesheet" href="css/page.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/anythingslider.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.2.js"></script>
<script src="js/jquery.anythingslider.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var slider2 = ['Recipe', 'Quote', 'Image', 'Quote #2', 'Image #2'];
function formatText(index, panel) {
return slider2[index - 1];
}
$(function () {
$('#slider1').anythingSlider({
width : 800 // Override the default CSS width
});
$('#slider2').anythingSlider({
width : 600, // if resizeContent is false, this is the default width if panel size is not defined
height : 350, // if resizeContent is false, this is the default height if panel size is not defined
resizeContents : false, // If true, solitary images/objects in the panel will expand to fit the viewport
autoPlay : false, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
navigationFormatter : formatText // Format navigation labels with text
})
$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
return false;
});
});
</script>
</head>
<body>
<div id="page-wrap">
<a href="http://github.com/ProLoser/AnythingSlider" id="dl">Download Latest on Github</a>
<h5><a href="http://css-tricks.com/examples/AnythingSlider/">Original</a> By <a href="http://css-tricks.com">Chris Coyier</a>, based upon lots of smart stuff by <a href="http://jqueryfordesigners.com/">Remy Sharp</a>,<br />
significantly improved by <a href="http://pixelgraphics.us/">Douglas Neiner</a></h5>
<h1>AnythingSlider</h1>
<!-- AnythingSlider #1 -->
<ul id="slider1">
<li><img src="images/slide-civil-1.jpg" alt="" /></li>
<li><img src="images/slide-env-1.jpg" alt="" /></li>
<li><img src="images/slide-civil-2.jpg" alt="" /></li>
<li><object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/zSgiXGELjbc&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object></li>
<li><object width="640" height="385"><param name="movie" value="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/2Qj8PhxSnhg&hl=en_US&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="385"></embed></object></li>
<li><img src="images/slide-env-2.jpg" alt="" /></li>
</ul> <!-- END AnythingSlider #1 -->
<br><br>
<!-- AnythingSlider #2 -->
<ul id="slider2">
<li class="panel1">
<div id="textSlide">
<img src="images/251356.jpg" alt="tomato sandwich" style="float: right; margin: 0 0 2px 10px;" />
<h3>Queenie's Killer Tomato Bagel Sandwich</h3>
<h4>Ingredients</h4>
<ul>
<li>1 bagel, split and toasted</li>
<li>2 tablespoons cream cheese</li>
<li>1 roma (plum) tomatoes, thinly sliced</li>
<li>salt and pepper to taste</li>
<li>4 leaves fresh basil</li>
</ul>
</div>
</li>
<li class="panel2">
<div class="quoteSlide">
<blockquote>In awe I watched the waxing moon ride across the zenith of the heavens like an ambered chariot towards the ebon void of infinite space wherein the tethered belts of Jupiter and Mars hang forever festooned in their orbital majesty. And as I looked at all this I thought... I must put a roof on this lavatory.<br>-- Les Dawson</blockquote>
</div>
</li>
<li class="panel3">
<img src="images/slide-tele-1.jpg" alt="" />
</li>
<li class="panel4">
<div class="quoteSlide">
<blockquote>Life is conversational. Web design should be the same way. On the web, you’re talking to someone you’ve probably never met – so it’s important to be clear and precise. Thus, well structured navigation and content organization goes hand in hand with having a good conversation.</blockquote>
<p> - <a id='perma' href='http://quotesondesign.com/chikezie-ejiasi/'>Chikezie Ejiasi</a></p>
</div>
</li>
<li class="panel5">
<img src="images/slide-tele-2.jpg" alt="" />
</li>
</ul> <!-- END AnythingSlider #2 -->
<h2>Features</h2>
<ul>
<li>Panels are HTML Content (can be anything).</li>
<li>Multiple AnythingSliders allowable per-page.</li>
<li>Infinite/Continuous sliding (always slides in the direction you are going, even at "last" slide).</li>
<li>Optionally resize each panel (specified per panel in css).</li>
<li>Optional Next / Previous Panel Arrows.</li>
<li>Use keyboard navigation or tabs that are built and added dynamically (any number of panels).</li>
<li>Link to specific slides or go forward or back one slide from static text links - go to <a href="#" id="slide-jump">Slide 4</a> (Quote #2) in second example.</li>
<li>Each panel has a hashtag (can link directly to specific panels).</li>
<li>Optional custom function for <a href="#format">formatting navigation text</a>.</li>
<li>Auto-playing slideshow (optional feature, can start playing or stopped)</li>
<li>Pauses playing YouTube videos when not in view and resumes them when in view (only in non-IE browsers & if files are hosted on the web).</li>
<li>Pauses slideshow on hover (optional).</li>
<li>Optionally play the slideshow once through, stopping on the last page.</li>
</ul>
<h2>Default Options</h2>
<blockquote>
<pre>$('#slider1, #slider2').anythingSlider({
// Appearance
width : null, // Override the default CSS width
height : null, // Override the default CSS height
resizeContents : true, // If true, solitary images/objects in the panel will expand to fit the viewport
// Navigation
startPanel : 1, // This sets the initial panel
hashTags : true, // Should links change the hashtag in the URL?
buildArrows : true, // If true, builds the forwards and backwards buttons
buildNavigation : true, // If true, buildsa list of anchor links to link to each panel
navigationFormatter : null, // Details at the top of the file on this use (advanced use)
forwardText : "&raquo;", // Link text used to move the slider forward (hidden by CSS, replaced with arrow image)
backText : "&laquo;", // Link text used to move the slider back (hidden by CSS, replace with arrow image)
// Slideshow options
autoPlay : true, // This turns off the entire slideshow FUNCTIONALY, not just if it starts running or not
startStopped : false, // If autoPlay is on, this can force it to start stopped
pauseOnHover : true, // If true & the slideshow is active, the slideshow will pause on hover
resumeOnVideoEnd : true, // If true & the slideshow is active & a youtube video is playing, it will pause the autoplay until the video has completed
stopAtEnd : false, // If true & the slideshow is active, the slideshow will stop on the last page
playRtl : false, // If true, the slideshow will move right-to-left
startText : "Start", // Start button text
stopText : "Stop", // Stop button text
delay : 3000, // How long between slideshow transitions in AutoPlay mode (in milliseconds)
animationTime : 600, // How long the slideshow transition takes (in milliseconds)
easing : "swing" // Anything other than "linear" or "swing" requires the easing plugin
});</pre>
</blockquote>
<h2>Usage</h2>
<ul>
<li><h3>Getting current slide number:</h3>
<blockquote>
<pre>var current = $('#slider1').data('AnythingSlider').currentPage; // returns page #</pre>
</blockquote>
</li>
<li><h3>Setting current slide (external link example):</h3>
<blockquote>
<pre><a href="#" id="slide-jump">Slide 4</a></pre>
<pre>$("#slide-jump").click(function(){
$('#slider2').anythingSlider(4);
});</pre>
</blockquote>
</li>
<li><h3>External Slideshow Control</h3>
<blockquote>
<pre>$('#slider1').data('AnythingSlider').startStop(true); // start the slideshow
$('#slider2').data('AnythingSlider').startStop(false); // stops the slideshow
$('#slider1').data('AnythingSlider').goForward(); // go forward one slide
$('#slider1').data('AnythingSlider').goBack(); // go back one slide
</pre>
</blockquote>
</li>
<li><h3><a id="format"></a>Formatting Navigation Text</h3>
To use the <code>navigationFormatter</code> option, you must have a function that accepts two parameters, and returns a string of HTML text.<br>
<br>
<ul>
<li><code>index</code> = integer index (1 based);</li>
<li><code>panel</code> = jQuery wrapped LI item this tab references.</li>
<li>Function must return a string of HTML/Text.</li>
<li>Here is a sample formatter (view this page source for another example):<br>
<br>
<blockquote>
<pre>$('#slider').anythingSlider({
navigationFormatter : function(index, panel){
return " Panel #" + index; // This would have each tab with the text 'Panel #X' where X = index
}
})</pre>
</blockquote></li>
</ul>
</li>
</ul>
<h2>Changelog</h2>
<h3>Version 1.3.7</h3>
<ul>
<li>Added <code>startPanel</code> option.</li>
<li>Added <code>playRtl</code> option to reverse the play direction.</li>
<li>Added back <code>stopAtEnd</code> option (it was added in a previous version).</li>
<li>Added <code>resumeOnVideoEnd</code> option to prevent an active slideshow from pausing a video.</li>
<li>Changed location of reverse reference from the wrapping div to the original ul - updated instructions (see Getting current slide; previously you had to reference <code>$('.anythingSlider:eq(0)')</code>.</li>
<li>Fixed height/width options to accept strings (e.g. "400px" instead of a number, it may not work properly if values are other than the numnber of pixels).</li>
<li>Fixed setting to accept strings (e.g. $(slider).anythingSlider(" 1 ")) as well as numbers.</li>
<li>Fixed problem with objects (youtube videos) flickering in Firefox by setting <code>resizeContent</code> to false.</li>
<li>Fixed problem that occurs when using an incorrect easing function name (<a href="http://dev.jquery.com/ticket/7064">submitted ticket</a>)</li>
<li>Reorganized, cleaned up the code and updated the demos & instructions.</li>
</ul>
<h3>Version 1.3.6</h3>
<ul>
<li>Fixed minor bug with links to specific slides and updated example to reflect changes and be less confusing</li>
<li>Tweaked start/stop button css to be more maleable</li>
</ul>
<h3>Version 1.3.5</h3>
<ul>
<li>Added resizePanel option - does not support percentage sizing.<br><br>
<ul>
<li>When true, it will resize all panels & solitary content to the size settings (CSS or the script options).</li>
<li>When false, the AnythingSlider wrapper will resize to fit the panel (set inline or in the CSS for each panel).</li>
</ul>
</li>
<li>Fixed keyboard navigation to work with multiple AnythingSliders on a page.</li>
<li>Added tabbed navigation. Both the links within panels and the thumbnail navigation will activate it.</li>
</ul>
<h3>Version 1.3.4</h3>
<ul>
<li>Added keyboard navigation</li>
<li>Embeded objects will now resize to fit the panel</li>
<li>YouTube videos will pause the video when it is not in view and play (if already started) when in view (in non-IE browsers)<br>
*Note: this feature only works when the files are hosted on a webserver as the flash player restricts calls between local files and the internet.
</li>
<li>Modified code according to JSLint & added minified version.</li>
</ul>
<h3>Version 1.3.3</h3>
<ul>
<li>Previous / Next arrows are now optional</li>
<li>Clicking start button immediately begins transition instead of waiting for the delay</li>
</ul>
<h3>Version 1.3.2</h3>
<ul>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Dimensions can be passed via javascript or modified at the top of the css file</li>
<li>Merged all Github forks</li>
<li>Wrapper DIVs (<div class="anythingSlider"><div class="wrapper">) no longer required in html. Divs are generated in jquery</li>
<li>Improved CSS scope and classes, Javascript degredation is handled differently now however</li>
<li>Greatly refactored CSS for a more fluid resizing behavior</li>
<li>Hash URLS now work for multiple panels</li>
</ul>
<h3>Version 1.3</h3>
<ul>
<li>Accessibility improvements by Matt Lawson</li>
<li>Some generic JavaScript/HTML/CSS code cleaning</li>
<li>Moved to GitHub entirely</li>
<li>Ensures unique panel ID's</li>
<li>Removes navigation if there is only one panel</li>
<li>Added option to stop on the last page when autoPlay is set to true</li>
</ul>
<h3>Version 1.2</h3>
<ul>
<li>Bug Fix: When autoPlay was set to false, any interaction with the control would cause a javascript error.</li>
</ul>
<h3>Version 1.1</h3>
<ul>
<li>Changed default easing to "swing" so didn't depend on any other plugins</li>
<li>Removed extra junk (other plugins used for design, etc)</li>
<li>Added Pause on Hover option</li>
<li>Added options for passing in HTML for the start and stop button</li>
<li>Added option to use custom function for formatting the titles of the navigation</li>
<li>Added public interface for linking directly to certain slides</li>
</ul>
<h3>Version 1.0</h3>
<ul>
<li>First version</li>
</ul>
</div>
</body>
</html>