Changeset 28503 for extensions/Slide

Timestamp:

May 18, 2014, 11:01:51 PM (10 years ago)

Author:

Miklfe

Message:

 

Location:

extensions/Slide

Files:

• js/plugin/SlideGThumb.js (modified) (2 diffs)
• js/slide.js (modified) (8 diffs)
• theme.css (modified) (1 diff)

extensions/Slide/js/plugin/SlideGThumb.js

@@ -7 +7 @@
  */
  
-function _GThumb(){
+function _SlideGThumb(){
         var $layerShow  = $('body').data('layerShow');
         if($('#the_page', $layerShow).hasClass('GThumb')) {
                 if ($('body').hasClass('GThumb')){
-                        $.getScript('./plugins/GThumb/js/jquery.ba-resize.min.js', function(){
-                                $.getScript('./plugins/MyPiwiShop/js/gthumb.js',function(){
+                                $.getScript('./plugins/GThumb/js/jquery.ba-resize.min.js',function(){
+                                
                                 _Gthumb_init();
                                 $('body').removeClass('GThumb').addClass('GThumbReady');
                                 });
-                        })
                 }else{
                         _Gthumb_init()
                 };
         }
+        
         function _Gthumb_init(){
                 var     $ele                            = $('#the_page', $layerShow),
@@ -28 +28 @@
                         $gthumb_big_w           = $ele.data ('gtw'),
                         $gthumb_big_h           = $ele.data ('gth');
-                                
-                GThumb.max_height       = $gthumb_opt.height;
-                GThumb.margin           = $gthumb_opt.margin;
-                GThumb.method           = $gthumb_opt.method;
-                GThumb.big_thumb        = {id:$gthumb_big_id, src:$gthumb_big_url,width:$gthumb_big_w,height:$gthumb_big_h};
+
+                        GThumb.max_height       = $gthumb_opt.height;
+                        GThumb.margin           = Number($gthumb_opt.margin);
+                        GThumb.method           = $gthumb_opt.method;
+                        GThumb.big_thumb        = {id:$gthumb_big_id, src:$gthumb_big_url,width:$gthumb_big_w,height:$gthumb_big_h};
 
                 GThumb.build();
                 $(window).bind('RVTS_loaded', GThumb.build);
+                
                 $('#thumbnails', $layerShow).resize(GThumb.process);
                 $('#thumbnails .gthumb', $layerShow).css({marginRight:GThumb.margin, marginBottom:GThumb.margin});
         };
 };
+
+
+
+var GThumb = {
+
+  max_height: 200,
+  margin: 10,
+  max_first_thumb_width: 0.7,
+  big_thumb: null,
+  small_thumb: null,
+  method: 'crop',
+  t: new Array,
+
+  build: function () {
+var $layerShow  = $('body').data('layerShow');
+    GThumb.t = new Array;
+    jQuery('#thumbnails img.thumbnail', $layerShow).each(function(index) {
+      width = parseInt(jQuery(this).attr('width'));
+      height = parseInt(jQuery(this).attr('height'));
+      th = {index:index,width:width,height:height,real_width:width,real_height:height};
+      if (height < GThumb.max_height) {
+        th.width = Math.round(GThumb.max_height * width / height);
+        th.height = GThumb.max_height;
+      }
+      GThumb.t.push(th);
+    });
+
+    first = GThumb.t[0];
+    GThumb.small_thumb = {index:first.index,width:first.real_width,height:first.real_height,src:jQuery('#thumbnails img.thumbnail:first', $layerShow).attr('src')}
+
+    jQuery.resize.throttleWindow = false;
+    jQuery.resize.delay = 50;
+    GThumb.process();
+  },
+
+  process: function() {
+var $layerShow  = $('body').data('layerShow');
+
+    var width_count = GThumb.margin;
+    var line = 1;
+    var round_rest = 0;
+    var main_width = jQuery('#thumbnails', $layerShow).width();
+    var first_thumb = jQuery('#thumbnails img.thumbnail:first', $layerShow);
+    var best_size = {width:1,height:1};
+
+    if (GThumb.big_thumb != null && GThumb.big_thumb.height < main_width * GThumb.max_first_thumb_width) {
+
+      // Compute best size for landscape picture (we choose bigger height)
+      min_ratio = Math.min(1.05, GThumb.big_thumb.width/GThumb.big_thumb.height);
+
+      for(width = GThumb.big_thumb.width; width/best_size.height>=min_ratio; width--) {
+        width_count = GThumb.margin;
+        height = GThumb.margin;
+        max_height = 0;
+        available_width = main_width - (width + GThumb.margin);
+        line = 1;
+        for (i=1;i<GThumb.t.length;i++) {
+
+          width_count += GThumb.t[i].width + GThumb.margin;
+          max_height = Math.max(GThumb.t[i].height, max_height);
+
+          if (width_count > available_width) {
+            ratio = width_count / available_width;
+            height += Math.round(max_height / ratio);
+            line++;
+            max_height = 0;
+            width_count = GThumb.margin;
+            if (line > 2) {
+              if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) {
+                best_size = {width:width,height:height};
+              }
+              break;
+            }
+          }
+        }
+        if (line <= 2) {
+          if (max_height == 0 || line == 1) {
+            height = GThumb.big_thumb.height;
+          } else {
+            height += max_height;
+          }
+          if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) {
+            best_size = {width:width,height:height}
+          }
+        }
+      }
+
+      if (GThumb.big_thumb.src != first_thumb.attr('src')) {
+        first_thumb.attr('src', GThumb.big_thumb.src).attr({width:GThumb.big_thumb.width,height:GThumb.big_thumb.height});
+        GThumb.t[0].width = GThumb.big_thumb.width;
+        GThumb.t[0].height = GThumb.big_thumb.height;
+      }
+      GThumb.t[0].crop = best_size.width;
+      GThumb.resize(first_thumb, GThumb.big_thumb.width, GThumb.big_thumb.height, best_size.width, best_size.height, true);
+
+    }
+
+    if (best_size.width == 1) {
+      if (GThumb.small_thumb != null && GThumb.small_thumb.src != first_thumb.attr('src')) {  
+        first_thumb.prop('src', GThumb.small_thumb.src).attr({width:GThumb.small_thumb.width,height:GThumb.small_thumb.height});
+        GThumb.t[0].width = GThumb.small_thumb.width;
+        GThumb.t[0].height = GThumb.small_thumb.height;
+      }
+      GThumb.t[0].crop = false;
+    }
+
+    width_count = GThumb.margin;
+    max_height = 0;
+    line = 1;
+    thumb_process = new Array;
+
+    for (i=GThumb.t[0].crop!=false?1:0;i<GThumb.t.length;i++) {
+
+      width_count += GThumb.t[i].width + GThumb.margin;
+      max_height = Math.max(GThumb.t[i].height, max_height);
+      thumb_process.push(GThumb.t[i]);
+
+      available_width = main_width;
+      if (line <= 2 && GThumb.t[0].crop !== false) {
+        available_width -= (GThumb.t[0].crop + GThumb.margin);
+      }
+
+      if (width_count > available_width) {
+
+        last_thumb = GThumb.t[i].index;
+        ratio = width_count / available_width;
+        new_height = Math.round(max_height / ratio);
+        round_rest = 0;
+        width_count = GThumb.margin;
+
+        for (j=0;j<thumb_process.length;j++) {
+
+          if (thumb_process[j].index == last_thumb) {
+            new_width = available_width - width_count - GThumb.margin;
+          } else {
+            new_width = (thumb_process[j].width + round_rest) / ratio;
+            round_rest = new_width - Math.round(new_width);
+            new_width = Math.round(new_width);
+          }
+          GThumb.resize(jQuery('#thumbnails img.thumbnail', $layerShow).eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, new_width, new_height, false);
+
+          width_count += new_width + GThumb.margin;
+        }
+        thumb_process = new Array;
+        width_count = GThumb.margin;
+        max_height = 0;
+        line++;
+      }
+    }
+
+    // Last line does not need to be cropped
+    for (j=0;j<thumb_process.length;j++) {
+      GThumb.resize(jQuery('#thumbnails img.thumbnail', $layerShow).eq(thumb_process[j].index), thumb_process[j].real_width, thumb_process[j].real_height, thumb_process[j].width, max_height, false);
+    }
+
+    if (main_width != jQuery('#thumbnails', $layerShow).width()) {
+      GThumb.process();
+    }
+  },
+
+  resize: function(thumb, width, height, new_width, new_height, is_big) {
+    if (GThumb.method == 'resize' || height < new_height || width < new_width) {
+      real_width = new_width;
+      real_height = new_height;
+      width_crop = 0;
+      height_crop = 0;
+
+      if (is_big) {
+        if (width - new_width > height - new_height) {
+          real_width = Math.round(new_height * width / height);
+          width_crop = Math.round((real_width - new_width)/2);
+        } else {
+          real_height = Math.round(new_width * height / width);
+          height_crop = Math.round((real_height - new_height)/2);
+        }
+      }
+      thumb.css({
+        height: real_height+'px',
+        width: real_width+'px'
+      });
+    } else {
+      thumb.css({height: '', width: ''});
+      height_crop = Math.round((height - new_height)/2);
+      width_crop = Math.round((width - new_width)/2);
+    }
+
+    thumb.parents('li').css({
+      height: new_height+'px',
+      width: new_width+'px'
+    });
+    thumb.parent('a').css({
+      clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)',
+      top: -height_crop+'px',
+      left: -width_crop+'px'
+    });
+  }
+}

extensions/Slide/js/slide.js

@@ -17 +17 @@
                 var $w_w                = $(window).width(),
                         $w_h            = $(window).height(),
-                        $tab            = 40,
+                //      $tab            = 40,
                         i                       = 0,
                         $layerShow      = $('#layer-0'),
@@ -321 +321 @@
                         };
                         if($('body').hasClass('GThumb')||$('body').hasClass('GThumbReady')) {
-                                _GThumb()
+                                _SlideGThumb()
                         };
                         if($('body').hasClass('MyPiwiShop')||$('body').hasClass('MyPiwiShopReady')) {
@@ -336 +336 @@
                 
                 function _load( $url ) {
+                                        
+                        if(i<3){
+                                var $tab        = 40 * i,
+                                        $res    = 40;                   
+                        }else if(i==3){ 
+                                var $tab        = (20 * (i-1))+ 40,
+                                        $res    = 0;                    
+                        } else { 
+                                var     $tab    = (20 * (i-1))+ 40,
+                                        $res    = 20;
+                        }       
+
                         var     $z                              = (100 / i).toFixed(),
-                                $tab                    = 40 * i,
                                 $pageslide_w    = $w_w - $tab,
                                 $href                   = $url + ' #the_page';
-                                
+                
+                                        
+                                        
                         $('body').append($('<div />').attr('class','pageslide').css({ left: 'auto', right: '-' + $w_w + 'px' }));
                         $('.pageslide').attr('id', function(i){
@@ -348 +361 @@
                         var $layerPrev          = $('#layer-' + (i - 1)),
                                 $layerShow              = $('#layer-' + i);
-
+        
                         $layerShow.css({'z-index'       : $z,
                                                         width           : $pageslide_w +'px'
@@ -355 +368 @@
                         $('body').data('layerPrev',$layerPrev);
                         $('body').data( 'i',i);
+                        
                         $layerShow.load( $href, function(){
+                                if(i==3){
+                                                $('.pageslide:lt(-2)').each(function(e){
+                                                var m           = parseInt($(this).css('marginLeft')),
+                                                        newM    = m-(20*(e+1));
+                                                $(this).css({marginLeft: newM});
+                                                $('.tab', this).addClass('tabMin');
+                                        //console.debug(e)
+                                                e++
+                                                });
+
+                                }else if(i>3){
+                                        $('.pageslide:nth-last-child(3)').each(function(){
+                                                var m           = parseInt($(this).css('marginLeft')),
+                                                        newM    = m-20;
+                                                $(this).css({marginLeft: newM});
+                                                $('.tab', this).addClass('tabMin');
+                                        });
+                                }
+                                
                                 $layerPrev      .css({right:'auto'})
-                                                        .animate({marginLeft: - $pageslide_w + ((i - 1) * 40)}, 1000);
+                                                        .animate({marginLeft: - (($pageslide_w-$tab)+$res)}, 1000);
                                 $layerShow      .show()
                                                         .animate({right: 0}, 1000)
@@ -370 +403 @@
                                 _init_page($url, $pageslide_w)
                         });
-                };
+
+                };
+
 
                 function _selectPageSlide(){
@@ -616 +651 @@
                         _tabs_dragbar();
                         $layerShow.animate({left: $w_w}, 1000,function(){
+                        $layerBack.nextAll('.pageslide').remove();
+                                var $layerPrev = $layerBack.prev
                                 if($('#slideshow').length){
                                         var $inter              = $('#slideshow').data('e').interval;
@@ -621 +658 @@
                                         clearTimeout($inter);
                                 };
-                                $layerBack.nextAll('.pageslide').remove();
-                                var $layerPrev = $layerBack.prev
-                        });
-                        $layerBack.css({right:'auto'}).animate({marginLeft:($newI * 40)}, 1000);
+                        });
+                        
+                        if($('.tab', $layerBack).hasClass('tabMin') & $newI > 3){
+                                $layerBack.css({right:'auto'}).animate({marginLeft:(($newI-1) * 20)+40}, 1000);
+                        }else{
+                                $layerBack.css({right:'auto'}).animate({marginLeft:($newI * 40)}, 1000);
+                        };
+                        
                         i                       = $newI;
                         var     $layerPrev      = $('#layer-' + (i - 1));
+                        
+                        if($('.tab', $layerPrev).hasClass('tabMin')){
+                                if($newI<3){
+                                        $('.pageslide:lt(-2)').each(function(e){
+                                                var m = parseInt($(this).css('marginLeft')),
+                                                        newM=m+(20*(e+1));
+                                                $(this).css({marginLeft: newM});
+                                                $('.tab', this).removeClass('tabMin');
+                                                e++
+                                        });
+                                }else{
+                                        var m           = parseInt($layerPrev.css('marginLeft')),
+                                                newM    = m+20;
+                                                        
+                                        $layerPrev.css({marginLeft: newM})
+                                        $('.tab', $layerPrev).removeClass('tabMin');
+                                }
+                        }
+                        
+                        var $newlayerShow       = $('body').data('layerShow');
+                        $('.tab', $newlayerShow).removeClass('tabMin');
+
                         $('body').data( 'i',i);         
                         $('body').data('layerPrev', $layerPrev)

extensions/Slide/theme.css

@@ -720 +720 @@
         background:                                     none repeat scroll 0% 0% #333333;
 }
-
+.tabMin:hover{right:-20px}
 /*____________________________SLIDESHOW___________________________________________*/
 #slideshow{