Mercurial > repos > brasset_jensen > srnapipe

comparison bin/js/jquery.galleriffic.js @ 1:1df6aaac800e draft

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Deleted selected files
author brasset_jensen
date Wed, 13 Dec 2017 10:40:50 -0500
parents
children
comparison
equal deleted inserted replaced
0:e4e71401c577 1:1df6aaac800e
1 /**
2 * jQuery Galleriffic plugin
3 *
4 * Copyright (c) 2008 Trent Foley (http://trentacular.com)
5 * Licensed under the MIT License:
6 * http://www.opensource.org/licenses/mit-license.php
7 *
8 * Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
9 */
10 ;(function($) {
11 // Globally keep track of all images by their unique hash. Each item is an image data object.
12 var allImages = {};
13 var imageCounter = 0;
14
15 // Galleriffic static class
16 $.galleriffic = {
17 version: '2.0.1',
18
19 // Strips invalid characters and any leading # characters
20 normalizeHash: function(hash) {
21 return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
22 },
23
24 getImage: function(hash) {
25 if (!hash)
26 return undefined;
27
28 hash = $.galleriffic.normalizeHash(hash);
29 return allImages[hash];
30 },
31
32 // Global function that looks up an image by its hash and displays the image.
33 // Returns false when an image is not found for the specified hash.
34 // @param {String} hash This is the unique hash value assigned to an image.
35 gotoImage: function(hash) {
36 var imageData = $.galleriffic.getImage(hash);
37 if (!imageData)
38 return false;
39
40 var gallery = imageData.gallery;
41 gallery.gotoImage(imageData);
42
43 return true;
44 },
45
46 // Removes an image from its respective gallery by its hash.
47 // Returns false when an image is not found for the specified hash or the
48 // specified owner gallery does match the located images gallery.
49 // @param {String} hash This is the unique hash value assigned to an image.
50 // @param {Object} ownerGallery (Optional) When supplied, the located images
51 // gallery is verified to be the same as the specified owning gallery before
52 // performing the remove operation.
53 removeImageByHash: function(hash, ownerGallery) {
54 var imageData = $.galleriffic.getImage(hash);
55 if (!imageData)
56 return false;
57
58 var gallery = imageData.gallery;
59 if (ownerGallery && ownerGallery != gallery)
60 return false;
61
62 return gallery.removeImageByIndex(imageData.index);
63 }
64 };
65
66 var defaults = {
67 delay: 3000,
68 numThumbs: 20,
69 preloadAhead: 40, // Set to -1 to preload all images
70 enableTopPager: false,
71 enableBottomPager: true,
72 maxPagesToShow: 7,
73 imageContainerSel: '',
74 captionContainerSel: '',
75 controlsContainerSel: '',
76 loadingContainerSel: '',
77 renderSSControls: true,
78 renderNavControls: true,
79 playLinkText: 'Play',
80 pauseLinkText: 'Pause',
81 prevLinkText: 'Previous',
82 nextLinkText: 'Next',
83 nextPageLinkText: 'Next ›',
84 prevPageLinkText: '‹ Prev',
85 enableHistory: false,
86 enableKeyboardNavigation: true,
87 autoStart: false,
88 syncTransitions: false,
89 defaultTransitionDuration: 1000,
90 onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
91 onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
92 onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
93 onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
94 onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
95 onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
96 onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
97 };
98
99 // Primary Galleriffic initialization function that should be called on the thumbnail container.
100 $.fn.galleriffic = function(settings) {
101 // Extend Gallery Object
102 $.extend(this, {
103 // Returns the version of the script
104 version: $.galleriffic.version,
105
106 // Current state of the slideshow
107 isSlideshowRunning: false,
108 slideshowTimeout: undefined,
109
110 // This function is attached to the click event of generated hyperlinks within the gallery
111 clickHandler: function(e, link) {
112 this.pause();
113
114 if (!this.enableHistory) {
115 // The href attribute holds the unique hash for an image
116 var hash = $.galleriffic.normalizeHash($(link).attr('href'));
117 $.galleriffic.gotoImage(hash);
118 e.preventDefault();
119 }
120 },
121
122 // Appends an image to the end of the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
123 // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
124 appendImage: function(listItem) {
125 this.addImage(listItem, false, false);
126 return this;
127 },
128
129 // Inserts an image into the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
130 // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
131 // @param {Integer} position The index within the gallery where the item shouold be added.
132 insertImage: function(listItem, position) {
133 this.addImage(listItem, false, true, position);
134 return this;
135 },
136
137 // Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
138 // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
139 // @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
140 // @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
141 // @param {Integer} position The index within the gallery where the item shouold be added.
142 addImage: function(listItem, thumbExists, insert, position) {
143 var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
144 var $aThumb = $li.find('a.thumb');
145 var slideUrl = $aThumb.attr('href');
146 var title = $aThumb.attr('title');
147 var $caption = $li.find('.caption').remove();
148 var hash = $aThumb.attr('name');
149
150 // Increment the image counter
151 imageCounter++;
152
153 // Autogenerate a hash value if none is present or if it is a duplicate
154 if (!hash || allImages[''+hash]) {
155 hash = imageCounter;
156 }
157
158 // Set position to end when not specified
159 if (!insert)
160 position = this.data.length;
161
162 var imageData = {
163 title:title,
164 slideUrl:slideUrl,
165 caption:$caption,
166 hash:hash,
167 gallery:this,
168 index:position
169 };
170
171 // Add the imageData to this gallery's array of images
172 if (insert) {
173 this.data.splice(position, 0, imageData);
174
175 // Reset index value on all imageData objects
176 this.updateIndices(position);
177 }
178 else {
179 this.data.push(imageData);
180 }
181
182 var gallery = this;
183
184 // Add the element to the DOM
185 if (!thumbExists) {
186 // Update thumbs passing in addition post transition out handler
187 this.updateThumbs(function() {
188 var $thumbsUl = gallery.find('ul.thumbs');
189 if (insert)
190 $thumbsUl.children(':eq('+position+')').before($li);
191 else
192 $thumbsUl.append($li);
193
194 if (gallery.onImageAdded)
195 gallery.onImageAdded(imageData, $li);
196 });
197 }
198
199 // Register the image globally
200 allImages[''+hash] = imageData;
201
202 // Setup attributes and click handler
203 $aThumb.attr('rel', 'history')
204 .attr('href', '#'+hash)
205 .removeAttr('name')
206 .click(function(e) {
207 gallery.clickHandler(e, this);
208 });
209
210 return this;
211 },
212
213 // Removes an image from the gallery based on its index.
214 // Returns false when the index is out of range.
215 removeImageByIndex: function(index) {
216 if (index < 0 || index >= this.data.length)
217 return false;
218
219 var imageData = this.data[index];
220 if (!imageData)
221 return false;
222
223 this.removeImage(imageData);
224
225 return true;
226 },
227
228 // Convenience method that simply calls the global removeImageByHash method.
229 removeImageByHash: function(hash) {
230 return $.galleriffic.removeImageByHash(hash, this);
231 },
232
233 // Removes an image from the gallery.
234 removeImage: function(imageData) {
235 var index = imageData.index;
236
237 // Remove the image from the gallery data array
238 this.data.splice(index, 1);
239
240 // Remove the global registration
241 delete allImages[''+imageData.hash];
242
243 // Remove the image's list item from the DOM
244 this.updateThumbs(function() {
245 var $li = gallery.find('ul.thumbs')
246 .children(':eq('+index+')')
247 .remove();
248
249 if (gallery.onImageRemoved)
250 gallery.onImageRemoved(imageData, $li);
251 });
252
253 // Update each image objects index value
254 this.updateIndices(index);
255
256 return this;
257 },
258
259 // Updates the index values of the each of the images in the gallery after the specified index
260 updateIndices: function(startIndex) {
261 for (i = startIndex; i < this.data.length; i++) {
262 this.data[i].index = i;
263 }
264
265 return this;
266 },
267
268 // Scraped the thumbnail container for thumbs and adds each to the gallery
269 initializeThumbs: function() {
270 this.data = [];
271 var gallery = this;
272
273 this.find('ul.thumbs > li').each(function(i) {
274 gallery.addImage($(this), true, false);
275 });
276
277 return this;
278 },
279
280 isPreloadComplete: false,
281
282 // Initalizes the image preloader
283 preloadInit: function() {
284 if (this.preloadAhead == 0) return this;
285
286 this.preloadStartIndex = this.currentImage.index;
287 var nextIndex = this.getNextIndex(this.preloadStartIndex);
288 return this.preloadRecursive(this.preloadStartIndex, nextIndex);
289 },
290
291 // Changes the location in the gallery the preloader should work
292 // @param {Integer} index The index of the image where the preloader should restart at.
293 preloadRelocate: function(index) {
294 // By changing this startIndex, the current preload script will restart
295 this.preloadStartIndex = index;
296 return this;
297 },
298
299 // Recursive function that performs the image preloading
300 // @param {Integer} startIndex The index of the first image the current preloader started on.
301 // @param {Integer} currentIndex The index of the current image to preload.
302 preloadRecursive: function(startIndex, currentIndex) {
303 // Check if startIndex has been relocated
304 if (startIndex != this.preloadStartIndex) {
305 var nextIndex = this.getNextIndex(this.preloadStartIndex);
306 return this.preloadRecursive(this.preloadStartIndex, nextIndex);
307 }
308
309 var gallery = this;
310
311 // Now check for preloadAhead count
312 var preloadCount = currentIndex - startIndex;
313 if (preloadCount < 0)
314 preloadCount = this.data.length-1-startIndex+currentIndex;
315 if (this.preloadAhead >= 0 && preloadCount > this.preloadAhead) {
316 // Do this in order to keep checking for relocated start index
317 setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
318 return this;
319 }
320
321 var imageData = this.data[currentIndex];
322 if (!imageData)
323 return this;
324
325 // If already loaded, continue
326 if (imageData.image)
327 return this.preloadNext(startIndex, currentIndex);
328
329 // Preload the image
330 var image = new Image();
331
332 image.onload = function() {
333 imageData.image = this;
334 gallery.preloadNext(startIndex, currentIndex);
335 };
336
337 image.alt = imageData.title;
338 image.src = imageData.slideUrl;
339
340 return this;
341 },
342
343 // Called by preloadRecursive in order to preload the next image after the previous has loaded.
344 // @param {Integer} startIndex The index of the first image the current preloader started on.
345 // @param {Integer} currentIndex The index of the current image to preload.
346 preloadNext: function(startIndex, currentIndex) {
347 var nextIndex = this.getNextIndex(currentIndex);
348 if (nextIndex == startIndex) {
349 this.isPreloadComplete = true;
350 } else {
351 // Use setTimeout to free up thread
352 var gallery = this;
353 setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
354 }
355
356 return this;
357 },
358
359 // Safe way to get the next image index relative to the current image.
360 // If the current image is the last, returns 0
361 getNextIndex: function(index) {
362 var nextIndex = index+1;
363 if (nextIndex >= this.data.length)
364 nextIndex = 0;
365 return nextIndex;
366 },
367
368 // Safe way to get the previous image index relative to the current image.
369 // If the current image is the first, return the index of the last image in the gallery.
370 getPrevIndex: function(index) {
371 var prevIndex = index-1;
372 if (prevIndex < 0)
373 prevIndex = this.data.length-1;
374 return prevIndex;
375 },
376
377 // Pauses the slideshow
378 pause: function() {
379 this.isSlideshowRunning = false;
380 if (this.slideshowTimeout) {
381 clearTimeout(this.slideshowTimeout);
382 this.slideshowTimeout = undefined;
383 }
384
385 if (this.$controlsContainer) {
386 this.$controlsContainer
387 .find('div.ss-controls a').removeClass().addClass('play')
388 .attr('title', this.playLinkText)
389 .attr('href', '#play')
390 .html(this.playLinkText);
391 }
392
393 return this;
394 },
395
396 // Plays the slideshow
397 play: function() {
398 this.isSlideshowRunning = true;
399
400 if (this.$controlsContainer) {
401 this.$controlsContainer
402 .find('div.ss-controls a').removeClass().addClass('pause')
403 .attr('title', this.pauseLinkText)
404 .attr('href', '#pause')
405 .html(this.pauseLinkText);
406 }
407
408 if (!this.slideshowTimeout) {
409 var gallery = this;
410 this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
411 }
412
413 return this;
414 },
415
416 // Toggles the state of the slideshow (playing/paused)
417 toggleSlideshow: function() {
418 if (this.isSlideshowRunning)
419 this.pause();
420 else
421 this.play();
422
423 return this;
424 },
425
426 // Advances the slideshow to the next image and delegates navigation to the
427 // history plugin when history is enabled
428 // enableHistory is true
429 ssAdvance: function() {
430 if (this.isSlideshowRunning)
431 this.next(true);
432
433 return this;
434 },
435
436 // Advances the gallery to the next image.
437 // @param {Boolean} dontPause Specifies whether to pause the slideshow.
438 // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
439 next: function(dontPause, bypassHistory) {
440 this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
441 return this;
442 },
443
444 // Navigates to the previous image in the gallery.
445 // @param {Boolean} dontPause Specifies whether to pause the slideshow.
446 // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
447 previous: function(dontPause, bypassHistory) {
448 this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
449 return this;
450 },
451
452 // Navigates to the next page in the gallery.
453 // @param {Boolean} dontPause Specifies whether to pause the slideshow.
454 // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
455 nextPage: function(dontPause, bypassHistory) {
456 var page = this.getCurrentPage();
457 var lastPage = this.getNumPages() - 1;
458 if (page < lastPage) {
459 var startIndex = page * this.numThumbs;
460 var nextPage = startIndex + this.numThumbs;
461 this.gotoIndex(nextPage, dontPause, bypassHistory);
462 }
463
464 return this;
465 },
466
467 // Navigates to the previous page in the gallery.
468 // @param {Boolean} dontPause Specifies whether to pause the slideshow.
469 // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
470 previousPage: function(dontPause, bypassHistory) {
471 var page = this.getCurrentPage();
472 if (page > 0) {
473 var startIndex = page * this.numThumbs;
474 var prevPage = startIndex - this.numThumbs;
475 this.gotoIndex(prevPage, dontPause, bypassHistory);
476 }
477
478 return this;
479 },
480
481 // Navigates to the image at the specified index in the gallery
482 // @param {Integer} index The index of the image in the gallery to display.
483 // @param {Boolean} dontPause Specifies whether to pause the slideshow.
484 // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
485 gotoIndex: function(index, dontPause, bypassHistory) {
486 if (!dontPause)
487 this.pause();
488
489 if (index < 0) index = 0;
490 else if (index >= this.data.length) index = this.data.length-1;
491
492 var imageData = this.data[index];
493
494 if (!bypassHistory && this.enableHistory)
495 $.historyLoad(String(imageData.hash)); // At the moment, historyLoad only accepts string arguments
496 else
497 this.gotoImage(imageData);
498
499 return this;
500 },
501
502 // This function is garaunteed to be called anytime a gallery slide changes.
503 // @param {Object} imageData An object holding the image metadata of the image to navigate to.
504 gotoImage: function(imageData) {
505 var index = imageData.index;
506
507 if (this.onSlideChange)
508 this.onSlideChange(this.currentImage.index, index);
509
510 this.currentImage = imageData;
511 this.preloadRelocate(index);
512
513 this.refresh();
514
515 return this;
516 },
517
518 // Returns the default transition duration value. The value is halved when not
519 // performing a synchronized transition.
520 // @param {Boolean} isSync Specifies whether the transitions are synchronized.
521 getDefaultTransitionDuration: function(isSync) {
522 if (isSync)
523 return this.defaultTransitionDuration;
524 return this.defaultTransitionDuration / 2;
525 },
526
527 // Rebuilds the slideshow image and controls and performs transitions
528 refresh: function() {
529 var imageData = this.currentImage;
530 if (!imageData)
531 return this;
532
533 var index = imageData.index;
534
535 // Update Controls
536 if (this.$controlsContainer) {
537 this.$controlsContainer
538 .find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
539 .find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
540 }
541
542 var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
543 var previousCaption = 0;
544
545 if (this.$captionContainer) {
546 previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
547 }
548
549 // Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
550 var isSync = this.syncTransitions && imageData.image;
551
552 // Flag we are transitioning
553 var isTransitioning = true;
554 var gallery = this;
555
556 var transitionOutCallback = function() {
557 // Flag that the transition has completed
558 isTransitioning = false;
559
560 // Remove the old slide
561 previousSlide.remove();
562
563 // Remove old caption
564 if (previousCaption)
565 previousCaption.remove();
566
567 if (!isSync) {
568 if (imageData.image && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
569 gallery.buildImage(imageData, isSync);
570 } else {
571 // Show loading container
572 if (gallery.$loadingContainer) {
573 gallery.$loadingContainer.show();
574 }
575 }
576 }
577 };
578
579 if (previousSlide.length == 0) {
580 // For the first slide, the previous slide will be empty, so we will call the callback immediately
581 transitionOutCallback();
582 } else {
583 if (this.onTransitionOut) {
584 this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
585 } else {
586 previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
587 if (previousCaption)
588 previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
589 }
590 }
591
592 // Go ahead and begin transitioning in of next image
593 if (isSync)
594 this.buildImage(imageData, isSync);
595
596 if (!imageData.image) {
597 var image = new Image();
598
599 // Wire up mainImage onload event
600 image.onload = function() {
601 imageData.image = this;
602
603 // Only build image if the out transition has completed and we are still on the same image hash
604 if (!isTransitioning && imageData.hash == gallery.data[gallery.currentImage.index].hash) {
605 gallery.buildImage(imageData, isSync);
606 }
607 };
608
609 // set alt and src
610 image.alt = imageData.title;
611 image.src = imageData.slideUrl;
612 }
613
614 // This causes the preloader (if still running) to relocate out from the currentIndex
615 this.relocatePreload = true;
616
617 return this.syncThumbs();
618 },
619
620 // Called by the refresh method after the previous image has been transitioned out or at the same time
621 // as the out transition when performing a synchronous transition.
622 // @param {Object} imageData An object holding the image metadata of the image to build.
623 // @param {Boolean} isSync Specifies whether the transitions are synchronized.
624 buildImage: function(imageData, isSync) {
625 var gallery = this;
626 var nextIndex = this.getNextIndex(imageData.index);
627
628 // Construct new hidden span for the image
629 var newSlide = this.$imageContainer
630 .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a></span>')
631 .find('span.current').css('opacity', '0');
632
633 newSlide.find('a')
634 .append(imageData.image)
635 .click(function(e) {
636 gallery.clickHandler(e, this);
637 });
638
639 var newCaption = 0;
640 if (this.$captionContainer) {
641 // Construct new hidden caption for the image
642 newCaption = this.$captionContainer
643 .append('<span class="image-caption current"></span>')
644 .find('span.current').css('opacity', '0')
645 .append(imageData.caption);
646 }
647
648 // Hide the loading conatiner
649 if (this.$loadingContainer) {
650 this.$loadingContainer.hide();
651 }
652
653 // Transition in the new image
654 if (this.onTransitionIn) {
655 this.onTransitionIn(newSlide, newCaption, isSync);
656 } else {
657 newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
658 if (newCaption)
659 newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
660 }
661
662 if (this.isSlideshowRunning) {
663 if (this.slideshowTimeout)
664 clearTimeout(this.slideshowTimeout);
665
666 this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
667 }
668
669 return this;
670 },
671
672 // Returns the current page index that should be shown for the currentImage
673 getCurrentPage: function() {
674 return Math.floor(this.currentImage.index / this.numThumbs);
675 },
676
677 // Applies the selected class to the current image's corresponding thumbnail.
678 // Also checks if the current page has changed and updates the displayed page of thumbnails if necessary.
679 syncThumbs: function() {
680 var page = this.getCurrentPage();
681 if (page != this.displayedPage)
682 this.updateThumbs();
683
684 // Remove existing selected class and add selected class to new thumb
685 var $thumbs = this.find('ul.thumbs').children();
686 $thumbs.filter('.selected').removeClass('selected');
687 $thumbs.eq(this.currentImage.index).addClass('selected');
688
689 return this;
690 },
691
692 // Performs transitions on the thumbnails container and updates the set of
693 // thumbnails that are to be displayed and the navigation controls.
694 // @param {Delegate} postTransitionOutHandler An optional delegate that is called after
695 // the thumbnails container has transitioned out and before the thumbnails are rebuilt.
696 updateThumbs: function(postTransitionOutHandler) {
697 var gallery = this;
698 var transitionOutCallback = function() {
699 // Call the Post-transition Out Handler
700 if (postTransitionOutHandler)
701 postTransitionOutHandler();
702
703 gallery.rebuildThumbs();
704
705 // Transition In the thumbsContainer
706 if (gallery.onPageTransitionIn)
707 gallery.onPageTransitionIn();
708 else
709 gallery.show();
710 };
711
712 // Transition Out the thumbsContainer
713 if (this.onPageTransitionOut) {
714 this.onPageTransitionOut(transitionOutCallback);
715 } else {
716 this.hide();
717 transitionOutCallback();
718 }
719
720 return this;
721 },
722
723 // Updates the set of thumbnails that are to be displayed and the navigation controls.
724 rebuildThumbs: function() {
725 var needsPagination = this.data.length > this.numThumbs;
726
727 // Rebuild top pager
728 if (this.enableTopPager) {
729 var $topPager = this.find('div.top');
730 if ($topPager.length == 0)
731 $topPager = this.prepend('<div class="top pagination"></div>').find('div.top');
732 else
733 $topPager.empty();
734
735 if (needsPagination)
736 this.buildPager($topPager);
737 }
738
739 // Rebuild bottom pager
740 if (this.enableBottomPager) {
741 var $bottomPager = this.find('div.bottom');
742 if ($bottomPager.length == 0)
743 $bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom');
744 else
745 $bottomPager.empty();
746
747 if (needsPagination)
748 this.buildPager($bottomPager);
749 }
750
751 var page = this.getCurrentPage();
752 var startIndex = page*this.numThumbs;
753 var stopIndex = startIndex+this.numThumbs-1;
754 if (stopIndex >= this.data.length)
755 stopIndex = this.data.length-1;
756
757 // Show/Hide thumbs
758 var $thumbsUl = this.find('ul.thumbs');
759 $thumbsUl.find('li').each(function(i) {
760 var $li = $(this);
761 if (i >= startIndex && i <= stopIndex) {
762 $li.show();
763 } else {
764 $li.hide();
765 }
766 });
767
768 this.displayedPage = page;
769
770 // Remove the noscript class from the thumbs container ul
771 $thumbsUl.removeClass('noscript');
772
773 return this;
774 },
775
776 // Returns the total number of pages required to display all the thumbnails.
777 getNumPages: function() {
778 return Math.ceil(this.data.length/this.numThumbs);
779 },
780
781 // Rebuilds the pager control in the specified matched element.
782 // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
783 buildPager: function(pager) {
784 var gallery = this;
785 var numPages = this.getNumPages();
786 var page = this.getCurrentPage();
787 var startIndex = page * this.numThumbs;
788 var pagesRemaining = this.maxPagesToShow - 1;
789
790 var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1;
791 if (pageNum > 0) {
792 var remainingPageCount = numPages - pageNum;
793 if (remainingPageCount < pagesRemaining) {
794 pageNum = pageNum - (pagesRemaining - remainingPageCount);
795 }
796 }
797
798 if (pageNum < 0) {
799 pageNum = 0;
800 }
801
802 // Prev Page Link
803 if (page > 0) {
804 var prevPage = startIndex - this.numThumbs;
805 pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>');
806 }
807
808 // Create First Page link if needed
809 if (pageNum > 0) {
810 this.buildPageLink(pager, 0, numPages);
811 if (pageNum > 1)
812 pager.append('<span class="ellipsis">&hellip;</span>');
813
814 pagesRemaining--;
815 }
816
817 // Page Index Links
818 while (pagesRemaining > 0) {
819 this.buildPageLink(pager, pageNum, numPages);
820 pagesRemaining--;
821 pageNum++;
822 }
823
824 // Create Last Page link if needed
825 if (pageNum < numPages) {
826 var lastPageNum = numPages - 1;
827 if (pageNum < lastPageNum)
828 pager.append('<span class="ellipsis">&hellip;</span>');
829
830 this.buildPageLink(pager, lastPageNum, numPages);
831 }
832
833 // Next Page Link
834 var nextPage = startIndex + this.numThumbs;
835 if (nextPage < this.data.length) {
836 pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>');
837 }
838
839 pager.find('a').click(function(e) {
840 gallery.clickHandler(e, this);
841 });
842
843 return this;
844 },
845
846 // Builds a single page link within a pager. This function is called by buildPager
847 // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
848 // @param {Integer} pageNum The page number of the page link to build.
849 // @param {Integer} numPages The total number of pages required to display all thumbnails.
850 buildPageLink: function(pager, pageNum, numPages) {
851 var pageLabel = pageNum + 1;
852 var currentPage = this.getCurrentPage();
853 if (pageNum == currentPage)
854 pager.append('<span class="current">'+pageLabel+'</span>');
855 else if (pageNum < numPages) {
856 var imageIndex = pageNum*this.numThumbs;
857 pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>');
858 }
859
860 return this;
861 }
862 });
863
864 // Now initialize the gallery
865 $.extend(this, defaults, settings);
866
867 // Verify the history plugin is available
868 if (this.enableHistory && !$.historyInit)
869 this.enableHistory = false;
870
871 // Select containers
872 if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel);
873 if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel);
874 if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel);
875
876 // Initialize the thumbails
877 this.initializeThumbs();
878
879 if (this.maxPagesToShow < 3)
880 this.maxPagesToShow = 3;
881
882 this.displayedPage = -1;
883 this.currentImage = this.data[0];
884 var gallery = this;
885
886 // Hide the loadingContainer
887 if (this.$loadingContainer)
888 this.$loadingContainer.hide();
889
890 // Setup controls
891 if (this.controlsContainerSel) {
892 this.$controlsContainer = $(this.controlsContainerSel).empty();
893
894 if (this.renderSSControls) {
895 if (this.autoStart) {
896 this.$controlsContainer
897 .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
898 } else {
899 this.$controlsContainer
900 .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
901 }
902
903 this.$controlsContainer.find('div.ss-controls a')
904 .click(function(e) {
905 gallery.toggleSlideshow();
906 e.preventDefault();
907 return false;
908 });
909 }
910
911 if (this.renderNavControls) {
912 this.$controlsContainer
913 .append('<div class="nav-controls"><a class="prev" rel="history" title="'+this.prevLinkText+'">'+this.prevLinkText+'</a><a class="next" rel="history" title="'+this.nextLinkText+'">'+this.nextLinkText+'</a></div>')
914 .find('div.nav-controls a')
915 .click(function(e) {
916 gallery.clickHandler(e, this);
917 });
918 }
919 }
920
921 var initFirstImage = !this.enableHistory || !location.hash;
922 if (this.enableHistory && location.hash) {
923 var hash = $.galleriffic.normalizeHash(location.hash);
924 var imageData = allImages[hash];
925 if (!imageData)
926 initFirstImage = true;
927 }
928
929 // Setup gallery to show the first image
930 if (initFirstImage)
931 this.gotoIndex(0, false, true);
932
933 // Setup Keyboard Navigation
934 if (this.enableKeyboardNavigation) {
935 $(document).keydown(function(e) {
936 var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
937 switch(key) {
938 case 32: // space
939 gallery.next();
940 e.preventDefault();
941 break;
942 case 33: // Page Up
943 gallery.previousPage();
944 e.preventDefault();
945 break;
946 case 34: // Page Down
947 gallery.nextPage();
948 e.preventDefault();
949 break;
950 case 35: // End
951 gallery.gotoIndex(gallery.data.length-1);
952 e.preventDefault();
953 break;
954 case 36: // Home
955 gallery.gotoIndex(0);
956 e.preventDefault();
957 break;
958 case 37: // left arrow
959 gallery.previous();
960 e.preventDefault();
961 break;
962 case 39: // right arrow
963 gallery.next();
964 e.preventDefault();
965 break;
966 }
967 });
968 }
969
970 // Auto start the slideshow
971 if (this.autoStart)
972 this.play();
973
974 // Kickoff Image Preloader after 1 second
975 setTimeout(function() { gallery.preloadInit(); }, 1000);
976
977 return this;
978 };
979 })(jQuery);