Changeset 28503


Ignore:
Timestamp:
05/18/14 23:01:51 (5 years ago)
Author:
Miklfe
Message:
 
Location:
extensions/Slide
Files:
3 edited

Legend:

Unmodified
Added
Removed
  • extensions/Slide/js/plugin/SlideGThumb.js

    r27780 r28503  
    77 */ 
    88  
    9 function _GThumb(){ 
     9function _SlideGThumb(){ 
    1010        var $layerShow  = $('body').data('layerShow'); 
    1111        if($('#the_page', $layerShow).hasClass('GThumb')) { 
    1212                if ($('body').hasClass('GThumb')){ 
    13                         $.getScript('./plugins/GThumb/js/jquery.ba-resize.min.js', function(){ 
    14                                 $.getScript('./plugins/MyPiwiShop/js/gthumb.js',function(){ 
     13                                $.getScript('./plugins/GThumb/js/jquery.ba-resize.min.js',function(){ 
     14                                 
    1515                                _Gthumb_init(); 
    1616                                $('body').removeClass('GThumb').addClass('GThumbReady'); 
    1717                                }); 
    18                         }) 
    1918                }else{ 
    2019                        _Gthumb_init() 
    2120                }; 
    2221        } 
     22         
    2323        function _Gthumb_init(){ 
    2424                var     $ele                            = $('#the_page', $layerShow), 
     
    2828                        $gthumb_big_w           = $ele.data ('gtw'), 
    2929                        $gthumb_big_h           = $ele.data ('gth'); 
    30                                  
    31                 GThumb.max_height       = $gthumb_opt.height; 
    32                 GThumb.margin           = $gthumb_opt.margin; 
    33                 GThumb.method           = $gthumb_opt.method; 
    34                 GThumb.big_thumb        = {id:$gthumb_big_id, src:$gthumb_big_url,width:$gthumb_big_w,height:$gthumb_big_h}; 
     30 
     31                        GThumb.max_height       = $gthumb_opt.height; 
     32                        GThumb.margin           = Number($gthumb_opt.margin); 
     33                        GThumb.method           = $gthumb_opt.method; 
     34                        GThumb.big_thumb        = {id:$gthumb_big_id, src:$gthumb_big_url,width:$gthumb_big_w,height:$gthumb_big_h}; 
    3535 
    3636                GThumb.build(); 
    3737                $(window).bind('RVTS_loaded', GThumb.build); 
     38                 
    3839                $('#thumbnails', $layerShow).resize(GThumb.process); 
    3940                $('#thumbnails .gthumb', $layerShow).css({marginRight:GThumb.margin, marginBottom:GThumb.margin}); 
    4041        }; 
    4142}; 
     43 
     44 
     45 
     46var GThumb = { 
     47 
     48  max_height: 200, 
     49  margin: 10, 
     50  max_first_thumb_width: 0.7, 
     51  big_thumb: null, 
     52  small_thumb: null, 
     53  method: 'crop', 
     54  t: new Array, 
     55 
     56  build: function () { 
     57var $layerShow  = $('body').data('layerShow'); 
     58    GThumb.t = new Array; 
     59    jQuery('#thumbnails img.thumbnail', $layerShow).each(function(index) { 
     60      width = parseInt(jQuery(this).attr('width')); 
     61      height = parseInt(jQuery(this).attr('height')); 
     62      th = {index:index,width:width,height:height,real_width:width,real_height:height}; 
     63      if (height < GThumb.max_height) { 
     64        th.width = Math.round(GThumb.max_height * width / height); 
     65        th.height = GThumb.max_height; 
     66      } 
     67      GThumb.t.push(th); 
     68    }); 
     69 
     70    first = GThumb.t[0]; 
     71    GThumb.small_thumb = {index:first.index,width:first.real_width,height:first.real_height,src:jQuery('#thumbnails img.thumbnail:first', $layerShow).attr('src')} 
     72 
     73    jQuery.resize.throttleWindow = false; 
     74    jQuery.resize.delay = 50; 
     75    GThumb.process(); 
     76  }, 
     77 
     78  process: function() { 
     79var $layerShow  = $('body').data('layerShow'); 
     80 
     81    var width_count = GThumb.margin; 
     82    var line = 1; 
     83    var round_rest = 0; 
     84    var main_width = jQuery('#thumbnails', $layerShow).width(); 
     85    var first_thumb = jQuery('#thumbnails img.thumbnail:first', $layerShow); 
     86    var best_size = {width:1,height:1}; 
     87 
     88    if (GThumb.big_thumb != null && GThumb.big_thumb.height < main_width * GThumb.max_first_thumb_width) { 
     89 
     90      // Compute best size for landscape picture (we choose bigger height) 
     91      min_ratio = Math.min(1.05, GThumb.big_thumb.width/GThumb.big_thumb.height); 
     92 
     93      for(width = GThumb.big_thumb.width; width/best_size.height>=min_ratio; width--) { 
     94        width_count = GThumb.margin; 
     95        height = GThumb.margin; 
     96        max_height = 0; 
     97        available_width = main_width - (width + GThumb.margin); 
     98        line = 1; 
     99        for (i=1;i<GThumb.t.length;i++) { 
     100 
     101          width_count += GThumb.t[i].width + GThumb.margin; 
     102          max_height = Math.max(GThumb.t[i].height, max_height); 
     103 
     104          if (width_count > available_width) { 
     105            ratio = width_count / available_width; 
     106            height += Math.round(max_height / ratio); 
     107            line++; 
     108            max_height = 0; 
     109            width_count = GThumb.margin; 
     110            if (line > 2) { 
     111              if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) { 
     112                best_size = {width:width,height:height}; 
     113              } 
     114              break; 
     115            } 
     116          } 
     117        } 
     118        if (line <= 2) { 
     119          if (max_height == 0 || line == 1) { 
     120            height = GThumb.big_thumb.height; 
     121          } else { 
     122            height += max_height; 
     123          } 
     124          if (height >= best_size.height && width/height >= min_ratio && height<=GThumb.big_thumb.height) { 
     125            best_size = {width:width,height:height} 
     126          } 
     127        } 
     128      } 
     129 
     130      if (GThumb.big_thumb.src != first_thumb.attr('src')) { 
     131        first_thumb.attr('src', GThumb.big_thumb.src).attr({width:GThumb.big_thumb.width,height:GThumb.big_thumb.height}); 
     132        GThumb.t[0].width = GThumb.big_thumb.width; 
     133        GThumb.t[0].height = GThumb.big_thumb.height; 
     134      } 
     135      GThumb.t[0].crop = best_size.width; 
     136      GThumb.resize(first_thumb, GThumb.big_thumb.width, GThumb.big_thumb.height, best_size.width, best_size.height, true); 
     137 
     138    } 
     139 
     140    if (best_size.width == 1) { 
     141      if (GThumb.small_thumb != null && GThumb.small_thumb.src != first_thumb.attr('src')) {   
     142        first_thumb.prop('src', GThumb.small_thumb.src).attr({width:GThumb.small_thumb.width,height:GThumb.small_thumb.height}); 
     143        GThumb.t[0].width = GThumb.small_thumb.width; 
     144        GThumb.t[0].height = GThumb.small_thumb.height; 
     145      } 
     146      GThumb.t[0].crop = false; 
     147    } 
     148 
     149    width_count = GThumb.margin; 
     150    max_height = 0; 
     151    line = 1; 
     152    thumb_process = new Array; 
     153 
     154    for (i=GThumb.t[0].crop!=false?1:0;i<GThumb.t.length;i++) { 
     155 
     156      width_count += GThumb.t[i].width + GThumb.margin; 
     157      max_height = Math.max(GThumb.t[i].height, max_height); 
     158      thumb_process.push(GThumb.t[i]); 
     159 
     160      available_width = main_width; 
     161      if (line <= 2 && GThumb.t[0].crop !== false) { 
     162        available_width -= (GThumb.t[0].crop + GThumb.margin); 
     163      } 
     164 
     165      if (width_count > available_width) { 
     166 
     167        last_thumb = GThumb.t[i].index; 
     168        ratio = width_count / available_width; 
     169        new_height = Math.round(max_height / ratio); 
     170        round_rest = 0; 
     171        width_count = GThumb.margin; 
     172 
     173        for (j=0;j<thumb_process.length;j++) { 
     174 
     175          if (thumb_process[j].index == last_thumb) { 
     176            new_width = available_width - width_count - GThumb.margin; 
     177          } else { 
     178            new_width = (thumb_process[j].width + round_rest) / ratio; 
     179            round_rest = new_width - Math.round(new_width); 
     180            new_width = Math.round(new_width); 
     181          } 
     182          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); 
     183 
     184          width_count += new_width + GThumb.margin; 
     185        } 
     186        thumb_process = new Array; 
     187        width_count = GThumb.margin; 
     188        max_height = 0; 
     189        line++; 
     190      } 
     191    } 
     192 
     193    // Last line does not need to be cropped 
     194    for (j=0;j<thumb_process.length;j++) { 
     195      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); 
     196    } 
     197 
     198    if (main_width != jQuery('#thumbnails', $layerShow).width()) { 
     199      GThumb.process(); 
     200    } 
     201  }, 
     202 
     203  resize: function(thumb, width, height, new_width, new_height, is_big) { 
     204    if (GThumb.method == 'resize' || height < new_height || width < new_width) { 
     205      real_width = new_width; 
     206      real_height = new_height; 
     207      width_crop = 0; 
     208      height_crop = 0; 
     209 
     210      if (is_big) { 
     211        if (width - new_width > height - new_height) { 
     212          real_width = Math.round(new_height * width / height); 
     213          width_crop = Math.round((real_width - new_width)/2); 
     214        } else { 
     215          real_height = Math.round(new_width * height / width); 
     216          height_crop = Math.round((real_height - new_height)/2); 
     217        } 
     218      } 
     219      thumb.css({ 
     220        height: real_height+'px', 
     221        width: real_width+'px' 
     222      }); 
     223    } else { 
     224      thumb.css({height: '', width: ''}); 
     225      height_crop = Math.round((height - new_height)/2); 
     226      width_crop = Math.round((width - new_width)/2); 
     227    } 
     228 
     229    thumb.parents('li').css({ 
     230      height: new_height+'px', 
     231      width: new_width+'px' 
     232    }); 
     233    thumb.parent('a').css({ 
     234      clip: 'rect('+height_crop+'px, '+(new_width+width_crop)+'px, '+(new_height+height_crop)+'px, '+width_crop+'px)', 
     235      top: -height_crop+'px', 
     236      left: -width_crop+'px' 
     237    }); 
     238  } 
     239} 
  • extensions/Slide/js/slide.js

    r28049 r28503  
    1717                var $w_w                = $(window).width(), 
    1818                        $w_h            = $(window).height(), 
    19                         $tab            = 40, 
     19                //      $tab            = 40, 
    2020                        i                       = 0, 
    2121                        $layerShow      = $('#layer-0'), 
     
    321321                        }; 
    322322                        if($('body').hasClass('GThumb')||$('body').hasClass('GThumbReady')) { 
    323                                 _GThumb() 
     323                                _SlideGThumb() 
    324324                        }; 
    325325                        if($('body').hasClass('MyPiwiShop')||$('body').hasClass('MyPiwiShopReady')) { 
     
    336336                 
    337337                function _load( $url ) { 
     338                                         
     339                        if(i<3){ 
     340                                var $tab        = 40 * i, 
     341                                        $res    = 40;                    
     342                        }else if(i==3){  
     343                                var $tab        = (20 * (i-1))+ 40, 
     344                                        $res    = 0;                     
     345                        } else {  
     346                                var     $tab    = (20 * (i-1))+ 40, 
     347                                        $res    = 20; 
     348                        }        
     349 
    338350                        var     $z                              = (100 / i).toFixed(), 
    339                                 $tab                    = 40 * i, 
    340351                                $pageslide_w    = $w_w - $tab, 
    341352                                $href                   = $url + ' #the_page'; 
    342                                  
     353                 
     354                                         
     355                                         
    343356                        $('body').append($('<div />').attr('class','pageslide').css({ left: 'auto', right: '-' + $w_w + 'px' })); 
    344357                        $('.pageslide').attr('id', function(i){ 
     
    348361                        var $layerPrev          = $('#layer-' + (i - 1)), 
    349362                                $layerShow              = $('#layer-' + i); 
    350  
     363         
    351364                        $layerShow.css({'z-index'       : $z, 
    352365                                                        width           : $pageslide_w +'px' 
     
    355368                        $('body').data('layerPrev',$layerPrev); 
    356369                        $('body').data( 'i',i); 
     370                         
    357371                        $layerShow.load( $href, function(){ 
     372                                if(i==3){ 
     373                                                $('.pageslide:lt(-2)').each(function(e){ 
     374                                                var m           = parseInt($(this).css('marginLeft')), 
     375                                                        newM    = m-(20*(e+1)); 
     376                                                $(this).css({marginLeft: newM}); 
     377                                                $('.tab', this).addClass('tabMin'); 
     378                                        //console.debug(e) 
     379                                                e++ 
     380                                                }); 
     381 
     382                                }else if(i>3){ 
     383                                        $('.pageslide:nth-last-child(3)').each(function(){ 
     384                                                var m           = parseInt($(this).css('marginLeft')), 
     385                                                        newM    = m-20; 
     386                                                $(this).css({marginLeft: newM}); 
     387                                                $('.tab', this).addClass('tabMin'); 
     388                                        }); 
     389                                } 
     390                                 
    358391                                $layerPrev      .css({right:'auto'}) 
    359                                                         .animate({marginLeft: - $pageslide_w + ((i - 1) * 40)}, 1000); 
     392                                                        .animate({marginLeft: - (($pageslide_w-$tab)+$res)}, 1000); 
    360393                                $layerShow      .show() 
    361394                                                        .animate({right: 0}, 1000) 
     
    370403                                _init_page($url, $pageslide_w) 
    371404                        }); 
    372                 }; 
     405 
     406                }; 
     407 
    373408 
    374409                function _selectPageSlide(){ 
     
    616651                        _tabs_dragbar(); 
    617652                        $layerShow.animate({left: $w_w}, 1000,function(){ 
     653                        $layerBack.nextAll('.pageslide').remove(); 
     654                                var $layerPrev = $layerBack.prev 
    618655                                if($('#slideshow').length){ 
    619656                                        var $inter              = $('#slideshow').data('e').interval; 
     
    621658                                        clearTimeout($inter); 
    622659                                }; 
    623                                 $layerBack.nextAll('.pageslide').remove(); 
    624                                 var $layerPrev = $layerBack.prev 
    625                         }); 
    626                         $layerBack.css({right:'auto'}).animate({marginLeft:($newI * 40)}, 1000); 
     660                        }); 
     661                         
     662                        if($('.tab', $layerBack).hasClass('tabMin') & $newI > 3){ 
     663                                $layerBack.css({right:'auto'}).animate({marginLeft:(($newI-1) * 20)+40}, 1000); 
     664                        }else{ 
     665                                $layerBack.css({right:'auto'}).animate({marginLeft:($newI * 40)}, 1000); 
     666                        }; 
     667                         
    627668                        i                       = $newI; 
    628669                        var     $layerPrev      = $('#layer-' + (i - 1)); 
     670                         
     671                        if($('.tab', $layerPrev).hasClass('tabMin')){ 
     672                                if($newI<3){ 
     673                                        $('.pageslide:lt(-2)').each(function(e){ 
     674                                                var m = parseInt($(this).css('marginLeft')), 
     675                                                        newM=m+(20*(e+1)); 
     676                                                $(this).css({marginLeft: newM}); 
     677                                                $('.tab', this).removeClass('tabMin'); 
     678                                                e++ 
     679                                        }); 
     680                                }else{ 
     681                                        var m           = parseInt($layerPrev.css('marginLeft')), 
     682                                                newM    = m+20; 
     683                                                         
     684                                        $layerPrev.css({marginLeft: newM}) 
     685                                        $('.tab', $layerPrev).removeClass('tabMin'); 
     686                                } 
     687                        } 
     688                         
     689                        var $newlayerShow       = $('body').data('layerShow'); 
     690                        $('.tab', $newlayerShow).removeClass('tabMin'); 
     691 
    629692                        $('body').data( 'i',i);          
    630693                        $('body').data('layerPrev', $layerPrev) 
  • extensions/Slide/theme.css

    r27741 r28503  
    720720        background:                                     none repeat scroll 0% 0% #333333; 
    721721} 
    722  
     722.tabMin:hover{right:-20px} 
    723723/*____________________________SLIDESHOW___________________________________________*/ 
    724724#slideshow{ 
Note: See TracChangeset for help on using the changeset viewer.