1 | (function($) { |
---|
2 | $(document).ready(function(){ |
---|
3 | $.fn.preload = function(options) { |
---|
4 | var opts = $.extend({}, $.fn.preload.defaults, options); |
---|
5 | o = $.meta ? $.extend({}, opts, this.data()) : opts; |
---|
6 | var c = this.length, |
---|
7 | l = 0; |
---|
8 | return this.each(function() { |
---|
9 | var $i = $(this); |
---|
10 | $('<img/>').load(function(i){ |
---|
11 | ++l; |
---|
12 | if(l == c) o.onComplete(); |
---|
13 | }).attr('src',$i.attr('src')); |
---|
14 | }); |
---|
15 | }; |
---|
16 | $.fn.preload.defaults = { |
---|
17 | onComplete : function(){return false;} |
---|
18 | }; |
---|
19 | |
---|
20 | |
---|
21 | |
---|
22 | $(function() { |
---|
23 | var $tf_bg = $('#tf_bg'), |
---|
24 | $tf_bg_images = $tf_bg.find('img'), |
---|
25 | $tf_bg_img = $tf_bg_images.eq(0), |
---|
26 | $tf_thumbs = $('#tf_thumbs'), |
---|
27 | total = $tf_bg_images.length, |
---|
28 | current = 0, |
---|
29 | $tf_content_wrapper = $('#tf_content_wrapper'), |
---|
30 | $tf_next = $('#tf_next'), |
---|
31 | $tf_prev = $('#tf_prev'), |
---|
32 | $tf_loading = $('#tf_loading'); |
---|
33 | $tf_pattern = $('#tf_pattern'); |
---|
34 | |
---|
35 | //preload the images |
---|
36 | $tf_bg_images.preload({ |
---|
37 | onComplete : function(){ |
---|
38 | $tf_loading.hide(); |
---|
39 | init(); |
---|
40 | } |
---|
41 | }); |
---|
42 | |
---|
43 | //shows the first image and initializes events |
---|
44 | function init(){ |
---|
45 | //get dimentions for the image, based on the windows size |
---|
46 | var dim = getImageDim($tf_bg_img); |
---|
47 | //set the returned values and show the image |
---|
48 | $tf_bg_img.css({ |
---|
49 | width : dim.width, |
---|
50 | height : dim.height, |
---|
51 | left : dim.left, |
---|
52 | top : dim.top |
---|
53 | }).fadeIn(); |
---|
54 | |
---|
55 | //resizing the window resizes the $tf_bg_img |
---|
56 | $(window).bind('resize',function(){ |
---|
57 | var dim = getImageDim($tf_bg_img); |
---|
58 | $tf_bg_img.css({ |
---|
59 | width : dim.width, |
---|
60 | height : dim.height, |
---|
61 | left : dim.left, |
---|
62 | top : dim.top |
---|
63 | }); |
---|
64 | }); |
---|
65 | |
---|
66 | |
---|
67 | |
---|
68 | |
---|
69 | //expand and fit the image to the screen |
---|
70 | $(document).on('click', '#tf_zoom', |
---|
71 | function(){ |
---|
72 | if($tf_bg_img.is(':animated')) |
---|
73 | return false; |
---|
74 | var $this = $(this); |
---|
75 | var id = $tf_bg_images.eq(current).attr('id'); |
---|
76 | $.ajax({ |
---|
77 | type: "POST", |
---|
78 | url: "themes/Full_Background/full_BG.php", |
---|
79 | data: {id: id}, |
---|
80 | success:function(msg){ |
---|
81 | var div = "nbhit"+id; |
---|
82 | document.getElementById(div).innerHTML=msg ;} |
---|
83 | }); |
---|
84 | if($this.hasClass('tf_zoom')){ |
---|
85 | resize($tf_bg_img); |
---|
86 | $this.addClass('hidedi') |
---|
87 | if($tf_pattern.hasClass('visible')){ |
---|
88 | $tf_pattern.addClass('hide') |
---|
89 | .removeClass('visible');} |
---|
90 | if($('.titrePage').hasClass('visible')){ |
---|
91 | $('.titrePage').addClass('hide') |
---|
92 | .removeClass('visible');} |
---|
93 | if($('.additional_info').hasClass('visible')){ |
---|
94 | $('.additional_info').addClass('hide') |
---|
95 | .removeClass('visible');} |
---|
96 | if($('.infor').hasClass('visible')){ |
---|
97 | $('.infor').addClass('hide') |
---|
98 | .removeClass('visible');} |
---|
99 | if($('.footer').hasClass('visible')){ |
---|
100 | $('.footer').addClass('hide') |
---|
101 | .removeClass('visible');} |
---|
102 | if($('.tf_thumbs').hasClass('visible')){ |
---|
103 | $('.tf_thumbs').addClass('hide') |
---|
104 | .removeClass('visible');} |
---|
105 | if($('.tf_next').hasClass('visible')){ |
---|
106 | $('.tf_next').addClass('hidedi') |
---|
107 | .removeClass('visible');} |
---|
108 | if($('.tf_prev').hasClass('visible')){ |
---|
109 | $('.tf_prev').addClass('hidedi') |
---|
110 | .removeClass('visible');} |
---|
111 | if($('.tf_info').hasClass('visible')){ |
---|
112 | $('.tf_info').addClass('hidedi') |
---|
113 | .removeClass('visible');} |
---|
114 | if($('.tf_fullscreen').hasClass('hidedi')){ |
---|
115 | $('.tf_fullscreen').addClass('visible') |
---|
116 | .removeClass('hidedi');} |
---|
117 | } |
---|
118 | } |
---|
119 | ); |
---|
120 | |
---|
121 | $(document).on('click', '#tf_fullscreen', |
---|
122 | function(){ |
---|
123 | if($tf_bg_img.is(':animated')) |
---|
124 | return false; |
---|
125 | |
---|
126 | var $this = $(this); |
---|
127 | if($this.hasClass('tf_fullscreen')){ |
---|
128 | |
---|
129 | var dim = getImageDim($tf_bg_img); |
---|
130 | $tf_bg_img.animate({ |
---|
131 | width : dim.width, |
---|
132 | height : dim.height, |
---|
133 | top : dim.top, |
---|
134 | left : dim.left |
---|
135 | },550); |
---|
136 | $this.addClass('hidedi') |
---|
137 | .removeClass('visible'); |
---|
138 | $('.tf_zoom').addClass('visible') |
---|
139 | .removeClass('hidedi'); |
---|
140 | $tf_pattern.addClass('visible') |
---|
141 | .removeClass('hide'); |
---|
142 | $('.titrePage').addClass('visible') |
---|
143 | .removeClass('hide'); |
---|
144 | $('.additional_info').addClass('visible') |
---|
145 | .removeClass('hide'); |
---|
146 | $('.infor').addClass('visible') |
---|
147 | .removeClass('hide'); |
---|
148 | $('.footer').addClass('visible') |
---|
149 | .removeClass('hide'); |
---|
150 | $('.tf_thumbs').addClass('visible') |
---|
151 | .removeClass('hide'); |
---|
152 | $('.tf_next').addClass('visible') |
---|
153 | .removeClass('hidedi'); |
---|
154 | $('.tf_prev').addClass('visible') |
---|
155 | .removeClass('hidedi'); |
---|
156 | $('.tf_info').addClass('visible') |
---|
157 | .removeClass('hidedi'); |
---|
158 | |
---|
159 | } |
---|
160 | |
---|
161 | } |
---|
162 | ); |
---|
163 | |
---|
164 | |
---|
165 | |
---|
166 | //click the arrow down, scrolls down |
---|
167 | $tf_next.bind('click',function(){ |
---|
168 | if($tf_bg_img.is(':animated')) |
---|
169 | return false; |
---|
170 | scroll('bt'); |
---|
171 | }); |
---|
172 | |
---|
173 | //click the arrow up, scrolls up |
---|
174 | $tf_prev.bind('click',function(){ |
---|
175 | if($tf_bg_img.is(':animated')) |
---|
176 | return false; |
---|
177 | scroll('tb'); |
---|
178 | }); |
---|
179 | |
---|
180 | //mousewheel events - down / up button trigger the scroll down / up |
---|
181 | $(document).bind('mousewheel' , function(e, delta) { |
---|
182 | if($tf_bg_img.is(':animated')) |
---|
183 | return false; |
---|
184 | |
---|
185 | if(delta < 0) |
---|
186 | scroll('bt'); |
---|
187 | else |
---|
188 | scroll('tb'); |
---|
189 | return false; |
---|
190 | }); |
---|
191 | |
---|
192 | //key events - down / up button trigger the scroll down / up |
---|
193 | $(document).keydown(function(e){ |
---|
194 | if($tf_bg_img.is(':animated')) |
---|
195 | return false; |
---|
196 | |
---|
197 | switch(e.which){ |
---|
198 | case 38: |
---|
199 | scroll('tb'); |
---|
200 | break; |
---|
201 | |
---|
202 | case 40: |
---|
203 | scroll('bt'); |
---|
204 | break; |
---|
205 | } |
---|
206 | }); |
---|
207 | } |
---|
208 | |
---|
209 | |
---|
210 | |
---|
211 | if(total > 1 ){ |
---|
212 | |
---|
213 | //show next / prev image |
---|
214 | function scroll(dir){ |
---|
215 | //if dir is "tb" (top -> bottom) increment current, |
---|
216 | //else if "bt" decrement it |
---|
217 | current = (dir == 'bt')?current + 1:current - 1; |
---|
218 | |
---|
219 | //we want a circular slideshow, |
---|
220 | //so we need to check the limits of current |
---|
221 | if(current == total) current = 0; |
---|
222 | else if(current < 0) current = total - 1; |
---|
223 | |
---|
224 | |
---|
225 | |
---|
226 | //flip the thumb |
---|
227 | $tf_thumbs.flip({ |
---|
228 | color : 'rgb(255,255,255)', |
---|
229 | direction : dir, |
---|
230 | speed : 400, |
---|
231 | onBefore : function(){ |
---|
232 | //the new thumb is set here |
---|
233 | var content = '<span id="tf_zoom" class="tf_zoom ' + $tf_bg_images.eq(current).attr('Z') + '"></span>'; |
---|
234 | if($tf_bg_images.eq(current).attr('Z')=='thumb'){ |
---|
235 | content += '<span id="tf_info" class="tf_info" onclick="$lb.launch({url:' + $tf_bg_images.eq(current).attr('link') + '})"></span>' |
---|
236 | content +='<img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/>';} |
---|
237 | else{content +='<a href="' + $tf_bg_images.eq(current).attr('link') + '"><img src="' + $tf_bg_images.eq(current).attr('longdesc') + '" alt="Thumb' + (current+1) + '"/></a>';} |
---|
238 | $tf_thumbs.html(content); |
---|
239 | $tf_pattern.addClass('visible') |
---|
240 | .removeClass('hide'); |
---|
241 | $('.titrePage').addClass('visible') |
---|
242 | .removeClass('hide'); |
---|
243 | $('.additional_info').addClass('visible') |
---|
244 | .removeClass('hide'); |
---|
245 | $('.infor').addClass('visible') |
---|
246 | .removeClass('hide'); |
---|
247 | $('.footer').addClass('visible') |
---|
248 | .removeClass('hide'); |
---|
249 | $('.tf_thumbs').addClass('visible') |
---|
250 | .removeClass('hide'); |
---|
251 | $('.tf_next').addClass('visible') |
---|
252 | .removeClass('hidedi'); |
---|
253 | $('.tf_prev').addClass('visible') |
---|
254 | .removeClass('hidedi'); |
---|
255 | $('.tf_info').addClass('visible') |
---|
256 | .removeClass('hidedi'); |
---|
257 | $('.tf_fullscreen').addClass('hidedi') |
---|
258 | .removeClass('visible'); |
---|
259 | |
---|
260 | } |
---|
261 | }); |
---|
262 | |
---|
263 | //we get the next image |
---|
264 | var $tf_bg_img_next = $tf_bg_images.eq(current), |
---|
265 | //its dimentions |
---|
266 | dim = getImageDim($tf_bg_img_next), |
---|
267 | //the top should be one that makes the image out of the viewport |
---|
268 | //the image should be positioned up or down depending on the direction |
---|
269 | top = (dir == 'tb')?$(window).height() + 'px':-parseFloat(dim.height,10) + 'px'; |
---|
270 | |
---|
271 | //set the returned values and show the next image |
---|
272 | $tf_bg_img_next.css({ |
---|
273 | width : dim.width, |
---|
274 | height : dim.height, |
---|
275 | left : dim.left, |
---|
276 | top : top |
---|
277 | }).show(); |
---|
278 | |
---|
279 | //now slide it to the viewport |
---|
280 | $tf_bg_img_next.stop().animate({ |
---|
281 | top : dim.top |
---|
282 | },1000); |
---|
283 | |
---|
284 | //we want the old image to slide in the same direction, out of the viewport |
---|
285 | var slideTo = (dir == 'bt')?-$tf_bg_img.height() + 'px':$(window).height() + 'px'; |
---|
286 | $tf_bg_img.stop().animate({ |
---|
287 | top : slideTo |
---|
288 | },1000,function(){ |
---|
289 | //hide it |
---|
290 | $(this).hide(); |
---|
291 | //the $tf_bg_img is now the shown image |
---|
292 | $tf_bg_img = $tf_bg_img_next; |
---|
293 | //show the description for the new image |
---|
294 | |
---|
295 | $tf_content_wrapper.children() |
---|
296 | .eq(current) |
---|
297 | .show(); |
---|
298 | |
---|
299 | |
---|
300 | }); |
---|
301 | //hide the current description |
---|
302 | $tf_content_wrapper.children(':visible') |
---|
303 | .hide() |
---|
304 | |
---|
305 | } |
---|
306 | } |
---|
307 | //animate the image to fit in the viewport |
---|
308 | function resize($img){ |
---|
309 | var w_w = $(window).width(), |
---|
310 | w_h = $(window).height()-35, |
---|
311 | i_w = $img.width(), |
---|
312 | i_h = $img.height(), |
---|
313 | r_i = i_h / i_w, |
---|
314 | new_w,new_h; |
---|
315 | |
---|
316 | if(i_w > i_h){ |
---|
317 | new_w = w_w; |
---|
318 | new_h = w_w * r_i; |
---|
319 | |
---|
320 | if(new_h > w_h){ |
---|
321 | new_h = w_h; |
---|
322 | new_w = w_h / r_i; |
---|
323 | } |
---|
324 | } |
---|
325 | else{ |
---|
326 | new_h = w_w * r_i; |
---|
327 | new_w = w_w; |
---|
328 | |
---|
329 | if(new_h > w_h){ |
---|
330 | new_h = w_h; |
---|
331 | new_w = w_h / r_i; |
---|
332 | } |
---|
333 | |
---|
334 | } |
---|
335 | |
---|
336 | $img.animate({ |
---|
337 | width : new_w + 'px', |
---|
338 | height : new_h + 'px', |
---|
339 | top : '35px', |
---|
340 | left : (w_w / 2)-(new_w / 2) |
---|
341 | },550); |
---|
342 | } |
---|
343 | |
---|
344 | //get dimentions of the image, |
---|
345 | //in order to make it full size and centered |
---|
346 | function getImageDim($img){ |
---|
347 | var w_w = $(window).width(), |
---|
348 | w_h = $(window).height(), |
---|
349 | r_w = w_h / w_w, |
---|
350 | i_w = $img.width(), |
---|
351 | i_h = $img.height(), |
---|
352 | r_i = i_h / i_w, |
---|
353 | new_w,new_h, |
---|
354 | new_left,new_top; |
---|
355 | |
---|
356 | if(r_w > r_i){ |
---|
357 | new_h = w_h; |
---|
358 | new_w = w_h / r_i; |
---|
359 | } |
---|
360 | else{ |
---|
361 | new_h = w_w * r_i; |
---|
362 | new_w = w_w; |
---|
363 | } |
---|
364 | |
---|
365 | |
---|
366 | return { |
---|
367 | width : new_w + 'px', |
---|
368 | height : new_h + 'px', |
---|
369 | left : (w_w - new_w) / 2 + 'px', |
---|
370 | top : (w_h - new_h) / 2 + 'px' |
---|
371 | }; |
---|
372 | } |
---|
373 | }); |
---|
374 | }); |
---|
375 | })(jQuery); |
---|