https://www.elwoodprimary.vic.edu.au/themes/theme1/js/gallery.js

1jQuery(function() {
2	// ======================= imagesLoaded Plugin ===============================
3	// https://github.com/desandro/imagesloaded
4
5	// $('#my-container').imagesLoaded(myFunction)
6	// execute a callback when all images have loaded.
7	// needed because .load() doesn't work on cached images
8
9	// callback function gets image collection as argument
10	//  this is the container
11
12	// original: mit license. paul irish. 2010.
13	// contributors: Oren Solomianik, David DeSandro, Yiannis Chatzikonstantinou
14
15	jQuery.fn.imagesLoaded 		= function( callback ) {
16	var $images = this.find('img'),
17		len 	= $images.length,
18		_this 	= this,
19		blank 	= 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==';
20
21	function triggerCallback() {
22		callback.call( _this, $images );
23	}
24
25	function imgLoaded() {
26		if ( --len <= 0 && this.src !== blank ){
27			setTimeout( triggerCallback );
28			$images.off( 'load error', imgLoaded );
29		}
30	}
31
32	if ( !len ) {
33		triggerCallback();
34	}
35
36	$images.on( 'load error',  imgLoaded ).each( function() {
37		// cached images don't fire load sometimes, so we reset src.
38		if (this.complete || this.complete === undefined){
39			var src = this.src;
40			// webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
41			// data uri bypasses webkit log warning (thx doug jones)
42			this.src = blank;
43			this.src = src;
44		}
45	});
46
47	return this;
48	};
49
50	// gallery container
51	var $rgGallery			= jQuery('#rg-gallery'),
52	// carousel container
53	$esCarousel			= $rgGallery.find('div.es-carousel-wrapper'),
54	// the carousel items
55	$items				= $esCarousel.find('ul > li'),
56	// total number of items
57	itemsCount			= $items.length;
58	
59	Gallery				= (function() {
60			// index of the current item
61		var current			= 0, 
62			// mode : carousel || fullview
63			mode 			= 'carousel',
64			// control if one image is being loaded
65			anim			= false,
66			init			= function() {
67				
68				// (not necessary) preloading the images here...
69				$items.add('<img src="images/ajax-loader.gif"/><img src="images/black.png"/>').imagesLoaded( function() {
70					// add options
71					_addViewModes();
72					
73					// add large image wrapper
74					_addImageWrapper();
75					
76					// show first image
77					_showImage( $items.eq( current ) );
78						
79				});
80				
81				// initialize the carousel
82				if( mode === 'carousel' )
83					_initCarousel();
84				
85			},
86			_initCarousel	= function() {
87				
88				// we are using the elastislide plugin:
89				// http://tympanus.net/codrops/2011/09/12/elastislide-responsive-carousel/
90				$esCarousel.show().elastislide({
91					imageW 	: 117,
92					onClick	: function( $item ) {
93						if( anim ) return false;
94						anim	= true;
95						// on click show image
96						_showImage($item);
97						// change current
98						current	= $item.index();
99					}
100				});
101				
102				// set elastislide's current to current
103				$esCarousel.elastislide( 'setCurrent', current );
104				
105			},
106			_addViewModes	= function() {
107				
108				// top right buttons: hide / show carousel
109				
110				var $viewfull	= jQuery('<a href="#" class="rg-view-full"></a>'),
111					$viewthumbs	= jQuery('<a href="#" class="rg-view-thumbs rg-view-selected"></a>');
112				
113			 
114				
115				$viewfull.on('click.rgGallery', function( event ) {
116						if( mode === 'carousel' )
117							$esCarousel.elastislide( 'destroy' );
118						$esCarousel.hide();
119					$viewfull.addClass('rg-view-selected');
120					$viewthumbs.removeClass('rg-view-selected');
121					mode	= 'fullview';
122					return false;
123				});
124				
125				$viewthumbs.on('click.rgGallery', function( event ) {
126					_initCarousel();
127					$viewthumbs.addClass('rg-view-selected');
128					$viewfull.removeClass('rg-view-selected');
129					mode	= 'carousel';
130					return false;
131				});
132				
133				if( mode === 'fullview' )
134					$viewfull.trigger('click');
135					
136			},
137			_addImageWrapper= function() {
138				
139				// adds the structure for the large image and the navigation buttons (if total items > 1)
140				// also initializes the navigation events
141				
142				jQuery('#img-wrapper-tmpl').tmpl( {itemsCount : itemsCount} ).appendTo( $rgGallery );
143				
144				if( itemsCount > 1 ) {
145					// addNavigation

146					var $navPrev		= $rgGallery.find('a.rg-image-nav-prev'),
147						$navNext		= $rgGallery.find('a.rg-image-nav-next'),
148						$imgWrapper		= $rgGallery.find('div.rg-image');
149						
150					$navPrev.on('click.rgGallery', function( event ) {
151						_navigate( 'left' );
152						return false;
153					});	
154					
155					$navNext.on('click.rgGallery', function( event ) {
156						_navigate( 'right' );
157						return false;
158					});
159				
160					// add touchwipe events on the large image wrapper
161					$imgWrapper.touchwipe({
162						wipeLeft			: function() {
163							_navigate( 'right' );
164						},
165						wipeRight			: function() {
166							_navigate( 'left' );
167						},
168						preventDefaultEvents: false
169					});
170				
171					jQuery(document).on('keyup.rgGallery', function( event ) {
172						if (event.keyCode == 39)
173							_navigate( 'right' );
174						else if (event.keyCode == 37)
175							_navigate( 'left' );	
176					});
177					
178				}
179				
180			},
181			_navigate		= function( dir ) {
182				
183				// navigate through the large images
184				
185				if( anim ) return false;
186				anim	= true;
187				
188				if( dir === 'right' ) {
189					if( current + 1 >= itemsCount )
190						current = 0;
191					else
192						++current;
193				}
194				else if( dir === 'left' ) {
195					if( current - 1 < 0 )
196						current = itemsCount - 1;
197					else
198						--current;
199				}
200				
201				_showImage( $items.eq( current ) );
202				
203			},
204			_showImage		= function( $item ) {
205				
206				// shows the large image that is associated to the $item
207				
208				var $loader	= $rgGallery.find('div.rg-loading').show();
209				
210				$items.removeClass('selected');
211				$item.addClass('selected');
212					 
213				var $thumb		= $item.find('img'),
214					largesrc	= $thumb.data('large'),
215					title		= $thumb.data('description');
216				
217				jQuery('<img/>').load( function() {
218					
219					$rgGallery.find('div.rg-image').empty().append('<img src="' + largesrc + '"/>');
220					//rg-image-wrapper
221					
222					if( title ){
223						$rgGallery.find('div.rg-caption').show().children('p').empty().text( title );
224						jQuery('.rg-image-wrapper').children('h6').empty().text( title );
225					}
226					
227					$loader.hide();
228					
229					if( mode === 'carousel' ) {
230						$esCarousel.elastislide( 'reload' );
231						$esCarousel.elastislide( 'setCurrent', current );
232					}
233					
234					anim	= false;
235					
236				}).attr( 'src', largesrc );
237				
238			},
239			addItems		= function( $new ) {
240			
241				$esCarousel.find('ul').append($new);
242				$items 		= $items.add( $($new) );
243				itemsCount	= $items.length; 
244				$esCarousel.elastislide( 'add', $new );
245			
246			};
247		
248		return { 
249			init 		: init,
250			addItems	: addItems
251		};
252	
253	})();
254
255	Gallery.init();
256	
257	/*
258	Example to add more items to the gallery:
259	
260	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>');
261	Gallery.addItems( $new );
262	*/
263});