|
|
| (5 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| | {{AUC_Turkey}} | | {{AUC_Turkey}} |
| - |
| |
| - | <html>
| |
| - | <head>
| |
| - | <script type="text/javascript">/**
| |
| - | * jQuery Galleriffic plugin
| |
| - | *
| |
| - | * Copyright (c) 2008 Trent Foley (http://trentacular.com)
| |
| - | * Licensed under the MIT License:
| |
| - | * http://www.opensource.org/licenses/mit-license.php
| |
| - | *
| |
| - | * Much thanks to primary contributer Ponticlaro (http://www.ponticlaro.com)
| |
| - | */
| |
| - | ;(function($) {
| |
| - | // Globally keep track of all images by their unique hash. Each item is an image data object.
| |
| - | var allImages = {};
| |
| - | var imageCounter = 0;
| |
| - |
| |
| - | // Galleriffic static class
| |
| - | $.galleriffic = {
| |
| - | version: '2.0.1',
| |
| - |
| |
| - | // Strips invalid characters and any leading # characters
| |
| - | normalizeHash: function(hash) {
| |
| - | return hash.replace(/^.*#/, '').replace(/\?.*$/, '');
| |
| - | },
| |
| - |
| |
| - | getImage: function(hash) {
| |
| - | if (!hash)
| |
| - | return undefined;
| |
| - |
| |
| - | hash = $.galleriffic.normalizeHash(hash);
| |
| - | return allImages[hash];
| |
| - | },
| |
| - |
| |
| - | // Global function that looks up an image by its hash and displays the image.
| |
| - | // Returns false when an image is not found for the specified hash.
| |
| - | // @param {String} hash This is the unique hash value assigned to an image.
| |
| - | gotoImage: function(hash) {
| |
| - | var imageData = $.galleriffic.getImage(hash);
| |
| - | if (!imageData)
| |
| - | return false;
| |
| - |
| |
| - | var gallery = imageData.gallery;
| |
| - | gallery.gotoImage(imageData);
| |
| - |
| |
| - | return true;
| |
| - | },
| |
| - |
| |
| - | // Removes an image from its respective gallery by its hash.
| |
| - | // Returns false when an image is not found for the specified hash or the
| |
| - | // specified owner gallery does match the located images gallery.
| |
| - | // @param {String} hash This is the unique hash value assigned to an image.
| |
| - | // @param {Object} ownerGallery (Optional) When supplied, the located images
| |
| - | // gallery is verified to be the same as the specified owning gallery before
| |
| - | // performing the remove operation.
| |
| - | removeImageByHash: function(hash, ownerGallery) {
| |
| - | var imageData = $.galleriffic.getImage(hash);
| |
| - | if (!imageData)
| |
| - | return false;
| |
| - |
| |
| - | var gallery = imageData.gallery;
| |
| - | if (!(!ownerGallery || ownerGallery == gallery))
| |
| - | return false;
| |
| - |
| |
| - | return gallery.removeImageByIndex(imageData.index);
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | var defaults = {
| |
| - | delay: 3000,
| |
| - | numThumbs: 20,
| |
| - | preloadAhead: 40, // Set to -1 to preload all images
| |
| - | enableTopPager: false,
| |
| - | enableBottomPager: true,
| |
| - | maxPagesToShow: 7,
| |
| - | imageContainerSel: '',
| |
| - | captionContainerSel: '',
| |
| - | controlsContainerSel: '',
| |
| - | loadingContainerSel: '',
| |
| - | renderSSControls: true,
| |
| - | renderNavControls: true,
| |
| - | playLinkText: 'Play',
| |
| - | pauseLinkText: 'Pause',
| |
| - | prevLinkText: 'Previous',
| |
| - | nextLinkText: 'Next',
| |
| - | nextPageLinkText: 'Next ›',
| |
| - | prevPageLinkText: '‹ Prev',
| |
| - | enableHistory: false,
| |
| - | enableKeyboardNavigation: true,
| |
| - | autoStart: false,
| |
| - | syncTransitions: false,
| |
| - | defaultTransitionDuration: 1000,
| |
| - | onSlideChange: undefined, // accepts a delegate like such: function(prevIndex, nextIndex) { ... }
| |
| - | onTransitionOut: undefined, // accepts a delegate like such: function(slide, caption, isSync, callback) { ... }
| |
| - | onTransitionIn: undefined, // accepts a delegate like such: function(slide, caption, isSync) { ... }
| |
| - | onPageTransitionOut: undefined, // accepts a delegate like such: function(callback) { ... }
| |
| - | onPageTransitionIn: undefined, // accepts a delegate like such: function() { ... }
| |
| - | onImageAdded: undefined, // accepts a delegate like such: function(imageData, $li) { ... }
| |
| - | onImageRemoved: undefined // accepts a delegate like such: function(imageData, $li) { ... }
| |
| - | };
| |
| - |
| |
| - | // Primary Galleriffic initialization function that should be called on the thumbnail container.
| |
| - | $.fn.galleriffic = function(settings) {
| |
| - | // Extend Gallery Object
| |
| - | $.extend(this, {
| |
| - | // Returns the version of the script
| |
| - | version: $.galleriffic.version,
| |
| - |
| |
| - | // Current state of the slideshow
| |
| - | isSlideshowRunning: false,
| |
| - | slideshowTimeout: undefined,
| |
| - |
| |
| - | // This function is attached to the click event of generated hyperlinks within the gallery
| |
| - | clickHandler: function(e, link) {
| |
| - | this.pause();
| |
| - |
| |
| - | if (!this.enableHistory) {
| |
| - | // The href attribute holds the unique hash for an image
| |
| - | var hash = $.galleriffic.normalizeHash($(link).attr('href'));
| |
| - | $.galleriffic.gotoImage(hash);
| |
| - | e.preventDefault();
| |
| - | }
| |
| - | },
| |
| - |
| |
| - | // Appends an image to the end of the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
| |
| - | // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
| |
| - | appendImage: function(listItem) {
| |
| - | this.addImage(listItem, false, false);
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Inserts an image into the set of images. Argument listItem can be either a jQuery DOM element or arbitrary html.
| |
| - | // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
| |
| - | // @param {Integer} position The index within the gallery where the item shouold be added.
| |
| - | insertImage: function(listItem, position) {
| |
| - | this.addImage(listItem, false, true, position);
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Adds an image to the gallery and optionally inserts/appends it to the DOM (thumbExists)
| |
| - | // @param listItem Either a jQuery object or a string of html of the list item that is to be added to the gallery.
| |
| - | // @param {Boolean} thumbExists Specifies whether the thumbnail already exists in the DOM or if it needs to be added.
| |
| - | // @param {Boolean} insert Specifies whether the the image is appended to the end or inserted into the gallery.
| |
| - | // @param {Integer} position The index within the gallery where the item shouold be added.
| |
| - | addImage: function(listItem, thumbExists, insert, position) {
| |
| - | var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;
| |
| - | var $aThumb = $li.find('a.thumb');
| |
| - | var slideUrl = $aThumb.attr('href');
| |
| - | var title = $aThumb.attr('title');
| |
| - | var $caption = $li.find('.caption').remove();
| |
| - | var hash = $aThumb.attr('name');
| |
| - |
| |
| - | // Increment the image counter
| |
| - | imageCounter++;
| |
| - |
| |
| - | // Autogenerate a hash value if none is present or if it is a duplicate
| |
| - | if (!hash || allImages[''+hash]) {
| |
| - | hash = imageCounter;
| |
| - | }
| |
| - |
| |
| - | // Set position to end when not specified
| |
| - | if (!insert)
| |
| - | position = this.data.length;
| |
| - |
| |
| - | var imageData = {
| |
| - | title:title,
| |
| - | slideUrl:slideUrl,
| |
| - | caption:$caption,
| |
| - | hash:hash,
| |
| - | gallery:this,
| |
| - | index:position
| |
| - | };
| |
| - |
| |
| - | // Add the imageData to this gallery's array of images
| |
| - | if (insert) {
| |
| - | this.data.splice(position, 0, imageData);
| |
| - |
| |
| - | // Reset index value on all imageData objects
| |
| - | this.updateIndices(position);
| |
| - | }
| |
| - | else {
| |
| - | this.data.push(imageData);
| |
| - | }
| |
| - |
| |
| - | var gallery = this;
| |
| - |
| |
| - | // Add the element to the DOM
| |
| - | if (!thumbExists) {
| |
| - | // Update thumbs passing in addition post transition out handler
| |
| - | this.updateThumbs(function() {
| |
| - | var $thumbsUl = gallery.find('ul.thumbs');
| |
| - | if (insert)
| |
| - | $thumbsUl.children(':eq('+position+')').before($li);
| |
| - | else
| |
| - | $thumbsUl.append($li);
| |
| - |
| |
| - | if (gallery.onImageAdded)
| |
| - | gallery.onImageAdded(imageData, $li);
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | // Register the image globally
| |
| - | allImages[''+hash] = imageData;
| |
| - |
| |
| - | // Setup attributes and click handler
| |
| - | $aThumb.attr('rel', 'history')
| |
| - | .attr('href', '#'+hash)
| |
| - | .removeAttr('name')
| |
| - | .click(function(e) {
| |
| - | gallery.clickHandler(e, this);
| |
| - | });
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Removes an image from the gallery based on its index.
| |
| - | // Returns false when the index is out of range.
| |
| - | removeImageByIndex: function(index) {
| |
| - | if (index < 0 || index >= this.data.length)
| |
| - | return false;
| |
| - |
| |
| - | var imageData = this.data[index];
| |
| - | if (!imageData)
| |
| - | return false;
| |
| - |
| |
| - | this.removeImage(imageData);
| |
| - |
| |
| - | return true;
| |
| - | },
| |
| - |
| |
| - | // Convenience method that simply calls the global removeImageByHash method.
| |
| - | removeImageByHash: function(hash) {
| |
| - | return $.galleriffic.removeImageByHash(hash, this);
| |
| - | },
| |
| - |
| |
| - | // Removes an image from the gallery.
| |
| - | removeImage: function(imageData) {
| |
| - | var index = imageData.index;
| |
| - |
| |
| - | // Remove the image from the gallery data array
| |
| - | this.data.splice(index, 1);
| |
| - |
| |
| - | // Remove the global registration
| |
| - | delete allImages[''+imageData.hash];
| |
| - |
| |
| - | // Remove the image's list item from the DOM
| |
| - | this.updateThumbs(function() {
| |
| - | var $li = gallery.find('ul.thumbs')
| |
| - | .children(':eq('+index+')')
| |
| - | .remove();
| |
| - |
| |
| - | if (gallery.onImageRemoved)
| |
| - | gallery.onImageRemoved(imageData, $li);
| |
| - | });
| |
| - |
| |
| - | // Update each image objects index value
| |
| - | this.updateIndices(index);
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Updates the index values of the each of the images in the gallery after the specified index
| |
| - | updateIndices: function(startIndex) {
| |
| - | for (i = startIndex; i < this.data.length; i++) {
| |
| - | this.data[i].index = i;
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Scraped the thumbnail container for thumbs and adds each to the gallery
| |
| - | initializeThumbs: function() {
| |
| - | this.data = [];
| |
| - | var gallery = this;
| |
| - |
| |
| - | this.find('ul.thumbs > li').each(function(i) {
| |
| - | gallery.addImage($(this), true, false);
| |
| - | });
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | isPreloadComplete: false,
| |
| - |
| |
| - | // Initalizes the image preloader
| |
| - | preloadInit: function() {
| |
| - | if (this.preloadAhead == 0) return this;
| |
| - |
| |
| - | this.preloadStartIndex = this.currentImage.index;
| |
| - | var nextIndex = this.getNextIndex(this.preloadStartIndex);
| |
| - | return this.preloadRecursive(this.preloadStartIndex, nextIndex);
| |
| - | },
| |
| - |
| |
| - | // Changes the location in the gallery the preloader should work
| |
| - | // @param {Integer} index The index of the image where the preloader should restart at.
| |
| - | preloadRelocate: function(index) {
| |
| - | // By changing this startIndex, the current preload script will restart
| |
| - | this.preloadStartIndex = index;
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Recursive function that performs the image preloading
| |
| - | // @param {Integer} startIndex The index of the first image the current preloader started on.
| |
| - | // @param {Integer} currentIndex The index of the current image to preload.
| |
| - | preloadRecursive: function(startIndex, currentIndex) {
| |
| - | // Check if startIndex has been relocated
| |
| - | if (startIndex != this.preloadStartIndex) {
| |
| - | var nextIndex = this.getNextIndex(this.preloadStartIndex);
| |
| - | return this.preloadRecursive(this.preloadStartIndex, nextIndex);
| |
| - | }
| |
| - |
| |
| - | var gallery = this;
| |
| - |
| |
| - | // Now check for preloadAhead count
| |
| - | var preloadCount = currentIndex - startIndex;
| |
| - | if (preloadCount < 0)
| |
| - | preloadCount = this.data.length-1-startIndex+currentIndex;
| |
| - | if (!(!(this.preloadAhead >= 0) || !(preloadCount > this.preloadAhead))) {
| |
| - | // Do this in order to keep checking for relocated start index
| |
| - | setTimeout(function() { gallery.preloadRecursive(startIndex, currentIndex); }, 500);
| |
| - | return this;
| |
| - | }
| |
| - |
| |
| - | var imageData = this.data[currentIndex];
| |
| - | if (!imageData)
| |
| - | return this;
| |
| - |
| |
| - | // If already loaded, continue
| |
| - | if (imageData.image)
| |
| - | return this.preloadNext(startIndex, currentIndex);
| |
| - |
| |
| - | // Preload the image
| |
| - | var image = new Image();
| |
| - |
| |
| - | image.onload = function() {
| |
| - | imageData.image = this;
| |
| - | gallery.preloadNext(startIndex, currentIndex);
| |
| - | };
| |
| - |
| |
| - | image.alt = imageData.title;
| |
| - | image.src = imageData.slideUrl;
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Called by preloadRecursive in order to preload the next image after the previous has loaded.
| |
| - | // @param {Integer} startIndex The index of the first image the current preloader started on.
| |
| - | // @param {Integer} currentIndex The index of the current image to preload.
| |
| - | preloadNext: function(startIndex, currentIndex) {
| |
| - | var nextIndex = this.getNextIndex(currentIndex);
| |
| - | if (nextIndex == startIndex) {
| |
| - | this.isPreloadComplete = true;
| |
| - | } else {
| |
| - | // Use setTimeout to free up thread
| |
| - | var gallery = this;
| |
| - | setTimeout(function() { gallery.preloadRecursive(startIndex, nextIndex); }, 100);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Safe way to get the next image index relative to the current image.
| |
| - | // If the current image is the last, returns 0
| |
| - | getNextIndex: function(index) {
| |
| - | var nextIndex = index+1;
| |
| - | if (nextIndex >= this.data.length)
| |
| - | nextIndex = 0;
| |
| - | return nextIndex;
| |
| - | },
| |
| - |
| |
| - | // Safe way to get the previous image index relative to the current image.
| |
| - | // If the current image is the first, return the index of the last image in the gallery.
| |
| - | getPrevIndex: function(index) {
| |
| - | var prevIndex = index-1;
| |
| - | if (prevIndex < 0)
| |
| - | prevIndex = this.data.length-1;
| |
| - | return prevIndex;
| |
| - | },
| |
| - |
| |
| - | // Pauses the slideshow
| |
| - | pause: function() {
| |
| - | this.isSlideshowRunning = false;
| |
| - | if (this.slideshowTimeout) {
| |
| - | clearTimeout(this.slideshowTimeout);
| |
| - | this.slideshowTimeout = undefined;
| |
| - | }
| |
| - |
| |
| - | if (this.$controlsContainer) {
| |
| - | this.$controlsContainer
| |
| - | .find('div.ss-controls a').removeClass().addClass('play')
| |
| - | .attr('title', this.playLinkText)
| |
| - | .attr('href', '#play')
| |
| - | .html(this.playLinkText);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Plays the slideshow
| |
| - | play: function() {
| |
| - | this.isSlideshowRunning = true;
| |
| - |
| |
| - | if (this.$controlsContainer) {
| |
| - | this.$controlsContainer
| |
| - | .find('div.ss-controls a').removeClass().addClass('pause')
| |
| - | .attr('title', this.pauseLinkText)
| |
| - | .attr('href', '#pause')
| |
| - | .html(this.pauseLinkText);
| |
| - | }
| |
| - |
| |
| - | if (!this.slideshowTimeout) {
| |
| - | var gallery = this;
| |
| - | this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Toggles the state of the slideshow (playing/paused)
| |
| - | toggleSlideshow: function() {
| |
| - | if (this.isSlideshowRunning)
| |
| - | this.pause();
| |
| - | else
| |
| - | this.play();
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Advances the slideshow to the next image and delegates navigation to the
| |
| - | // history plugin when history is enabled
| |
| - | // enableHistory is true
| |
| - | ssAdvance: function() {
| |
| - | if (this.isSlideshowRunning)
| |
| - | this.next(true);
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Advances the gallery to the next image.
| |
| - | // @param {Boolean} dontPause Specifies whether to pause the slideshow.
| |
| - | // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
| |
| - | next: function(dontPause, bypassHistory) {
| |
| - | this.gotoIndex(this.getNextIndex(this.currentImage.index), dontPause, bypassHistory);
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Navigates to the previous image in the gallery.
| |
| - | // @param {Boolean} dontPause Specifies whether to pause the slideshow.
| |
| - | // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
| |
| - | previous: function(dontPause, bypassHistory) {
| |
| - | this.gotoIndex(this.getPrevIndex(this.currentImage.index), dontPause, bypassHistory);
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Navigates to the next page in the gallery.
| |
| - | // @param {Boolean} dontPause Specifies whether to pause the slideshow.
| |
| - | // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
| |
| - | nextPage: function(dontPause, bypassHistory) {
| |
| - | var page = this.getCurrentPage();
| |
| - | var lastPage = this.getNumPages() - 1;
| |
| - | if (page < lastPage) {
| |
| - | var startIndex = page * this.numThumbs;
| |
| - | var nextPage = startIndex + this.numThumbs;
| |
| - | this.gotoIndex(nextPage, dontPause, bypassHistory);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Navigates to the previous page in the gallery.
| |
| - | // @param {Boolean} dontPause Specifies whether to pause the slideshow.
| |
| - | // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
| |
| - | previousPage: function(dontPause, bypassHistory) {
| |
| - | var page = this.getCurrentPage();
| |
| - | if (page > 0) {
| |
| - | var startIndex = page * this.numThumbs;
| |
| - | var prevPage = startIndex - this.numThumbs;
| |
| - | this.gotoIndex(prevPage, dontPause, bypassHistory);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Navigates to the image at the specified index in the gallery
| |
| - | // @param {Integer} index The index of the image in the gallery to display.
| |
| - | // @param {Boolean} dontPause Specifies whether to pause the slideshow.
| |
| - | // @param {Boolean} bypassHistory Specifies whether to delegate navigation to the history plugin when history is enabled.
| |
| - | gotoIndex: function(index, dontPause, bypassHistory) {
| |
| - | if (!dontPause)
| |
| - | this.pause();
| |
| - |
| |
| - | if (index < 0) index = 0;
| |
| - | else if (index >= this.data.length) index = this.data.length-1;
| |
| - |
| |
| - | var imageData = this.data[index];
| |
| - |
| |
| - | if (!(bypassHistory || !this.enableHistory))
| |
| - | $.historyLoad(String(imageData.hash)); // At the moment, historyLoad only accepts string arguments
| |
| - | else
| |
| - | this.gotoImage(imageData);
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // This function is garaunteed to be called anytime a gallery slide changes.
| |
| - | // @param {Object} imageData An object holding the image metadata of the image to navigate to.
| |
| - | gotoImage: function(imageData) {
| |
| - | var index = imageData.index;
| |
| - |
| |
| - | if (this.onSlideChange)
| |
| - | this.onSlideChange(this.currentImage.index, index);
| |
| - |
| |
| - | this.currentImage = imageData;
| |
| - | this.preloadRelocate(index);
| |
| - |
| |
| - | this.refresh();
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Returns the default transition duration value. The value is halved when not
| |
| - | // performing a synchronized transition.
| |
| - | // @param {Boolean} isSync Specifies whether the transitions are synchronized.
| |
| - | getDefaultTransitionDuration: function(isSync) {
| |
| - | if (isSync)
| |
| - | return this.defaultTransitionDuration;
| |
| - | return this.defaultTransitionDuration / 2;
| |
| - | },
| |
| - |
| |
| - | // Rebuilds the slideshow image and controls and performs transitions
| |
| - | refresh: function() {
| |
| - | var imageData = this.currentImage;
| |
| - | if (!imageData)
| |
| - | return this;
| |
| - |
| |
| - | var index = imageData.index;
| |
| - |
| |
| - | // Update Controls
| |
| - | if (this.$controlsContainer) {
| |
| - | this.$controlsContainer
| |
| - | .find('div.nav-controls a.prev').attr('href', '#'+this.data[this.getPrevIndex(index)].hash).end()
| |
| - | .find('div.nav-controls a.next').attr('href', '#'+this.data[this.getNextIndex(index)].hash);
| |
| - | }
| |
| - |
| |
| - | var previousSlide = this.$imageContainer.find('span.current').addClass('previous').removeClass('current');
| |
| - | var previousCaption = 0;
| |
| - |
| |
| - | if (this.$captionContainer) {
| |
| - | previousCaption = this.$captionContainer.find('span.current').addClass('previous').removeClass('current');
| |
| - | }
| |
| - |
| |
| - | // Perform transitions simultaneously if syncTransitions is true and the next image is already preloaded
| |
| - | var isSync = !(!this.syncTransitions || !imageData.image);
| |
| - |
| |
| - | // Flag we are transitioning
| |
| - | var isTransitioning = true;
| |
| - | var gallery = this;
| |
| - |
| |
| - | var transitionOutCallback = function() {
| |
| - | // Flag that the transition has completed
| |
| - | isTransitioning = false;
| |
| - |
| |
| - | // Remove the old slide
| |
| - | previousSlide.remove();
| |
| - |
| |
| - | // Remove old caption
| |
| - | if (previousCaption)
| |
| - | previousCaption.remove();
| |
| - |
| |
| - | if (!isSync) {
| |
| - | if (!(!imageData.image || imageData.hash != gallery.data[gallery.currentImage.index].hash)) {
| |
| - | gallery.buildImage(imageData, isSync);
| |
| - | } else {
| |
| - | // Show loading container
| |
| - | if (gallery.$loadingContainer) {
| |
| - | gallery.$loadingContainer.show();
| |
| - | }
| |
| - | }
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | if (previousSlide.length == 0) {
| |
| - | // For the first slide, the previous slide will be empty, so we will call the callback immediately
| |
| - | transitionOutCallback();
| |
| - | } else {
| |
| - | if (this.onTransitionOut) {
| |
| - | this.onTransitionOut(previousSlide, previousCaption, isSync, transitionOutCallback);
| |
| - | } else {
| |
| - | previousSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0, transitionOutCallback);
| |
| - | if (previousCaption)
| |
| - | previousCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 0.0);
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | // Go ahead and begin transitioning in of next image
| |
| - | if (isSync)
| |
| - | this.buildImage(imageData, isSync);
| |
| - |
| |
| - | if (!imageData.image) {
| |
| - | var image = new Image();
| |
| - |
| |
| - | // Wire up mainImage onload event
| |
| - | image.onload = function() {
| |
| - | imageData.image = this;
| |
| - |
| |
| - | // Only build image if the out transition has completed and we are still on the same image hash
| |
| - | if (!(isTransitioning || imageData.hash != gallery.data[gallery.currentImage.index].hash)) {
| |
| - | gallery.buildImage(imageData, isSync);
| |
| - | }
| |
| - | };
| |
| - |
| |
| - | // set alt and src
| |
| - | image.alt = imageData.title;
| |
| - | image.src = imageData.slideUrl;
| |
| - | }
| |
| - |
| |
| - | // This causes the preloader (if still running) to relocate out from the currentIndex
| |
| - | this.relocatePreload = true;
| |
| - |
| |
| - | return this.syncThumbs();
| |
| - | },
| |
| - |
| |
| - | // Called by the refresh method after the previous image has been transitioned out or at the same time
| |
| - | // as the out transition when performing a synchronous transition.
| |
| - | // @param {Object} imageData An object holding the image metadata of the image to build.
| |
| - | // @param {Boolean} isSync Specifies whether the transitions are synchronized.
| |
| - | buildImage: function(imageData, isSync) {
| |
| - | var gallery = this;
| |
| - | var nextIndex = this.getNextIndex(imageData.index);
| |
| - |
| |
| - | // Construct new hidden span for the image
| |
| - | var newSlide = this.$imageContainer
| |
| - | .append('<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'"> </a></span>')
| |
| - | .find('span.current').css('opacity', '0');
| |
| - |
| |
| - | newSlide.find('a')
| |
| - | .append(imageData.image)
| |
| - | .click(function(e) {
| |
| - | gallery.clickHandler(e, this);
| |
| - | });
| |
| - |
| |
| - | var newCaption = 0;
| |
| - | if (this.$captionContainer) {
| |
| - | // Construct new hidden caption for the image
| |
| - | newCaption = this.$captionContainer
| |
| - | .append('<span class="image-caption current"></span>')
| |
| - | .find('span.current').css('opacity', '0')
| |
| - | .append(imageData.caption);
| |
| - | }
| |
| - |
| |
| - | // Hide the loading conatiner
| |
| - | if (this.$loadingContainer) {
| |
| - | this.$loadingContainer.hide();
| |
| - | }
| |
| - |
| |
| - | // Transition in the new image
| |
| - | if (this.onTransitionIn) {
| |
| - | this.onTransitionIn(newSlide, newCaption, isSync);
| |
| - | } else {
| |
| - | newSlide.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
| |
| - | if (newCaption)
| |
| - | newCaption.fadeTo(this.getDefaultTransitionDuration(isSync), 1.0);
| |
| - | }
| |
| - |
| |
| - | if (this.isSlideshowRunning) {
| |
| - | if (this.slideshowTimeout)
| |
| - | clearTimeout(this.slideshowTimeout);
| |
| - |
| |
| - | this.slideshowTimeout = setTimeout(function() { gallery.ssAdvance(); }, this.delay);
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Returns the current page index that should be shown for the currentImage
| |
| - | getCurrentPage: function() {
| |
| - | return Math.floor(this.currentImage.index / this.numThumbs);
| |
| - | },
| |
| - |
| |
| - | // Applies the selected class to the current image's corresponding thumbnail.
| |
| - | // Also checks if the current page has changed and updates the displayed page of thumbnails if necessary.
| |
| - | syncThumbs: function() {
| |
| - | var page = this.getCurrentPage();
| |
| - | if (page != this.displayedPage)
| |
| - | this.updateThumbs();
| |
| - |
| |
| - | // Remove existing selected class and add selected class to new thumb
| |
| - | var $thumbs = this.find('ul.thumbs').children();
| |
| - | $thumbs.filter('.selected').removeClass('selected');
| |
| - | $thumbs.eq(this.currentImage.index).addClass('selected');
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Performs transitions on the thumbnails container and updates the set of
| |
| - | // thumbnails that are to be displayed and the navigation controls.
| |
| - | // @param {Delegate} postTransitionOutHandler An optional delegate that is called after
| |
| - | // the thumbnails container has transitioned out and before the thumbnails are rebuilt.
| |
| - | updateThumbs: function(postTransitionOutHandler) {
| |
| - | var gallery = this;
| |
| - | var transitionOutCallback = function() {
| |
| - | // Call the Post-transition Out Handler
| |
| - | if (postTransitionOutHandler)
| |
| - | postTransitionOutHandler();
| |
| - |
| |
| - | gallery.rebuildThumbs();
| |
| - |
| |
| - | // Transition In the thumbsContainer
| |
| - | if (gallery.onPageTransitionIn)
| |
| - | gallery.onPageTransitionIn();
| |
| - | else
| |
| - | gallery.show();
| |
| - | };
| |
| - |
| |
| - | // Transition Out the thumbsContainer
| |
| - | if (this.onPageTransitionOut) {
| |
| - | this.onPageTransitionOut(transitionOutCallback);
| |
| - | } else {
| |
| - | this.hide();
| |
| - | transitionOutCallback();
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Updates the set of thumbnails that are to be displayed and the navigation controls.
| |
| - | rebuildThumbs: function() {
| |
| - | var needsPagination = this.data.length > this.numThumbs;
| |
| - |
| |
| - | // Rebuild top pager
| |
| - | if (this.enableTopPager) {
| |
| - | var $topPager = this.find('div.top');
| |
| - | if ($topPager.length == 0)
| |
| - | $topPager = this.prepend('<div class="top pagination"></div>').find('div.top');
| |
| - | else
| |
| - | $topPager.empty();
| |
| - |
| |
| - | if (needsPagination)
| |
| - | this.buildPager($topPager);
| |
| - | }
| |
| - |
| |
| - | // Rebuild bottom pager
| |
| - | if (this.enableBottomPager) {
| |
| - | var $bottomPager = this.find('div.bottom');
| |
| - | if ($bottomPager.length == 0)
| |
| - | $bottomPager = this.append('<div class="bottom pagination"></div>').find('div.bottom');
| |
| - | else
| |
| - | $bottomPager.empty();
| |
| - |
| |
| - | if (needsPagination)
| |
| - | this.buildPager($bottomPager);
| |
| - | }
| |
| - |
| |
| - | var page = this.getCurrentPage();
| |
| - | var startIndex = page*this.numThumbs;
| |
| - | var stopIndex = startIndex+this.numThumbs-1;
| |
| - | if (stopIndex >= this.data.length)
| |
| - | stopIndex = this.data.length-1;
| |
| - |
| |
| - | // Show/Hide thumbs
| |
| - | var $thumbsUl = this.find('ul.thumbs');
| |
| - | $thumbsUl.find('li').each(function(i) {
| |
| - | var $li = $(this);
| |
| - | if (!(i < startIndex || i > stopIndex)) {
| |
| - | $li.show();
| |
| - | } else {
| |
| - | $li.hide();
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | this.displayedPage = page;
| |
| - |
| |
| - | // Remove the noscript class from the thumbs container ul
| |
| - | $thumbsUl.removeClass('noscript');
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Returns the total number of pages required to display all the thumbnails.
| |
| - | getNumPages: function() {
| |
| - | return Math.ceil(this.data.length/this.numThumbs);
| |
| - | },
| |
| - |
| |
| - | // Rebuilds the pager control in the specified matched element.
| |
| - | // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
| |
| - | buildPager: function(pager) {
| |
| - | var gallery = this;
| |
| - | var numPages = this.getNumPages();
| |
| - | var page = this.getCurrentPage();
| |
| - | var startIndex = page * this.numThumbs;
| |
| - | var pagesRemaining = this.maxPagesToShow - 1;
| |
| - |
| |
| - | var pageNum = page - Math.floor((this.maxPagesToShow - 1) / 2) + 1;
| |
| - | if (pageNum > 0) {
| |
| - | var remainingPageCount = numPages - pageNum;
| |
| - | if (remainingPageCount < pagesRemaining) {
| |
| - | pageNum = pageNum - (pagesRemaining - remainingPageCount);
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | if (pageNum < 0) {
| |
| - | pageNum = 0;
| |
| - | }
| |
| - |
| |
| - | // Prev Page Link
| |
| - | if (page > 0) {
| |
| - | var prevPage = startIndex - this.numThumbs;
| |
| - | pager.append('<a rel="history" href="#'+this.data[prevPage].hash+'" title="'+this.prevPageLinkText+'">'+this.prevPageLinkText+'</a>');
| |
| - | }
| |
| - |
| |
| - | // Create First Page link if needed
| |
| - | if (pageNum > 0) {
| |
| - | this.buildPageLink(pager, 0, numPages);
| |
| - | if (pageNum > 1)
| |
| - | pager.append('<span class="ellipsis">…</span>');
| |
| - |
| |
| - | pagesRemaining--;
| |
| - | }
| |
| - |
| |
| - | // Page Index Links
| |
| - | while (pagesRemaining > 0) {
| |
| - | this.buildPageLink(pager, pageNum, numPages);
| |
| - | pagesRemaining--;
| |
| - | pageNum++;
| |
| - | }
| |
| - |
| |
| - | // Create Last Page link if needed
| |
| - | if (pageNum < numPages) {
| |
| - | var lastPageNum = numPages - 1;
| |
| - | if (pageNum < lastPageNum)
| |
| - | pager.append('<span class="ellipsis">…</span>');
| |
| - |
| |
| - | this.buildPageLink(pager, lastPageNum, numPages);
| |
| - | }
| |
| - |
| |
| - | // Next Page Link
| |
| - | var nextPage = startIndex + this.numThumbs;
| |
| - | if (nextPage < this.data.length) {
| |
| - | pager.append('<a rel="history" href="#'+this.data[nextPage].hash+'" title="'+this.nextPageLinkText+'">'+this.nextPageLinkText+'</a>');
| |
| - | }
| |
| - |
| |
| - | pager.find('a').click(function(e) {
| |
| - | gallery.clickHandler(e, this);
| |
| - | });
| |
| - |
| |
| - | return this;
| |
| - | },
| |
| - |
| |
| - | // Builds a single page link within a pager. This function is called by buildPager
| |
| - | // @param {jQuery} pager A jQuery element set matching the particular pager to be rebuilt.
| |
| - | // @param {Integer} pageNum The page number of the page link to build.
| |
| - | // @param {Integer} numPages The total number of pages required to display all thumbnails.
| |
| - | buildPageLink: function(pager, pageNum, numPages) {
| |
| - | var pageLabel = pageNum + 1;
| |
| - | var currentPage = this.getCurrentPage();
| |
| - | if (pageNum == currentPage)
| |
| - | pager.append('<span class="current">'+pageLabel+'</span>');
| |
| - | else if (pageNum < numPages) {
| |
| - | var imageIndex = pageNum*this.numThumbs;
| |
| - | pager.append('<a rel="history" href="#'+this.data[imageIndex].hash+'" title="'+pageLabel+'">'+pageLabel+'</a>');
| |
| - | }
| |
| - |
| |
| - | return this;
| |
| - | }
| |
| - | });
| |
| - |
| |
| - | // Now initialize the gallery
| |
| - | $.extend(this, defaults, settings);
| |
| - |
| |
| - | // Verify the history plugin is available
| |
| - | if (!(!this.enableHistory || $.historyInit))
| |
| - | this.enableHistory = false;
| |
| - |
| |
| - | // Select containers
| |
| - | if (this.imageContainerSel) this.$imageContainer = $(this.imageContainerSel);
| |
| - | if (this.captionContainerSel) this.$captionContainer = $(this.captionContainerSel);
| |
| - | if (this.loadingContainerSel) this.$loadingContainer = $(this.loadingContainerSel);
| |
| - |
| |
| - | // Initialize the thumbails
| |
| - | this.initializeThumbs();
| |
| - |
| |
| - | if (this.maxPagesToShow < 3)
| |
| - | this.maxPagesToShow = 3;
| |
| - |
| |
| - | this.displayedPage = -1;
| |
| - | this.currentImage = this.data[0];
| |
| - | var gallery = this;
| |
| - |
| |
| - | // Hide the loadingContainer
| |
| - | if (this.$loadingContainer)
| |
| - | this.$loadingContainer.hide();
| |
| - |
| |
| - | // Setup controls
| |
| - | if (this.controlsContainerSel) {
| |
| - | this.$controlsContainer = $(this.controlsContainerSel).empty();
| |
| - |
| |
| - | if (this.renderSSControls) {
| |
| - | if (this.autoStart) {
| |
| - | this.$controlsContainer
| |
| - | .append('<div class="ss-controls"><a href="#pause" class="pause" title="'+this.pauseLinkText+'">'+this.pauseLinkText+'</a></div>');
| |
| - | } else {
| |
| - | this.$controlsContainer
| |
| - | .append('<div class="ss-controls"><a href="#play" class="play" title="'+this.playLinkText+'">'+this.playLinkText+'</a></div>');
| |
| - | }
| |
| - |
| |
| - | this.$controlsContainer.find('div.ss-controls a')
| |
| - | .click(function(e) {
| |
| - | gallery.toggleSlideshow();
| |
| - | e.preventDefault();
| |
| - | return false;
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | if (this.renderNavControls) {
| |
| - | this.$controlsContainer
| |
| - | .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>')
| |
| - | .find('div.nav-controls a')
| |
| - | .click(function(e) {
| |
| - | gallery.clickHandler(e, this);
| |
| - | });
| |
| - | }
| |
| - | }
| |
| - |
| |
| - | var initFirstImage = !this.enableHistory || !location.hash;
| |
| - | if (!(!this.enableHistory || !location.hash)) {
| |
| - | var hash = $.galleriffic.normalizeHash(location.hash);
| |
| - | var imageData = allImages[hash];
| |
| - | if (!imageData)
| |
| - | initFirstImage = true;
| |
| - | }
| |
| - |
| |
| - | // Setup gallery to show the first image
| |
| - | if (initFirstImage)
| |
| - | this.gotoIndex(0, false, true);
| |
| - |
| |
| - | // Setup Keyboard Navigation
| |
| - | if (this.enableKeyboardNavigation) {
| |
| - | $(document).keydown(function(e) {
| |
| - | var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
| |
| - | switch(key) {
| |
| - | case 32: // space
| |
| - | gallery.next();
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 33: // Page Up
| |
| - | gallery.previousPage();
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 34: // Page Down
| |
| - | gallery.nextPage();
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 35: // End
| |
| - | gallery.gotoIndex(gallery.data.length-1);
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 36: // Home
| |
| - | gallery.gotoIndex(0);
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 37: // left arrow
| |
| - | gallery.previous();
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | case 39: // right arrow
| |
| - | gallery.next();
| |
| - | e.preventDefault();
| |
| - | break;
| |
| - | }
| |
| - | });
| |
| - | }
| |
| - |
| |
| - | // Auto start the slideshow
| |
| - | if (this.autoStart)
| |
| - | this.play();
| |
| - |
| |
| - | // Kickoff Image Preloader after 1 second
| |
| - | setTimeout(function() { gallery.preloadInit(); }, 1000);
| |
| - |
| |
| - | return this;
| |
| - | };
| |
| - | })(jQuery);
| |
| - | </script>
| |
| - | <style type="text/css">
| |
| - | div#page html, body {
| |
| - | margin:0;
| |
| - | padding:0;
| |
| - | }
| |
| - | div#page body{
| |
| - | text-align: center;
| |
| - | font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Helvetica, Arial, sans-serif;
| |
| - | background-color: #eee;
| |
| - | color: #444;
| |
| - | font-size: 75%;
| |
| - | }
| |
| - | div#page a{
| |
| - | color: #27D;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - | div#page a:focus, a:hover, a:active {
| |
| - | text-decoration: underline;
| |
| - | }
| |
| - | div#page p, li {
| |
| - | line-height: 1.8em;
| |
| - | }
| |
| - | div#page h1, h2 {
| |
| - | font-family: "Trebuchet MS", Verdana, sans-serif;
| |
| - | margin: 0 0 10px 0;
| |
| - | letter-spacing:-1px;
| |
| - | }
| |
| - | div#page h1 {
| |
| - | padding: 0;
| |
| - | font-size: 3em;
| |
| - | color: #333;
| |
| - | }
| |
| - | div#page h2 {
| |
| - | padding-top: 10px;
| |
| - | font-size:2em;
| |
| - | }
| |
| - | div#page pre {
| |
| - | font-size: 1.2em;
| |
| - | line-height: 1.2em;
| |
| - | overflow-x: auto;
| |
| - | }
| |
| - | div#page {
| |
| - | width: 7500px;
| |
| - | margin: 0 auto;
| |
| - | text-align: left;
| |
| - | }
| |
| - | div#page div#container {
| |
| - | padding: 20px;
| |
| - | }
| |
| - | div#page div#ads {
| |
| - | clear: both;
| |
| - | padding: 12px 0 12px 66px;
| |
| - | }
| |
| - | div#page div#footer {
| |
| - | clear: both;
| |
| - | color: #777;
| |
| - | margin: 0 auto;
| |
| - | padding: 20px 0 40px;
| |
| - | text-align: center;
| |
| - | }
| |
| - | div#page div.content {
| |
| - | /* The display of content is enabled using jQuery so that the slideshow content won't display unless javascript is enabled. */
| |
| - | display: none;
| |
| - | float: right;
| |
| - | width: 550px;
| |
| - | }
| |
| - | div#page div.content a, div.navigation a {
| |
| - | text-decoration: none;
| |
| - | color: #777;
| |
| - | }
| |
| - | div#page div.content a:focus, div.content a:hover, div.content a:active {
| |
| - | text-decoration: underline;
| |
| - | }
| |
| - | div#page div.controls {
| |
| - | margin-top: 5px;
| |
| - | height: 23px;
| |
| - | display:none;
| |
| - | }
| |
| - | div#page div.controls a {
| |
| - | padding: 5px;
| |
| - | display:none;
| |
| - | }
| |
| - |
| |
| - | div#page div.slideshow-container {
| |
| - | position: relative;
| |
| - | z-index: -99999;
| |
| - | clear: both;
| |
| - | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
| - | }
| |
| - | div#page div.loader {
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | background-image: url('loader.gif');
| |
| - | background-repeat: no-repeat;
| |
| - | background-position: center;
| |
| - | width: 550px;
| |
| - | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
| - | }
| |
| - | div#page div.slideshow {
| |
| - |
| |
| - | }
| |
| - | div#page div.slideshow span.image-wrapper {
| |
| - | display: block;
| |
| - | position: absolute;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - | div#page div.slideshow a.advance-link {
| |
| - | display: block;
| |
| - | width: 550px;
| |
| - | height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
| - | line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
| |
| - | text-align: center;
| |
| - | }
| |
| - | div#page div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
| |
| - | text-decoration: none;
| |
| - | }
| |
| - | div#page div.slideshow img {
| |
| - | vertical-align: middle;
| |
| - | border: 1px solid #ccc;
| |
| - | }
| |
| - | div#page div.download {
| |
| - | display:none;
| |
| - | }
| |
| - | div#page div.caption-container {
| |
| - | position: relative;
| |
| - | clear: left;
| |
| - | height: 75px;
| |
| - | }
| |
| - | div#page span.image-caption {
| |
| - | display: block;
| |
| - | position: absolute;
| |
| - | width: 550px;
| |
| - | top: 0;
| |
| - | left: 0;
| |
| - | }
| |
| - | div#page div.caption {
| |
| - | padding: 12px;
| |
| - | }
| |
| - | div#page div.image-title {
| |
| - | font-weight: bold;
| |
| - | font-size: 1.4em;
| |
| - | }
| |
| - | div#page div.image-desc {
| |
| - | line-height: 1.3em;
| |
| - | padding-top: 12px;
| |
| - | }
| |
| - | div#page div.navigation {
| |
| - | /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
| |
| - | }
| |
| - | div#page ul.thumbs {
| |
| - | clear: both;
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - | div#page ul.thumbs li {
| |
| - | float: left;
| |
| - | padding: 0;
| |
| - | margin: 5px 10px 5px 0;
| |
| - | list-style: none;
| |
| - | }
| |
| - | div#page a.thumb {
| |
| - | padding: 2px;
| |
| - | display: block;
| |
| - | border: 1px solid #ccc;
| |
| - | }
| |
| - | div#page ul.thumbs li.selected a.thumb {
| |
| - | background: #000;
| |
| - | }
| |
| - | div#page h1, div#page h2, div#page h3
| |
| - | {
| |
| - | border-style:none;
| |
| - | }
| |
| - | div#page a.thumb:focus {
| |
| - | outline: none;
| |
| - | }
| |
| - | div#page ul.thumbs img {
| |
| - | border: none;
| |
| - | display: block;
| |
| - | }
| |
| - | div#page div.pagination {
| |
| - | clear: both;
| |
| - | }
| |
| - | div#page div.navigation div.top {
| |
| - | margin-bottom: 12px;
| |
| - | height: 11px;
| |
| - | }
| |
| - | div#page div.navigation div.bottom {
| |
| - | margin-top: 12px;
| |
| - | }
| |
| - | div#page div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
| |
| - | display: block;
| |
| - | float: left;
| |
| - | margin-right: 2px;
| |
| - | padding: 4px 7px 2px 7px;
| |
| - | border: 1px solid #ccc;
| |
| - | }
| |
| - | div#page div.pagination a:hover {
| |
| - | background-color: #eee;
| |
| - | text-decoration: none;
| |
| - | }
| |
| - | div#page div.pagination span.current {
| |
| - | font-weight: bold;
| |
| - | background-color: #000;
| |
| - | border-color: #000;
| |
| - | color: #fff;
| |
| - | }
| |
| - | div#page div.pagination span.ellipsis {
| |
| - | border: none;
| |
| - | padding: 5px 0 3px 2px;
| |
| - | }
| |
| - | div#page{
| |
| - | width:750px;
| |
| - | border-style:none;
| |
| - | background:none;}
| |
| - | </style>
| |
| - | <script type="text/javascript">
| |
| - | ;(function($) {
| |
| - | $.fn.opacityrollover = function(settings) {
| |
| - |
| |
| - | };
| |
| - | })(jQuery);
| |
| - |
| |
| - | </script>
| |
| - | <!-- We only want the thunbnails to display when javascript is disabled -->
| |
| - | <script type="text/javascript">
| |
| - | document.write('<style>.noscript { display: none; }</style>');
| |
| - | </script>
| |
| - | </head>
| |
| - | <body>
| |
| - | <div id="page">
| |
| - | <div id="container">
| |
| - | <h1><a href="index.html">Galleriffic</a></h1>
| |
| - | <h2>Thumbnail rollover effects and slideshow crossfades</h2>
| |
| - |
| |
| - | <!-- Start Advanced Gallery Html Containers -->
| |
| - | <div id="gallery" class="content">
| |
| - | <div id="controls" class="controls"></div>
| |
| - | <div class="slideshow-container">
| |
| - | <div id="loading" class="loader"></div>
| |
| - | <div id="slideshow" class="slideshow"></div>
| |
| - | </div>
| |
| - | <div id="caption" class="caption-container"></div>
| |
| - | </div>
| |
| - | <div id="thumbs" class="navigation">
| |
| - | <ul class="thumbs noscript">
| |
| - | <li>
| |
| - | <a class="thumb" name="pic-1" href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_HOUSE.jpg">
| |
| - | <img src="https://static.igem.org/mediawiki/2013hs/5/5a/AUC_TURKEY_POSTER_HOUSE_THUMB.jpg"/>
| |
| - | </a>
| |
| - | <div class="caption">
| |
| - | <div class="download">
| |
| - | <a href="https://static.igem.org/mediawiki/2013hs/a/a1/AUC_TURKEY_POSTER_HOUSE.jpg">Download Original</a>
| |
| - | </div>
| |
| - | <div class="image-title">We are housing another poster!</div>
| |
| - | </div>
| |
| - | </li><li>
| |
| - | <a class="thumb" name="pic-2" href="https://static.igem.org/mediawiki/2013hs/2/27/AUC_TURKEY_POSTER_IGEMISMTV.jpg">
| |
| - | <img src="https://static.igem.org/mediawiki/2013hs/a/a4/AUC_TURKEY_POSTER_IGEMISMTV_THUMB.jpg"/>
| |
| - | </a>
| |
| - | <div class="caption">
| |
| - | <div class="download">
| |
| - | <a href="https://static.igem.org/mediawiki/2013hs/2/27/AUC_TURKEY_POSTER_IGEMISMTV.jpg">Download Original</a>
| |
| - | </div>
| |
| - | <div class="image-title">Synthetic Biology: Future depends on it!</div>
| |
| - | </div>
| |
| - | </li><li>
| |
| - | <a class="thumb" name="pic-3" href="https://static.igem.org/mediawiki/2013hs/9/91/AUC_TURKEY_POSTER_KILIM.jpg">
| |
| - | <img src="https://static.igem.org/mediawiki/2013hs/f/f9/AUC_TURKEY_POSTER_KILIM_THUMB.jpg"/>
| |
| - | </a>
| |
| - | <div class="caption">
| |
| - | <div class="download">
| |
| - | <a href="https://static.igem.org/mediawiki/2013hs/9/91/AUC_TURKEY_POSTER_KILIM.jpg">Download Original</a>
| |
| - | </div>
| |
| - | <div class="image-title">Synthetic Biology: Future depends on it!</div>
| |
| - | </div>
| |
| - | </li>
| |
| - | </ul>
| |
| - | </div>
| |
| - | <div style="clear: both;"></div>
| |
| - | </div>
| |
| - | </div>
| |
| - | <div id="footer">© 2009 Trent Foley</div>
| |
| - | <script type="text/javascript">
| |
| - | jQuery(document).ready(function($) {
| |
| - | // We only want these styles applied when javascript is enabled
| |
| - | $('div.navigation').css({'width' : '150px', 'float' : 'left'});
| |
| - | $('div.content').css('display', 'block');
| |
| - |
| |
| - | // Initially set opacity on thumbs and add
| |
| - | // additional styling for hover effect on thumbs
| |
| - | var onMouseOutOpacity = 1.0;
| |
| - | $('#thumbs ul.thumbs li').opacityrollover({
| |
| - | mouseOutOpacity: onMouseOutOpacity,
| |
| - | mouseOverOpacity: 1.0,
| |
| - | fadeSpeed: 'fast',
| |
| - | exemptionSelector: '.selected'
| |
| - | });
| |
| - |
| |
| - | // Initialize Advanced Galleriffic Gallery
| |
| - | var gallery = $('#thumbs').galleriffic({
| |
| - | delay: 2500,
| |
| - | numThumbs: 5,
| |
| - | preloadAhead: 5,
| |
| - | enableTopPager: true,
| |
| - | enableBottomPager: true,
| |
| - | maxPagesToShow: 4,
| |
| - | imageContainerSel: '#slideshow',
| |
| - | controlsContainerSel: '#controls',
| |
| - | captionContainerSel: '#caption',
| |
| - | loadingContainerSel: '#loading',
| |
| - | renderSSControls: true,
| |
| - | renderNavControls: true,
| |
| - | playLinkText: 'Play Slideshow',
| |
| - | pauseLinkText: 'Pause Slideshow',
| |
| - | prevLinkText: '‹ Previous Photo',
| |
| - | nextLinkText: 'Next Photo ›',
| |
| - | nextPageLinkText: 'Next ›',
| |
| - | prevPageLinkText: '‹ Prev',
| |
| - | enableHistory: false,
| |
| - | autoStart: false,
| |
| - | syncTransitions: true,
| |
| - | defaultTransitionDuration: 900,
| |
| - | onSlideChange: function(prevIndex, nextIndex) {
| |
| - | // 'this' refers to the gallery, which is an extension of $('#thumbs')
| |
| - | this.find('ul.thumbs').children()
| |
| - | .eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
| |
| - | .eq(nextIndex).fadeTo('fast', 1.0);
| |
| - | },
| |
| - | onPageTransitionOut: function(callback) {
| |
| - | this.fadeTo('fast', 0.0, callback);
| |
| - | },
| |
| - | onPageTransitionIn: function() {
| |
| - | this.fadeTo('fast', 1.0);
| |
| - | }
| |
| - | });
| |
| - | });
| |
| - | </script>
| |
| - | </body>
| |
| - | </html>
| |
"
