Team:BIOSINT Mexico/BSMex gallery.js

From 2014.igem.org

(Difference between revisions)
(Created page with "<script type=" text=" "="" javascript=""> if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"sl...")
 
Line 1: Line 1:
-
<script type=" text=" "="" javascript="">
+
$(function() {
-
if(!window.slider) var slider={};slider.data=[{"id":"slide-img-1","client":"nature beauty","desc":"nature beauty photography"},{"id":"slide-img-2","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-3","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-4","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-5","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-6","client":"nature beauty","desc":"add your description here"},{"id":"slide-img-7","client":"nature beauty","desc":"add your description here"}];
+
// ======================= imagesLoaded Plugin ===============================
-
</script>
+
// 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  = $('<li><a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>');
 +
Gallery.addItems( $new );
 +
*/
 +
});

Latest revision as of 06:39, 16 October 2014

$(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 = $('
  • <a href="#"><img src="images/thumbs/1.jpg" data-large="images/1.jpg" alt="image01" data-description="From off a hill whose concave womb reworded" /></a></li>'); Gallery.addItems( $new ); */ });
    Retrieved from "http://2014.igem.org/Team:BIOSINT_Mexico/BSMex_gallery.js"