source: extensions/Full_Background/js/full_BG.js @ 21903

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