https://www.pakconps.vic.edu.au/js/custom/multi_gallery/gallery_d.js

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

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