https://kaspiysk.org/js/jquery.tinyLightbox.js

1/*
2 * tinyLightbox 2.4 - Plugin for jQuery
3 * 
4 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
5 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
6 *
7 * Depends:
8 *   - jquery.js
9 *   - jquery.tinyLightbox.original.js or other animation extensions
10 *   - optional jquery.bgiframe.js
11 *
12 *  Copyright (c) 2008 Oleg Slobodskoi (ajaxsoft.de)
13 */
14;(function($) {
15
16$.fn.tinyLightbox = function ( options ) {
17    return this.each(function() {
18    	!$.data(this, 'tinyLightbox') && $.data( this, 'tinyLightbox', new tinyLightbox(this, options)).init();
19    });
20};
21
22/* defaults */
23$.fn.tinyLightbox.defaults = {
24	item: 'a',
25	slideshowSpeed: 5000,
26	slideshowAutostart: false,
27	pathAttr: 'href',
28	descrAttr: 'title',				
29	speed: 300,
30	labelImage: 'Image', 
31	labelOf: 'of',
32	animation: 'original',
33	keyNavigation: true,
34	cycle: false,
35	minWidth: 250,
36	minHeight: 190,
37	overlayOpacity: 0.7,
38	bgiframe: true	
39};
40
41
42function tinyLightbox ( container, options ) {
43	
44	
45	var template = '\
46		<div id="tiny-lightbox" class="tiny-lightbox-animating tiny-lightbox-loading">\
47			<div id="tiny-lightbox-overlay" data-action="close"></div>\
48			<div id="tiny-lightbox-box" >\
49				<div id="tiny-lightbox-image"></div>\
50				<a id="tiny-lightbox-prev" data-action="showPrev" hidefocus="hidefocus" href="#">\
51					<span data-action="showPrev"></span>\
52				</a>\
53				<a id="tiny-lightbox-next" data-action="showNext" hidefocus="hidefocus" href="#">\
54					<span data-action="showNext"></span>\
55				</a>\
56			</div>\
57			<div id="tiny-lightbox-bar">\
58				<div id="tiny-lightbox-description"></div>\
59				<span id="tiny-lightbox-stats"></span>\
60				<a id="tiny-lightbox-close" title="Close" alt="Close" data-action="close" href="#"></a>\
61				<a id="tiny-lightbox-slideshow" title="Slideshow" alt="Slideshow" data-action="slideshow" href="#"/>\
62			</div>\
63		</div>\
64	';
65	
66	var self = this,
67		$container = $(container),
68        $tl,
69		$elems,
70		$stats,
71		$descr,
72		$prevNext,
73		Animations,
74		activeIndex,
75		running,
76		cycle
77	;
78	
79	var s = this.s = $.extend({}, $.fn.tinyLightbox.defaults, options);
80	
81	
82	this.init  = function()
83	{
84        cycle = s.cycle;
85        Animations = $.fn.tinyLightbox[s.animation](self);
86		$elems = $(s.item+'['+s.pathAttr+']', $container);
87
88        $container.bind('click', function( e ) {
89            var $elem = $(e.target).closest(s.item);
90            
91			activeIndex = $elems.index($elem[0]);
92            
93            // it is not a preview
94            if ( activeIndex == -1 ) return;
95
96            // prevent double lightbox if user clicks via keyboard
97            if ( self.$tl ) return false;
98		
99			self.$tl = $(template).appendTo(document.body);
100			
101			// overlay
102			self.$overlay = $('#tiny-lightbox-overlay').css('opacity', s.overlayOpacity);
103			resizeOverlay();
104		
105			// image container
106			self.$box = $('#tiny-lightbox-box');
107			self.$image = $('#tiny-lightbox-image');
108			self.path = $elem.attr(s.pathAttr);
109			
110			self.boxData = {
111				width: self.$box.width(),
112				height: self.$box.height(),
113				top: parseInt(self.$box.css('top')) + self.docData.scrollTop,
114				borderWidth: (self.$box.outerWidth()-self.$box.innerWidth())/2 || 0
115			};
116			setLeft();
117			
118			
119
120			// toolbar
121			self.$bar = $('#tiny-lightbox-bar');
122			$descr = $('#tiny-lightbox-description');
123			$stats = $('#tiny-lightbox-stats');
124			updateBar();
125			
126			// bind click handler
127			self.$tl.bind('click',function(e) {
128				var act = $(e.target).attr('data-action');
129				if ( !act ) return;
130				self[ act ]();
131				return false;
132			});
133
134			// bind hover event
135			$prevNext = $('#tiny-lightbox-next, #tiny-lightbox-prev').bind('mouseover',function(){
136				$('span', this).addClass('tiny-lightbox-hover');
137			}).bind('mouseout', function(){
138				$('span', this).removeClass('tiny-lightbox-hover');
139			});
140
141			// bind window resize event for overlay
142			$(window).bind('resize',resizeOverlay);
143
144			s.keyNavigation && $(document).bind('keydown',keyNavigation);		
145			s.bgiframe && $.fn.bgiframe && self.$tl.bgiframe();
146
147			// start animations
148			Animations.start( function(){
149				preload(self.path, function(){
150					Animations.animate(function(){
151						resizeOverlay();
152						self.$tl.removeClass('tiny-lightbox-animating');
153        				if ( s.slideshowAutostart ) {
154        					running = setTimeout(slideshow, s.slideshowSpeed);
155        					self.$bar.addClass('tiny-lightbox-slideshow-running');
156        				};
157					});	
158				});
159			});
160                            
161			return false;			
162		
163		});
164	};
165	
166	this.showNext = function() {
167		change(activeIndex+1);	
168	};
169	
170	this.showPrev = function() {
171		change(activeIndex-1);	
172	};
173	
174	this.slideshow = function( sw )	{
175		if ( running && !sw ) {
176			clearTimeout(running);
177			cycle = s.cycle;
178			self.$bar.removeClass('tiny-lightbox-slideshow-running');
179			running = false;

180		} else {
181			cycle = true;
182			self.$bar.addClass('tiny-lightbox-slideshow-running');
183			change(activeIndex+1, function(){
184				running = setTimeout(function(){
185					self.slideshow( true );
186				}, s.slideshowSpeed);
187			});	
188		};
189	};
190	
191	this.close = function()	{
192		clearTimeout(running);
193		$prevNext.unbind('mouseover mouseout');
194		$(window).unbind('resize', resizeOverlay);
195		s.keyNavigation && $(document).unbind('keydown', keyNavigation);
196		Animations.close(function(){
197			self.$tl.unbind('click').remove();
198            delete self.$tl;
199		});
200	};
201
202	
203	function resizeOverlay() {
204		self.docData = {
205			width: $(window).width(),
206			height: $(document).height(),
207			scrollTop: $(window).scrollTop(),
208            scrollLeft: $(window).scrollLeft()
209		};
210		self.$tl.add(self.$overlay).css({height: self.docData.height, width: self.docData.width});
211	};
212	
213	function keyNavigation( e )	{
214		/* 39 -> 37 <- 27 esc */
215		e.keyCode == 39 ? self.showNext() : e.keyCode==37 ? self.showPrev() : e.keyCode==27 && self.close();	
216	};
217	
218	function preload( url, callback ) {
219		self.$tl.addClass('tiny-lightbox-loading');
220		var img = new Image();
221		img.onload = function () { 
222			self.$tl.removeClass('tiny-lightbox-loading');
223			$.extend(self.boxData, {
224				width: img.width>s.minWidth ? img.width : s.minWidth,
225				height: img.height>s.minHeight ? img.height : s.minHeight
226			});
227			setLeft();
228			callback();
229		};
230		img.src = self.path = url;
231	};
232
233	function setLeft() {
234		self.boxData.left = (self.docData.width - (self.boxData.width + self.boxData.borderWidth*2) )/2;	
235	};
236	
237	function updateBar() {
238        $stats.text(s.labelImage+' '+(activeIndex+1)+' '+s.labelOf+' '+$elems.length);
239        var descr = $elems.eq(activeIndex).attr(s.descrAttr);
240        $descr.html(descr)[ descr ? 'show' : 'hide' ]();
241	};
242	
243	function change( id, callback )	{
244		if ( self.$tl.hasClass('tiny-lightbox-animating') ) return;
245        
246		if ( id > $elems.length-1 || id < 0 ) {
247			if ( cycle )
248				change(id < 0 ? $elems.length-1 : 0, callback);
249			else {
250				self.$tl.addClass('tiny-lightbox-animating');
251				Animations.limit(function(){
252					self.$tl.removeClass('tiny-lightbox-animating');
253				});
254			};
255			return;
256		};
257		activeIndex = id;
258
259		self.$tl.addClass('tiny-lightbox-animating');
260		Animations.prepare(function(){
261			preload($elems.eq(activeIndex).attr(s.pathAttr), function(){
262				updateBar();
263				Animations.animate(function(){
264					self.$tl.removeClass('tiny-lightbox-animating');
265					resizeOverlay();
266					$(callback);
267				});
268			});
269		});
270	};		
271
272
273};
274
275})( jQuery );