"
Team:BIOSINT Mexico/BSMex gallery.js
From 2014.igem.org
$(function() { // ======================= imagesLoaded Plugin =============================== // https://github.com/desandro/imagesloaded
// $('#my-container').imagesLoaded(myFunction) // execute a callback when all images have loaded. // needed because .load() doesn't work on cached images
// callback function gets image collection as argument // this is the container
// original: mit license. paul irish. 2010. // contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
$.fn.imagesLoaded = function( callback ) { var $images = this.find('img'), len = $images.length, _this = this, blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
function triggerCallback() { callback.call( _this, $images ); }
function imgLoaded() { if ( --len <= 0 && this.src !== blank ){ setTimeout( triggerCallback ); $images.off( 'load error', imgLoaded ); } }
if ( !len ) { triggerCallback(); }
$images.on( 'load error', imgLoaded ).each( function() { // cached images don't fire load sometimes, so we reset src. if (this.complete || this.complete === undefined){ var src = this.src; // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f // data uri bypasses webkit log warning (thx doug jones) this.src = blank; this.src = src; } });
return this; };
// gallery container var $rgGallery = $('#rg-gallery'), // carousel container $esCarousel = $rgGallery.find('div.es-carousel-wrapper'), // the carousel items $items = $esCarousel.find('ul > li'), // total number of items itemsCount = $items.length;
Gallery = (function() { // index of the current item var current = 0, // mode : carousel || fullview mode = 'carousel', // control if one image is being loaded anim = false, init = function() {
// (not necessary) preloading the images here... $items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() { // add options _addViewModes();
// add large image wrapper _addImageWrapper();
// show first image _showImage( $items.eq( current ) );
});
// initialize the carousel if( mode === 'carousel' ) _initCarousel();
}, _initCarousel = function() {
// we are using the elastislide plugin: // http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/ $esCarousel.show().elastislide({ imageW : 65, onClick : function( $item ) { if( anim ) return false; anim = true; // on click show image _showImage($item); // change current current = $item.index(); } });
// set elastislide's current to current $esCarousel.elastislide( 'setCurrent', current );
}, _addViewModes = function() {
// top right buttons: hide / show carousel
var $viewfull = $('<a href="#" class="rg-view-full"></a>'), $viewthumbs = $('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
$rgGallery.prepend( $('<div class="rg-view"/>').append( $viewfull ).append( $viewthumbs ) );
$viewfull.on('click.rgGallery', function( event ) { if( mode === 'carousel' ) $esCarousel.elastislide( 'destroy' ); $esCarousel.hide(); $viewfull.addClass('rg-view-selected'); $viewthumbs.removeClass('rg-view-selected'); mode = 'fullview'; return false; });
$viewthumbs.on('click.rgGallery', function( event ) { _initCarousel(); $viewthumbs.addClass('rg-view-selected'); $viewfull.removeClass('rg-view-selected'); mode = 'carousel'; return false; });
if( mode === 'fullview' ) $viewfull.trigger('click');
}, _addImageWrapper= function() {
// adds the structure for the large image and the navigation buttons (if total items > 1) // also initializes the navigation events
$('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
if( itemsCount > 1 ) { // addNavigation var $navPrev = $rgGallery.find('a.rg-image-nav-prev'), $navNext = $rgGallery.find('a.rg-image-nav-next'), $imgWrapper = $rgGallery.find('div.rg-image');
$navPrev.on('click.rgGallery', function( event ) { _navigate( 'left' ); return false; });
$navNext.on('click.rgGallery', function( event ) { _navigate( 'right' ); return false; });
// add touchwipe events on the large image wrapper $imgWrapper.touchwipe({ wipeLeft : function() { _navigate( 'right' ); }, wipeRight : function() { _navigate( 'left' ); }, preventDefaultEvents: false });
$(document).on('keyup.rgGallery', function( event ) { if (event.keyCode == 39) _navigate( 'right' ); else if (event.keyCode == 37) _navigate( 'left' ); });
}
}, _navigate = function( dir ) {
// navigate through the large images
if( anim ) return false; anim = true;
if( dir === 'right' ) { if( current + 1 >= itemsCount ) current = 0; else ++current; } else if( dir === 'left' ) { if( current - 1 < 0 ) current = itemsCount - 1; else --current; }
_showImage( $items.eq( current ) );
}, _showImage = function( $item ) {
// shows the large image that is associated to the $item
var $loader = $rgGallery.find('div.rg-loading').show();
$items.removeClass('selected'); $item.addClass('selected');
var $thumb = $item.find('img'), largesrc = $thumb.data('large'), title = $thumb.data('description');
$('<img/>').load( function() {
$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
if( title ) $rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
$loader.hide();
if( mode === 'carousel' ) { $esCarousel.elastislide( 'reload' ); $esCarousel.elastislide( 'setCurrent', current ); }
anim = false;
}).attr( 'src', largesrc );
}, addItems = function( $new ) {
$esCarousel.find('ul').append($new); $items = $items.add( $($new) ); itemsCount = $items.length; $esCarousel.elastislide( 'add', $new );
};
return { init : init, addItems : addItems };
})();
Gallery.init();
/* Example to add more items to the gallery:
var $new = $('
