1 /** |
|
2 * Interface Elements for jQuery |
|
3 * Slideshow |
|
4 * |
|
5 * http://interface.eyecon.ro |
|
6 * |
|
7 * Copyright (c) 2006 Stefan Petre |
|
8 * Dual licensed under the MIT (MIT-LICENSE.txt) |
|
9 * and GPL (GPL-LICENSE.txt) licenses. |
|
10 * |
|
11 */ |
|
12 |
|
13 |
|
14 /** |
|
15 * Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container. |
|
16 * |
|
17 * |
|
18 * |
|
19 * @name Slideshow |
|
20 * @description Creates an image slideshow. The slideshow can autoplay slides, each image can have caption, navigation links: next, prev, each slide. A page may have more then one slideshow, eachone working independently. Each slide can be bookmarked. The source images can be defined by JavaScript in slideshow options or by HTML placing images inside container. |
|
21 * @param Hash hash A hash of parameters |
|
22 * @option String container container ID |
|
23 * @option String loader path to loading indicator image |
|
24 * @option String linksPosition (optional) images links position ['top'|'bottom'|null] |
|
25 * @option String linksClass (optional) images links cssClass |
|
26 * @option String linksSeparator (optional) images links separator |
|
27 * @option Integer fadeDuration fade animation duration in miliseconds |
|
28 * @option String activeLinkClass (optional) active image link CSS class |
|
29 * @option String nextslideClass (optional) next image CSS class |
|
30 * @option String prevslideClass (optional) previous image CSS class |
|
31 * @option String captionPosition (optional) image caption position ['top'|'bottom'|null] |
|
32 * @option String captionClass (optional) image caption CSS class |
|
33 * @option String autoplay (optional) seconds to wait untill next images is displayed. This option will make the slideshow to autoplay. |
|
34 * @option String random (optional) if slideshow autoplayes the images can be randomized |
|
35 * @option Array images (optional) array of hash with keys 'src' (path to image) and 'cation' (image caption) for images |
|
36 * |
|
37 * @type jQuery |
|
38 * @cat Plugins/Interface |
|
39 * @author Stefan Petre |
|
40 */ |
|
41 jQuery.islideshow = { |
|
42 slideshows: [], |
|
43 gonext : function() |
|
44 { |
|
45 this.blur(); |
|
46 slideshow = this.parentNode; |
|
47 id = jQuery.attr(slideshow, 'id'); |
|
48 if (jQuery.islideshow.slideshows[id] != null) { |
|
49 window.clearInterval(jQuery.islideshow.slideshows[id]); |
|
50 } |
|
51 slide = slideshow.ss.currentslide + 1; |
|
52 if (slideshow.ss.images.length < slide) { |
|
53 slide = 1; |
|
54 } |
|
55 images = jQuery('img', slideshow.ss.holder); |
|
56 slideshow.ss.currentslide = slide; |
|
57 if (images.size() > 0) { |
|
58 images.fadeOut( |
|
59 slideshow.ss.fadeDuration, |
|
60 jQuery.islideshow.showImage |
|
61 ); |
|
62 } |
|
63 }, |
|
64 goprev : function() |
|
65 { |
|
66 this.blur(); |
|
67 slideshow = this.parentNode; |
|
68 id = jQuery.attr(slideshow, 'id'); |
|
69 if (jQuery.islideshow.slideshows[id] != null) { |
|
70 window.clearInterval(jQuery.islideshow.slideshows[id]); |
|
71 } |
|
72 slide = slideshow.ss.currentslide - 1; |
|
73 images = jQuery('img', slideshow.ss.holder); |
|
74 if (slide < 1) { |
|
75 slide = slideshow.ss.images.length ; |
|
76 } |
|
77 slideshow.ss.currentslide = slide; |
|
78 if (images.size() > 0) { |
|
79 images.fadeOut( |
|
80 slideshow.ss.fadeDuration, |
|
81 jQuery.islideshow.showImage |
|
82 ); |
|
83 } |
|
84 }, |
|
85 timer : function (c) |
|
86 { |
|
87 slideshow = document.getElementById(c); |
|
88 if (slideshow.ss.random) { |
|
89 slide = slideshow.ss.currentslide; |
|
90 while(slide == slideshow.ss.currentslide) { |
|
91 slide = 1 + parseInt(Math.random() * slideshow.ss.images.length); |
|
92 } |
|
93 } else { |
|
94 slide = slideshow.ss.currentslide + 1; |
|
95 if (slideshow.ss.images.length < slide) { |
|
96 slide = 1; |
|
97 } |
|
98 } |
|
99 images = jQuery('img', slideshow.ss.holder); |
|
100 slideshow.ss.currentslide = slide; |
|
101 if (images.size() > 0) { |
|
102 images.fadeOut( |
|
103 slideshow.ss.fadeDuration, |
|
104 jQuery.islideshow.showImage |
|
105 ); |
|
106 } |
|
107 }, |
|
108 go : function(o) |
|
109 { |
|
110 var slideshow; |
|
111 if (o && o.constructor == Object) { |
|
112 if (o.loader) { |
|
113 slideshow = document.getElementById(o.loader.slideshow); |
|
114 url = window.location.href.split("#"); |
|
115 o.loader.onload = null; |
|
116 if (url.length == 2) { |
|
117 slide = parseInt(url[1]); |
|
118 show = url[1].replace(slide,''); |
|
119 if (jQuery.attr(slideshow,'id') != show) { |
|
120 slide = 1; |
|
121 } |
|
122 } else { |
|
123 slide = 1; |
|
124 } |
|
125 } |
|
126 if(o.link) { |
|
127 o.link.blur(); |
|
128 slideshow = o.link.parentNode.parentNode; |
|
129 id = jQuery.attr(slideshow, 'id'); |
|
130 if (jQuery.islideshow.slideshows[id] != null) { |
|
131 window.clearInterval(jQuery.islideshow.slideshows[id]); |
|
132 } |
|
133 url = o.link.href.split("#"); |
|
134 slide = parseInt(url[1]); |
|
135 show = url[1].replace(slide,''); |
|
136 if (jQuery.attr(slideshow,'id') != show) { |
|
137 slide = 1; |
|
138 } |
|
139 } |
|
140 if (slideshow.ss.images.length < slide || slide < 1) { |
|
141 slide = 1; |
|
142 } |
|
143 slideshow.ss.currentslide = slide; |
|
144 slidePos = jQuery.iUtil.getSize(slideshow); |
|
145 slidePad = jQuery.iUtil.getPadding(slideshow); |
|
146 slideBor = jQuery.iUtil.getBorder(slideshow); |
|
147 if (slideshow.ss.prevslide) { |
|
148 slideshow.ss.prevslide.o.css('display', 'none'); |
|
149 } |
|
150 if (slideshow.ss.nextslide) { |
|
151 slideshow.ss.nextslide.o.css('display', 'none'); |
|
152 } |
|
153 |
|
154 //center loader |
|
155 if (slideshow.ss.loader) { |
|
156 y = parseInt(slidePad.t) + parseInt(slideBor.t); |
|
157 if (slideshow.ss.slideslinks) { |
|
158 if (slideshow.ss.slideslinks.linksPosition == 'top') { |
|
159 y += slideshow.ss.slideslinks.dimm.hb; |
|
160 } else { |
|
161 slidePos.h -= slideshow.ss.slideslinks.dimm.hb; |
|
162 } |
|
163 } |
|
164 if (slideshow.ss.slideCaption) { |
|
165 if (slideshow.ss.slideCaption && slideshow.ss.slideCaption.captionPosition == 'top') { |
|
166 y += slideshow.ss.slideCaption.dimm.hb; |
|
167 } else { |
|
168 slidePos.h -= slideshow.ss.slideCaption.dimm.hb; |
|
169 } |
|
170 } |
|
171 if (!slideshow.ss.loaderWidth) { |
|
172 slideshow.ss.loaderHeight = o.loader ? o.loader.height : (parseInt(slideshow.ss.loader.css('height'))||0); |
|
173 slideshow.ss.loaderWidth = o.loader ? o.loader.width : (parseInt(slideshow.ss.loader.css('width'))||0); |
|
174 } |
|
175 |
|
176 slideshow.ss.loader.css('top', y + (slidePos.h - slideshow.ss.loaderHeight)/2 + 'px'); |
|
177 slideshow.ss.loader.css('left', (slidePos.wb - slideshow.ss.loaderWidth)/2 + 'px'); |
|
178 slideshow.ss.loader.css('display', 'block'); |
|
179 } |
|
180 |
|
181 //getimage |
|
182 images = jQuery('img', slideshow.ss.holder); |
|
183 if (images.size() > 0) { |
|
184 images.fadeOut( |
|
185 slideshow.ss.fadeDuration, |
|
186 jQuery.islideshow.showImage |
|
187 ); |
|
188 } else { |
|
189 lnk = jQuery('a', slideshow.ss.slideslinks.o).get(slide-1); |
|
190 jQuery(lnk).addClass(slideshow.ss.slideslinks.activeLinkClass); |
|
191 var img = new Image(); |
|
192 img.slideshow = jQuery.attr(slideshow,'id'); |
|
193 img.slide = slide-1; |
|
194 img.src = slideshow.ss.images[slideshow.ss.currentslide-1].src ; |
|
195 if (img.complete) { |
|
196 img.onload = null; |
|
197 jQuery.islideshow.display.apply(img); |
|
198 } else { |
|
199 img.onload = jQuery.islideshow.display; |
|
200 } |
|
201 //slideshow.ss.holder.html('<img src="' + slideshow.ss.images[slide-1].src + '" />'); |
|
202 if (slideshow.ss.slideCaption) { |
|
203 slideshow.ss.slideCaption.o.html(slideshow.ss.images[slide-1].caption); |
|
204 } |
|
205 //jQuery('img', slideshow.ss.holder).bind('load',jQuery.slideshowDisplay); |
|
206 } |
|
207 } |
|
208 }, |
|
209 showImage : function() |
|
210 { |
|
211 slideshow = this.parentNode.parentNode; |
|
212 slideshow.ss.holder.css('display','none'); |
|
213 if (slideshow.ss.slideslinks.activeLinkClass) { |
|
214 lnk = jQuery('a', slideshow.ss.slideslinks.o).removeClass(slideshow.ss.slideslinks.activeLinkClass).get(slideshow.ss.currentslide - 1); |
|
215 jQuery(lnk).addClass(slideshow.ss.slideslinks.activeLinkClass); |
|
216 } |
|
217 //slideshow.ss.holder.html('<img src="' + slideshow.ss.images[slideshow.ss.currentslide - 1].src + '" />'); |
|
218 |
|
219 var img = new Image(); |
|
220 img.slideshow = jQuery.attr(slideshow,'id'); |
|
221 img.slide = slideshow.ss.currentslide - 1; |
|
222 img.src = slideshow.ss.images[slideshow.ss.currentslide - 1].src ; |
|
223 if (img.complete) { |
|
224 img.onload = null; |
|
225 jQuery.islideshow.display.apply(img); |
|
226 } else { |
|
227 img.onload = jQuery.islideshow.display; |
|
228 } |
|
229 if (slideshow.ss.slideCaption) { |
|
230 slideshow.ss.slideCaption.o.html(slideshow.ss.images[slideshow.ss.currentslide-1].caption); |
|
231 } |
|
232 //jQuery('img', slideshow.ss.holder).bind('load',jQuery.slideshowDisplay); |
|
233 }, |
|
234 display : function () |
|
235 { |
|
236 slideshow = document.getElementById(this.slideshow); |
|
237 if (slideshow.ss.prevslide) { |
|
238 slideshow.ss.prevslide.o.css('display', 'none'); |
|
239 } |
|
240 if (slideshow.ss.nextslide) { |
|
241 slideshow.ss.nextslide.o.css('display', 'none'); |
|
242 } |
|
243 slidePos = jQuery.iUtil.getSize(slideshow); |
|
244 y = 0; |
|
245 if (slideshow.ss.slideslinks) { |
|
246 if (slideshow.ss.slideslinks.linksPosition == 'top') { |
|
247 y += slideshow.ss.slideslinks.dimm.hb; |
|
248 } else { |
|
249 slidePos.h -= slideshow.ss.slideslinks.dimm.hb; |
|
250 } |
|
251 } |
|
252 if (slideshow.ss.slideCaption) { |
|
253 if (slideshow.ss.slideCaption && slideshow.ss.slideCaption.captionPosition == 'top') { |
|
254 y += slideshow.ss.slideCaption.dimm.hb; |
|
255 } else { |
|
256 slidePos.h -= slideshow.ss.slideCaption.dimm.hb; |
|
257 } |
|
258 } |
|
259 par = jQuery('.slideshowHolder', slideshow); |
|
260 y = y + (slidePos.h - this.height)/2 ; |
|
261 x = (slidePos.wb - this.width)/2; |
|
262 slideshow.ss.holder.css('top', y + 'px').css('left', x + 'px').html('<img src="' + this.src + '" />'); |
|
263 slideshow.ss.holder.fadeIn(slideshow.ss.fadeDuration); |
|
264 nextslide = slideshow.ss.currentslide + 1; |
|
265 if (nextslide > slideshow.ss.images.length) { |
|
266 nextslide = 1; |
|
267 } |
|
268 prevslide = slideshow.ss.currentslide - 1; |
|
269 if (prevslide < 1) { |
|
270 prevslide = slideshow.ss.images.length; |
|
271 } |
|
272 slideshow.ss.nextslide.o |
|
273 .css('display','block') |
|
274 .css('top', y + 'px') |
|
275 .css('left', x + 2 * this.width/3 + 'px') |
|
276 .css('width', this.width/3 + 'px') |
|
277 .css('height', this.height + 'px') |
|
278 .attr('title', slideshow.ss.images[nextslide-1].caption); |
|
279 slideshow.ss.nextslide.o.get(0).href = '#' + nextslide + jQuery.attr(slideshow, 'id'); |
|
280 slideshow.ss.prevslide.o |
|
281 .css('display','block') |
|
282 .css('top', y + 'px') |
|
283 .css('left', x + 'px') |
|
284 .css('width', this.width/3 + 'px') |
|
285 .css('height', this.height + 'px') |
|
286 .attr('title', slideshow.ss.images[prevslide-1].caption); |
|
287 slideshow.ss.prevslide.o.get(0).href = '#' + prevslide + jQuery.attr(slideshow, 'id'); |
|
288 }, |
|
289 build : function(o) |
|
290 { |
|
291 if (!o || !o.container || jQuery.islideshow.slideshows[o.container]) |
|
292 return; |
|
293 var container = jQuery('#' + o.container); |
|
294 var el = container.get(0); |
|
295 |
|
296 if (el.style.position != 'absolute' && el.style.position != 'relative') { |
|
297 el.style.position = 'relative'; |
|
298 } |
|
299 el.style.overflow = 'hidden'; |
|
300 if (container.size() == 0) |
|
301 return; |
|
302 el.ss = {}; |
|
303 |
|
304 el.ss.images = o.images ? o.images : []; |
|
305 el.ss.random = o.random && o.random == true || false; |
|
306 imgs = el.getElementsByTagName('IMG'); |
|
307 for(i = 0; i< imgs.length; i++) { |
|
308 indic = el.ss.images.length; |
|
309 el.ss.images[indic] = {src:imgs[i].src, caption:imgs[i].title||imgs[i].alt||''}; |
|
310 } |
|
311 |
|
312 if (el.ss.images.length == 0) { |
|
313 return; |
|
314 } |
|
315 |
|
316 el.ss.oP = jQuery.extend( |
|
317 jQuery.iUtil.getPosition(el), |
|
318 jQuery.iUtil.getSize(el) |
|
319 ); |
|
320 el.ss.oPad = jQuery.iUtil.getPadding(el); |
|
321 el.ss.oBor = jQuery.iUtil.getBorder(el); |
|
322 t = parseInt(el.ss.oPad.t) + parseInt(el.ss.oBor.t); |
|
323 b = parseInt(el.ss.oPad.b) + parseInt(el.ss.oBor.b); |
|
324 jQuery('img', el).remove(); |
|
325 el.ss.fadeDuration = o.fadeDuration ? o.fadeDuration : 500; |
|
326 if (o.linksPosition || o.linksClass || o.activeLinkClass) { |
|
327 el.ss.slideslinks = {}; |
|
328 container.append('<div class="slideshowLinks"></div>'); |
|
329 el.ss.slideslinks.o = jQuery('.slideshowLinks', el); |
|
330 if (o.linksClass) { |
|
331 el.ss.slideslinks.linksClass = o.linksClass; |
|
332 el.ss.slideslinks.o.addClass(o.linksClass); |
|
333 } |
|
334 if (o.activeLinkClass) { |
|
335 el.ss.slideslinks.activeLinkClass = o.activeLinkClass; |
|
336 } |
|
337 el.ss.slideslinks.o.css('position','absolute').css('width', el.ss.oP.w + 'px'); |
|
338 if (o.linksPosition && o.linksPosition == 'top') { |
|
339 el.ss.slideslinks.linksPosition = 'top'; |
|
340 el.ss.slideslinks.o.css('top',t + 'px'); |
|
341 } else { |
|
342 el.ss.slideslinks.linksPosition = 'bottom'; |
|
343 el.ss.slideslinks.o.css('bottom',b + 'px'); |
|
344 } |
|
345 el.ss.slideslinks.linksSeparator = o.linksSeparator ? o.linksSeparator : ' '; |
|
346 for (var i=0; i<el.ss.images.length; i++) { |
|
347 indic = parseInt(i) + 1; |
|
348 el.ss.slideslinks.o.append('<a href="#' + indic + o.container + '" class="slideshowLink" title="' + el.ss.images[i].caption + '">' + indic + '</a>' + (indic != el.ss.images.length ? el.ss.slideslinks.linksSeparator : '')); |
|
349 } |
|
350 jQuery('a', el.ss.slideslinks.o).bind( |
|
351 'click', |
|
352 function() |
|
353 { |
|
354 jQuery.islideshow.go({link:this}) |
|
355 } |
|
356 ); |
|
357 el.ss.slideslinks.dimm = jQuery.iUtil.getSize(el.ss.slideslinks.o.get(0)); |
|
358 } |
|
359 if (o.captionPosition || o.captionClass) { |
|
360 el.ss.slideCaption = {}; |
|
361 container.append('<div class="slideshowCaption"> </div>'); |
|
362 el.ss.slideCaption.o = jQuery('.slideshowCaption', el); |
|
363 if (o.captionClass) { |
|
364 el.ss.slideCaption.captionClass = o.captionClass; |
|
365 el.ss.slideCaption.o.addClass(o.captionClass); |
|
366 } |
|
367 el.ss.slideCaption.o.css('position','absolute').css('width', el.ss.oP.w + 'px'); |
|
368 if (o.captionPosition&& o.captionPosition == 'top') { |
|
369 el.ss.slideCaption.captionPosition = 'top'; |
|
370 el.ss.slideCaption.o.css('top', (el.ss.slideslinks && el.ss.slideslinks.linksPosition == 'top' ? el.ss.slideslinks.dimm.hb + t : t) + 'px'); |
|
371 } else { |
|
372 el.ss.slideCaption.captionPosition = 'bottom'; |
|
373 el.ss.slideCaption.o.css('bottom', (el.ss.slideslinks && el.ss.slideslinks.linksPosition == 'bottom' ? el.ss.slideslinks.dimm.hb + b : b) + 'px'); |
|
374 } |
|
375 el.ss.slideCaption.dimm = jQuery.iUtil.getSize(el.ss.slideCaption.o.get(0)); |
|
376 } |
|
377 |
|
378 if (o.nextslideClass) { |
|
379 el.ss.nextslide = {nextslideClass:o.nextslideClass}; |
|
380 container.append('<a href="#2' + o.container + '" class="slideshowNextSlide"> </a>'); |
|
381 el.ss.nextslide.o = jQuery('.slideshowNextSlide', el); |
|
382 el.ss.nextslide.o.css('position', 'absolute').css('display', 'none').css('overflow','hidden').css('fontSize', '30px').addClass(el.ss.nextslide.nextslideClass); |
|
383 el.ss.nextslide.o.bind('click', jQuery.islideshow.gonext); |
|
384 } |
|
385 if (o.prevslideClass) { |
|
386 el.ss.prevslide= {prevslideClass:o.prevslideClass}; |
|
387 container.append('<a href="#0' + o.container + '" class="slideshowPrevslide"> </a>'); |
|
388 el.ss.prevslide.o = jQuery('.slideshowPrevslide', el); |
|
389 el.ss.prevslide.o.css('position', 'absolute').css('display', 'none').css('overflow','hidden').css('fontSize', '30px').addClass(el.ss.prevslide.prevslideClass); |
|
390 el.ss.prevslide.o.bind('click', jQuery.islideshow.goprev); |
|
391 } |
|
392 |
|
393 container.prepend('<div class="slideshowHolder"></div>'); |
|
394 el.ss.holder = jQuery('.slideshowHolder', el); |
|
395 el.ss.holder.css('position','absolute').css('top','0px').css('left','0px').css('display', 'none'); |
|
396 if (o.loader) { |
|
397 container.prepend('<div class="slideshowLoader" style="display: none;"><img src="' + o.loader + '" /></div>'); |
|
398 el.ss.loader = jQuery('.slideshowLoader', el); |
|
399 el.ss.loader.css('position', 'absolute'); |
|
400 var img = new Image(); |
|
401 img.slideshow = o.container; |
|
402 img.src = o.loader; |
|
403 if (img.complete) { |
|
404 img.onload = null; |
|
405 jQuery.islideshow.go({loader:img}); |
|
406 } else { |
|
407 img.onload = function() |
|
408 { |
|
409 jQuery.islideshow.go({loader:this}); |
|
410 }; |
|
411 } |
|
412 } else { |
|
413 jQuery.islideshow.go({container:el}); |
|
414 } |
|
415 |
|
416 if(o.autoplay) { |
|
417 time = parseInt(o.autoplay) * 1000; |
|
418 } |
|
419 jQuery.islideshow.slideshows[o.container] = o.autoplay ? window.setInterval('jQuery.islideshow.timer(\'' + o.container + '\')', time) : null; |
|
420 } |
|
421 }; |
|
422 jQuery.slideshow = jQuery.islideshow.build; |
|