|
0
|
1
|
|
|
2 var Slideshow = {};
|
|
|
3
|
|
|
4
|
|
|
5 /************************************
|
|
|
6 * lets you define your own "global" transition function
|
|
|
7 * passes in a reference to from and to slide wrapped in jQuery wrapper
|
|
|
8 */
|
|
|
9
|
|
|
10 Slideshow.transition = function( $from, $to ) {
|
|
|
11 // $from.hide();
|
|
|
12 // $to.show();
|
|
|
13
|
|
|
14 $from.hide('fast');
|
|
|
15 $to.show('fast');
|
|
|
16 }
|
|
|
17
|
|
|
18 /***********************
|
|
|
19 * sample custom transition using scrollUp effect
|
|
|
20 * inspired by Karl Swedberg's Scroll Up Headline Reader jQuery Tutorial[1]
|
|
|
21 * [1] http://docs.jquery.com/Tutorials:Scroll_Up_Headline_Reader
|
|
|
22 */
|
|
|
23
|
|
|
24 function transitionSlideUpSlideDown( $from, $to ) {
|
|
|
25 $from.slideUp( 500, function() { $to.slideDown( 1000 ); } );
|
|
|
26 }
|
|
|
27
|
|
|
28 function transitionFadeOutFadeIn( $from, $to ) {
|
|
|
29 $from.fadeOut( 500 );
|
|
|
30 $to.fadeIn( 500 );
|
|
|
31 }
|
|
|
32
|
|
|
33 function transitionScrollUp( $from, $to ) {
|
|
|
34 var cheight = $from.outerHeight();
|
|
|
35
|
|
|
36 // hide scrollbar during animation
|
|
|
37 $( 'body' ).css( 'overflow-y', 'hidden' );
|
|
|
38
|
|
|
39 $to.css( 'top', cheight+'px' );
|
|
|
40 $to.show();
|
|
|
41
|
|
|
42 $from.animate( {top: -cheight}, 'slow' );
|
|
|
43 $to.animate( {top: 0}, 'slow', function() {
|
|
|
44 $from.hide().css( 'top', '0px');
|
|
|
45
|
|
|
46 // restore possible scrollbar
|
|
|
47 $( 'body' ).css( 'overflow-y', 'auto' );
|
|
|
48 });
|
|
|
49 }
|
|
|
50
|
|
|
51 Slideshow.init = function( options ) {
|
|
|
52
|
|
|
53 var settings = $.extend({
|
|
|
54 mode : 'slideshow', // slideshow | outline | autoplay
|
|
|
55 projectionStyleId : '#styleProjection',
|
|
|
56 screenStyleId : '#styleScreen',
|
|
|
57 titleSelector : 'h1',
|
|
|
58 slideSelector : '.slide', // dummy (not yet working)
|
|
|
59 stepSelector : '.step', // dummy (not yet working)
|
|
|
60 debug : false,
|
|
|
61 change : null // todo: change to use a custom event and trigger
|
|
|
62 }, options || {});
|
|
|
63
|
|
|
64 settings.isProjection = true; // are we in projection (slideshow) mode (in contrast to screen (outline) mode)?
|
|
|
65 settings.snum = 1; // current slide # (non-zero based index e.g. starting with 1)
|
|
|
66 settings.smax = 1; // max number of slides
|
|
|
67 settings.incpos = 0; // current step in slide
|
|
|
68 settings.steps = null;
|
|
|
69 settings.autoplayInterval = null;
|
|
|
70
|
|
|
71 function debug( msg )
|
|
|
72 {
|
|
|
73 if( settings.debug && window.console && window.console.log )
|
|
|
74 window.console.log( '[debug] ' + msg );
|
|
|
75 }
|
|
|
76
|
|
|
77 function showHide( action )
|
|
|
78 {
|
|
|
79 var $navLinks = $( '#navLinks' )
|
|
|
80
|
|
|
81 switch( action ) {
|
|
|
82 case 's': $navLinks.css( 'visibility', 'visible' ); break;
|
|
|
83 case 'h': $navLinks.css( 'visibility', 'hidden' ); break;
|
|
|
84 case 'c': /* toggle control panel */
|
|
|
85 if( $navLinks.css( 'visibility' ) != 'visible' )
|
|
|
86 $navLinks.css( 'visibility', 'visible' );
|
|
|
87 else
|
|
|
88 $navLinks.css( 'visibility', 'hidden' );
|
|
|
89 break;
|
|
|
90 }
|
|
|
91 }
|
|
|
92
|
|
|
93 function updateCurrentSlideCounter()
|
|
|
94 {
|
|
|
95 $( '#currentSlide' ).html( settings.snum + '/' + settings.smax );
|
|
|
96 }
|
|
|
97
|
|
|
98 function updateJumpList()
|
|
|
99 {
|
|
|
100 $('#jumplist').get(0).selectedIndex = (settings.snum-1);
|
|
|
101 }
|
|
|
102
|
|
|
103 function updatePermaLink()
|
|
|
104 {
|
|
|
105 // todo: unify hash marks??; use #1 for div ids instead of #slide1?
|
|
|
106 window.location.hash = '#'+settings.snum;
|
|
|
107 }
|
|
|
108
|
|
|
109 function goTo( target )
|
|
|
110 {
|
|
|
111 if( target > settings.smax || target == settings.snum ) return;
|
|
|
112 go( target - settings.snum );
|
|
|
113 }
|
|
|
114
|
|
|
115 function go( dir )
|
|
|
116 {
|
|
|
117 debug( 'go: ' + dir );
|
|
|
118
|
|
|
119 if( dir == 0 ) return; /* same slide; nothing to do */
|
|
|
120
|
|
|
121 var cid = '#slide' + settings.snum; /* current slide (selector) id */
|
|
|
122 var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
|
|
|
123
|
|
|
124 /* remove all step and stepcurrent classes from current slide */
|
|
|
125 if( csteps.length > 0) {
|
|
|
126 $( csteps ).each( function() {
|
|
|
127 $(this).removeClass( 'step' ).removeClass( 'stepcurrent' );
|
|
|
128 } );
|
|
|
129 }
|
|
|
130
|
|
|
131 /* set snum to next slide */
|
|
|
132 settings.snum += dir;
|
|
|
133 if( settings.snum > settings.smax ) settings.snum = settings.smax;
|
|
|
134 if( settings.snum < 1 ) settings.snum = 1;
|
|
|
135
|
|
|
136 var nid = '#slide' + settings.snum; /* next slide (selector) id */
|
|
|
137 var nsteps = settings.steps[settings.snum-1]; /* next slide steps array */
|
|
|
138
|
|
|
139 if( dir < 0 ) /* go backwards? */
|
|
|
140 {
|
|
|
141 settings.incpos = nsteps.length;
|
|
|
142 /* mark last step as current step */
|
|
|
143 if( nsteps.length > 0 )
|
|
|
144 $( nsteps[settings.incpos-1] ).addClass( 'stepcurrent' );
|
|
|
145 }
|
|
|
146 else /* go forwards? */
|
|
|
147 {
|
|
|
148 settings.incpos = 0;
|
|
|
149 if( nsteps.length > 0 ) {
|
|
|
150 $( nsteps ).each( function() {
|
|
|
151 $(this).addClass( 'step' ).removeClass( 'stepcurrent' );
|
|
|
152 } );
|
|
|
153 }
|
|
|
154 }
|
|
|
155
|
|
|
156 if( !(cid == nid) ) {
|
|
|
157 debug( "transition from " + cid + " to " + nid );
|
|
|
158 Slideshow.transition( $( cid ), $( nid ) );
|
|
|
159 }
|
|
|
160
|
|
|
161 updateJumpList();
|
|
|
162 updateCurrentSlideCounter();
|
|
|
163 updatePermaLink();
|
|
|
164
|
|
|
165 if (settings.change) { settings.change(); }
|
|
|
166 }
|
|
|
167
|
|
|
168 function subgo( dir )
|
|
|
169 {
|
|
|
170 debug( 'subgo: ' + dir + ', incpos before: ' + settings.incpos + ', after: ' + (settings.incpos+dir) );
|
|
|
171
|
|
|
172 var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
|
|
|
173
|
|
|
174 if( dir > 0)
|
|
|
175 { /* go forward? */
|
|
|
176 if( settings.incpos > 0 )
|
|
|
177 $( csteps[settings.incpos-1] ).removeClass( 'stepcurrent' );
|
|
|
178 $( csteps[settings.incpos] ).removeClass( 'step').addClass( 'stepcurrent' );
|
|
|
179 settings.incpos++;
|
|
|
180 }
|
|
|
181 else
|
|
|
182 { /* go backwards? */
|
|
|
183 settings.incpos--;
|
|
|
184 $( csteps[settings.incpos] ).removeClass( 'stepcurrent' ).addClass( 'step' );
|
|
|
185 if( settings.incpos > 0 )
|
|
|
186 $( csteps[settings.incpos-1] ).addClass( 'stepcurrent' );
|
|
|
187 }
|
|
|
188 }
|
|
|
189
|
|
|
190
|
|
|
191 function notOperaFix()
|
|
|
192 {
|
|
|
193 $( settings.projectionStyleId ).attr( 'media','screen' );
|
|
|
194
|
|
|
195 var styleScreen = $( settings.screenStyleId ).get(0);
|
|
|
196 styleScreen.disabled = true;
|
|
|
197 }
|
|
|
198
|
|
|
199
|
|
|
200 function toggle()
|
|
|
201 {
|
|
|
202 // toggle between projection (slide show) mode
|
|
|
203 // and screen (outline) mode
|
|
|
204
|
|
|
205 // get stylesheets
|
|
|
206 var styleProjection = $( settings.projectionStyleId ).get(0);
|
|
|
207 var styleScreen = $( settings.screenStyleId ).get(0);
|
|
|
208
|
|
|
209 if( !styleProjection.disabled )
|
|
|
210 {
|
|
|
211 styleProjection.disabled = true;
|
|
|
212 styleScreen.disabled = false;
|
|
|
213 settings.isProjection = false;
|
|
|
214 $('.slide').each( function() { $(this).show(); } );
|
|
|
215 }
|
|
|
216 else
|
|
|
217 {
|
|
|
218 styleProjection.disabled = false;
|
|
|
219 styleScreen.disabled = true;
|
|
|
220 settings.isProjection = true;
|
|
|
221 $('.slide').each( function(i) {
|
|
|
222 if( i == (settings.snum-1) )
|
|
|
223 $(this).show();
|
|
|
224 else
|
|
|
225 $(this).hide();
|
|
|
226 });
|
|
|
227 }
|
|
|
228 }
|
|
|
229
|
|
|
230 function populateJumpList() {
|
|
|
231
|
|
|
232 var list = $('#jumplist').get(0);
|
|
|
233
|
|
|
234 $( '.slide' ).each( function(i) {
|
|
|
235 var text = $(this).find( settings.titleSelector ).text();
|
|
|
236 list.options[list.length] = new Option( (i+1)+' : '+ text, (i+1) );
|
|
|
237 });
|
|
|
238 }
|
|
|
239
|
|
|
240 function createControls()
|
|
|
241 {
|
|
|
242 // todo: make layout into an id (not class?)
|
|
|
243 // do we need or allow more than one element?
|
|
|
244
|
|
|
245
|
|
|
246 // if no div.layout exists, create one
|
|
|
247 if( $( '.layout' ).length == 0 )
|
|
|
248 $( "<div class='layout'></div>").appendTo( 'body' );
|
|
|
249
|
|
|
250 $( '.layout' )
|
|
|
251 .append( "<div id='controls'>" )
|
|
|
252 .append( "<div id='currentSlide'>" );
|
|
|
253
|
|
|
254 var $controls = $( '#controls' )
|
|
|
255
|
|
|
256 $controls.html( '<div id="navLinks">'
|
|
|
257 + '<a accesskey="t" id="toggle" href="#">Ø<\/a>'
|
|
|
258 + '<a accesskey="z" id="prev" href="#">«<\/a>'
|
|
|
259 + '<a accesskey="x" id="next" href="#">»<\/a>'
|
|
|
260 + '<div id="navList"><select id="jumplist" /><\/div>'
|
|
|
261 + '<\/div>' );
|
|
|
262
|
|
|
263 $controls.hover( function() { showHide('s') }, function() { showHide('h') });
|
|
|
264 $('#toggle').click( function() { toggle(); } );
|
|
|
265 $('#prev').click( function() { go(-1); } );
|
|
|
266 $('#next').click( function() { go(1); } );
|
|
|
267
|
|
|
268 $('#jumplist').change( function() { goTo( parseInt( $( '#jumplist' ).val() )); } );
|
|
|
269
|
|
|
270 populateJumpList();
|
|
|
271 updateCurrentSlideCounter();
|
|
|
272 updatePermaLink();
|
|
|
273 }
|
|
|
274
|
|
|
275 function toggleSlideNumber()
|
|
|
276 {
|
|
|
277 // toggle slide number/counter
|
|
|
278 $( '#currentSlide' ).toggle();
|
|
|
279 }
|
|
|
280
|
|
|
281 function toggleFooter()
|
|
|
282 {
|
|
|
283 $( '#footer').toggle();
|
|
|
284 }
|
|
|
285
|
|
|
286
|
|
|
287 function keys(key)
|
|
|
288 {
|
|
|
289 if (!key) {
|
|
|
290 key = event;
|
|
|
291 key.which = key.keyCode;
|
|
|
292 }
|
|
|
293 if (key.which == 84) {
|
|
|
294 toggle(); // toggle between project and screen css media mode
|
|
|
295 return;
|
|
|
296 }
|
|
|
297 if( settings.isProjection ) {
|
|
|
298 switch (key.which) {
|
|
|
299 case 32: // spacebar
|
|
|
300 case 34: // page down
|
|
|
301 case 39: // rightkey
|
|
|
302 case 40: // downkey
|
|
|
303
|
|
|
304 var csteps = settings.steps[settings.snum-1]; /* current slide steps array */
|
|
|
305
|
|
|
306 if ( !csteps || settings.incpos >= csteps.length ) {
|
|
|
307 go(1);
|
|
|
308 } else {
|
|
|
309 subgo(1);
|
|
|
310 }
|
|
|
311 break;
|
|
|
312 case 33: // page up
|
|
|
313 case 37: // leftkey
|
|
|
314 case 38: // upkey
|
|
|
315
|
|
|
316 if( !settings.steps[settings.snum-1] || settings.incpos <= 0 ) {
|
|
|
317 go(-1);
|
|
|
318 } else {
|
|
|
319 subgo(-1);
|
|
|
320 }
|
|
|
321 break;
|
|
|
322 case 36: // home
|
|
|
323 goTo(1);
|
|
|
324 break;
|
|
|
325 case 35: // end
|
|
|
326 goTo(settings.smax);
|
|
|
327 break;
|
|
|
328 case 67: // c
|
|
|
329 showHide('c'); // toggle controls (navlinks,navlist)
|
|
|
330 break;
|
|
|
331 case 65: //a
|
|
|
332 case 80: //p
|
|
|
333 case 83: //s
|
|
|
334 toggleAutoplay();
|
|
|
335 break;
|
|
|
336 case 70: //f
|
|
|
337 toggleFooter();
|
|
|
338 break;
|
|
|
339 case 78: // n
|
|
|
340 toggleSlideNumber();
|
|
|
341 break;
|
|
|
342 case 68: // d
|
|
|
343 toggleDebug();
|
|
|
344 break;
|
|
|
345 }
|
|
|
346 }
|
|
|
347 }
|
|
|
348
|
|
|
349 function autoplay()
|
|
|
350 {
|
|
|
351 // suspend autoplay in outline view (just slideshow view)
|
|
|
352 if( !settings.isProjection )
|
|
|
353 return;
|
|
|
354
|
|
|
355 // next slide/step, please
|
|
|
356 var csteps = settings.steps[settings.snum-1]; // current slide steps array
|
|
|
357 if( !csteps || settings.incpos >= csteps.length ) {
|
|
|
358 if( settings.snum >= settings.smax )
|
|
|
359 goTo( 1 ); // reached end of show? start with 1st slide again (for endless cycle)
|
|
|
360 else
|
|
|
361 go(1);
|
|
|
362 }
|
|
|
363 else {
|
|
|
364 subgo(1);
|
|
|
365 }
|
|
|
366 }
|
|
|
367
|
|
|
368 function toggleDebug()
|
|
|
369 {
|
|
|
370 settings.debug = !settings.debug;
|
|
|
371 doDebug();
|
|
|
372 }
|
|
|
373
|
|
|
374 function doDebug()
|
|
|
375 {
|
|
|
376 // fix/todo: save background into oldbackground
|
|
|
377 // so we can restore later
|
|
|
378
|
|
|
379 if( settings.debug == true )
|
|
|
380 {
|
|
|
381 $( '#header' ).css( 'background', '#FCC' );
|
|
|
382 $( '#footer' ).css( 'background', '#CCF' );
|
|
|
383 $( '#controls' ).css( 'background', '#BBD' );
|
|
|
384 $( '#currentSlide' ).css( 'background', '#FFC' );
|
|
|
385 }
|
|
|
386 else
|
|
|
387 {
|
|
|
388 $( '#header' ).css( 'background', 'transparent' );
|
|
|
389 $( '#footer' ).css( 'background', 'transparent' );
|
|
|
390 $( '#controls' ).css( 'background', 'transparent' );
|
|
|
391 $( '#currentSlide' ).css( 'background', 'transparent' );
|
|
|
392 }
|
|
|
393 }
|
|
|
394
|
|
|
395
|
|
|
396 function toggleAutoplay()
|
|
|
397 {
|
|
|
398 if( settings.autoplayInterval )
|
|
|
399 {
|
|
|
400 clearInterval( settings.autoplayInterval );
|
|
|
401 settings.autoplayInterval = null;
|
|
|
402 }
|
|
|
403 else
|
|
|
404 {
|
|
|
405 settings.autoplayInterval = setInterval ( autoplay, 2000 );
|
|
|
406 }
|
|
|
407 }
|
|
|
408
|
|
|
409
|
|
|
410
|
|
|
411 function collectStepsWorker(obj) {
|
|
|
412
|
|
|
413 var steps = new Array();
|
|
|
414 if( !obj )
|
|
|
415 return steps;
|
|
|
416
|
|
|
417 $(obj).children().each( function() {
|
|
|
418 if( $(this).hasClass( 'step' ) ) {
|
|
|
419
|
|
|
420 debug( 'step found for ' + this.tagName );
|
|
|
421 $(this).removeClass( 'step' );
|
|
|
422
|
|
|
423 /* don't add enclosing list; instead add step class to all list items/children */
|
|
|
424 if( $(this).is( 'ol,ul' ) ) {
|
|
|
425 debug( ' ol or ul found; adding auto steps' );
|
|
|
426 $(this).children().addClass( 'step' );
|
|
|
427 }
|
|
|
428 else
|
|
|
429 {
|
|
|
430 steps.push( this )
|
|
|
431 }
|
|
|
432 }
|
|
|
433
|
|
|
434 steps = steps.concat( collectStepsWorker(this) );
|
|
|
435 });
|
|
|
436
|
|
|
437 return steps;
|
|
|
438 }
|
|
|
439
|
|
|
440 function collectSteps() {
|
|
|
441
|
|
|
442 var steps = new Array();
|
|
|
443
|
|
|
444 $slides.each( function(i) {
|
|
|
445 debug ( 'collectSteps for ' + this.id + ':' );
|
|
|
446 steps[i] = collectStepsWorker( this );
|
|
|
447 });
|
|
|
448
|
|
|
449 $( steps ).each( function(i) {
|
|
|
450 debug( 'slide ' + (i+1) + ': found ' + this.length + ' steps' );
|
|
|
451 });
|
|
|
452
|
|
|
453 return steps;
|
|
|
454 }
|
|
|
455
|
|
|
456
|
|
|
457 function addClicker() {
|
|
|
458 // if you click on heading of slide -> go to next slide (or next step)
|
|
|
459
|
|
|
460 $( settings.titleSelector, $slides ).click( function( ev ) {
|
|
|
461 if(ev.which != 1) return; // only process left clicks (e.g 1; middle and rightclick use 2 and 3)
|
|
|
462
|
|
|
463 if( !settings.isProjection ) // suspend clicker in outline view (just slideshow view)
|
|
|
464 return;
|
|
|
465
|
|
|
466 var csteps = settings.steps[settings.snum-1]; // current slide steps array
|
|
|
467 if ( !csteps || settings.incpos >= csteps.length )
|
|
|
468 go(1);
|
|
|
469 else
|
|
|
470 subgo(1);
|
|
|
471 } );
|
|
|
472
|
|
|
473
|
|
|
474 $( settings.titleSelector, $slides ).bind('contextmenu', function() {
|
|
|
475 if( !settings.isProjection ) // suspend clicker in outline view (just slideshow view)
|
|
|
476 return;
|
|
|
477
|
|
|
478 var csteps = settings.steps[settings.snum-1]; // current slide steps array
|
|
|
479 if ( !csteps || settings.incpos >= csteps.length )
|
|
|
480 go(-1);
|
|
|
481 else
|
|
|
482 subgo(-1);
|
|
|
483
|
|
|
484 return false;
|
|
|
485 } );
|
|
|
486 }
|
|
|
487
|
|
|
488 function addSlideIds() {
|
|
|
489 $slides.each( function(i) {
|
|
|
490 this.id = 'slide'+(i+1);
|
|
|
491 });
|
|
|
492 }
|
|
|
493
|
|
|
494 // init code here
|
|
|
495
|
|
|
496 // store possible slidenumber from hash */
|
|
|
497 // todo: use regex to extract number
|
|
|
498 // might be #slide1 or just #1
|
|
|
499
|
|
|
500 var gotoSlideNum = parseInt( window.location.hash.substring(1) );
|
|
|
501 debug( "gotoSlideNum=" + gotoSlideNum );
|
|
|
502
|
|
|
503 var $slides = $( '.slide' );
|
|
|
504 settings.smax = $slides.length;
|
|
|
505
|
|
|
506 addSlideIds();
|
|
|
507 settings.steps = collectSteps();
|
|
|
508
|
|
|
509 createControls();
|
|
|
510
|
|
|
511 addClicker();
|
|
|
512
|
|
|
513 /* opera is the only browser currently supporting css projection mode */
|
|
|
514 /* if( !$.browser.opera ) */
|
|
|
515 notOperaFix();
|
|
|
516
|
|
|
517 if( !isNaN( gotoSlideNum ))
|
|
|
518 {
|
|
|
519 debug( "restoring slide on (re)load #: " + gotoSlideNum );
|
|
|
520 goTo( gotoSlideNum );
|
|
|
521 }
|
|
|
522
|
|
|
523 if( settings.mode == 'outline' )
|
|
|
524 toggle();
|
|
|
525 else if( settings.mode == 'autoplay' )
|
|
|
526 toggleAutoplay();
|
|
|
527
|
|
|
528
|
|
|
529 if( settings.debug == true )
|
|
|
530 doDebug();
|
|
|
531
|
|
|
532 document.onkeyup = keys;
|
|
|
533
|
|
|
534 } // end Slideshow
|
