https://finaccelerate.com/js/jquery.gallery.js

1;(function ($, window, document, undefined) {
2	var pluginName = 'gallery',
3		defaults = {
4			showNavBtn: true,
5			overlayClickNext: true,
6			previousButton: '<span class="material-symbols-outlined"><strong>arrow_back_ios</strong></span>',
7			nextButton: '<span class="material-symbols-outlined"><strong>arrow_forward_ios</strong></span>',
8			closeButton: '<span class="material-symbols-outlined"><strong>close</strong></span>'
9		};
10	function Plugin(element, options) {
11		this.element = element;
12		this.settings = $.extend({}, defaults, options);
13		this._defaults = defaults;
14		this._name = pluginName;
15		this.init();
16	}
17	$.extend(Plugin.prototype, {
18		init: function () {
19			plugin = this;
20			var i = 0;
21			var albums = 0;
22			$(this.element).find('.album').each(function(){
23				$(this).find('img').each(function(){
24					var imageIndex = $(this).index();
25					$(this).attr('data-image', i);				
26					$(this).attr('data-album', albums);
27					$(this).addClass('image-hover-pointer');
28					$(this).bind("click." + plugin, function () {
29						var imageClicked = $(this).data('image');
30						var imageAlbum = $(this).data('album');
31						plugin.addAlbumImages(imageAlbum);
32						plugin.addInterface();
33						plugin.bindNavEvents();
34						plugin.showImage(imageClicked);
35					});
36					i = i + 1;
37				});
38				i = 0;
39				albums = albums + 1;	
40			});
41		},
42		addAlbumImages: function (album) {
43			$('img[data-album="'+album+'"]').each(function () {
44				var curImage = $(this);
45				var image = curImage.data('image');
46				var imageUrl = curImage.attr('src');
47				$('.images').append('<img src="'+imageUrl+'" data-image="'+image+'" style="display: none;">');						
48			});
49		},
50		addInterface: function(){
51			$('body').prepend('<div class="gallery-interface gallery-overlay"></div>');
52			if(this.settings.showNavBtn == true){
53				$('.gallery').prepend('<div class="gallery-interface gallery-interfaceButton gallery-previousButton">' + this.settings.previousButton + '</div>');
54				$('.gallery').append('<div class="gallery-interface gallery-interfaceButton gallery-nextButton">' + this.settings.nextButton + '</div>');
55				$('.gallery').append('<div class="gallery-interface gallery-interfaceButton gallery-closeButton">' + this.settings.closeButton + '</div>');
56			}
57		},
58		bindNavEvents: function(){
59			if(this.settings.showNavBtn == true){
60				$('.gallery-previousButton').on('click.' + plugin, function () {
61					plugin.previousImage();
62				});
63				$('.gallery-nextButton').on('click.' + plugin, function () {
64					plugin.nextImage();
65				});
66				$('.gallery-closeButton').on('click.' + plugin, function () {
67					plugin.removeInterface();
68					plugin.removeImages();
69				});
70			}
71			$('.gallery-overlay').bind('click.' + plugin, function () {
72				switch (plugin.settings.overlayClickNext) {
73					case true:
74						plugin.nextImage();
75						break;
76					case false:
77					default:
78						plugin.destroy();
79						break;
80				}
81			});
82		},
83		showImage: function (img){
84			$('.images').find('img[data-image="' + img + '"]').show().addClass('imgshow');
85		},
86		previousImage: function(){
87			var img = $('.imgshow');
88			var image = img.data('image');
89			var totalImages = $('.images').find('img').length-1;		
90			if(image >= 0){
91				img.removeClass('imgshow').hide();
92				image = image-1;
93				plugin.showImage(image);
94			}else{
95				plugin.destroy();
96			}
97		},
98		nextImage: function(){
99			var img = $('.imgshow');
100			var image = img.data('image');
101			var totalImages = $('.images').find('img').length-1;
102			if(image < totalImages){
103				img.removeClass('imgshow').hide();
104				image = image+1;
105				plugin.showImage(image);
106			}else{
107				plugin.destroy();
108			}	
109		},
110		removeImages: function(){
111			$('.images').empty();
112		},
113		removeInterface: function(){			
114			$('.gallery-interface').remove();
115		},
116		destroy: function(){
117			plugin.removeInterface();
118			plugin.removeImages();
119		}
120	});
121	$.fn[pluginName] = function (options) {
122		this.each(function () {
123			if (!$.data(this, "plugin_" + pluginName)) {
124				$.data(this, "plugin_" + pluginName, new Plugin(this, options));
125			}
126		});
127		//$('body').data('albums', albums);
128	};
129	$('body').append('<div class="gallery"></div>');
130	$('.gallery').append('<div class="images"></div>');
131	return this;
132})(jQuery, window, document)