https://gretaundstarks.de/js/site/jquery.epicfullscreen.js

1// epicFullscreen - version 1.1 - jquery 1.7.1.
2// Copyright - unlimitDesign Themes
3
4/*change log 07 jan 2013
5
6	1.added delay variable 
7	
8*/
9
10(function ($) {
11	
12	
13   	$.fn.epicFullscreen = function (options) {
14 
15 			/*fullscreen img defaults
16			-----------------------------*/
17			var defaults = {
18				
19				opacity : 0.4,			//Integer: 0-1
20				pattern: true, 			//Boolean: use overlay pattern or not
21				background:'#ff5400',	//String: hex value
22				delay:100,				//Numeric: delay before fade in
23				callback: function(){}	//Callback
24
25				
26			};
27			
28			//overwrite or merge user options
29			var options = $.extend({},defaults, options);
30			
31
32		   /*internals
33			-----------------------------*/
34			var	selector = $(this).find('img'),
35				winW,
36				winH,
37				winRatio,
38				imgW,
39				imgH,
40				imgRatio,
41				newW,
42				newH;
43	
44
45			/*check options
46			-----------------------------*/
47			
48			selector.parent().css({background:options.background});
49			if(options.pattern==true) selector.parent().append('<div id="epic-overlay"></div>');
50			
51			
52			/*fullscreen/resizing
53			-----------------------------*/	
54						
55			function resize(){
56				
57				winW	= $(window).width();
58				winH	= $(window).height();
59				winRatio	= winH / winW;
60				imgW	=  selector.width();
61				imgH	=  selector.height();
62				imgRatio	= imgH / imgW;
63							
64				if(winRatio > imgRatio){
65					
66					newH	= winH;
67					newW	= winH / imgRatio;
68					
69				}else{
70						
71					newH	= winW * imgRatio;
72					newW	= winW;
73						
74				};
75					
76							
77					/*set width, height and position of image*/
78					selector.css({width: newW + 'px',height: newH + 'px',left: (winW - newW) / 2 + 'px',top: (winH - newH) / 2 + 'px'});
79
80			};
81				
82				
83			/*window resize action
84			-----------------------------*/
85			
86			$(window).bind('resize',function(){
87				
88					resize();
89				
90			});	
91			
92			//resize();
93
94			/*preload
95			-----------------------------*/
96			
97	        selector.each(function(){
98											 
99				//create image object
100                var img = new Image();
101                            
102				//store currentSlide image src 
103                var path = $(this).attr('src');
104                       
105                 $(img).load(function(){
106									  
107						resize();	//call resize
108						selector.css({opacity:0,display:'block'}).delay(options.delay).animate({opacity:options.opacity}); //animate
109						options.callback.call(this);
110
111                  })
112					.attr('src',path)
113					.error(function(){
114										
115							alert('check image path or connection');
116							
117					 });
118
119             });
120			
121    };
122	
123})(jQuery);