Ignore:
Timestamp:
05/28/14 23:14:27 (5 years ago)
Author:
Miklfe
Message:

nouveau carousel: mousewheel; scrollable pour les écrans tactiles
nouvelle lightbox: Fancybox

File:
1 edited

Legend:

Unmodified
Added
Removed
  • extensions/Slim/template/thumbnails.tpl

    r25997 r28556  
    1 {define_derivative name='carousel' width='300' height='300' min_width='300'} 
     1{define_derivative name='carousel' width='300' height='350' min_width='350'} 
    22{php} 
    33    global $page, $template; 
     
    66{/php} 
    77 
     8{footer_script}{literal} 
     9$(document).ready(function () { 
     10        var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)), 
     11                start; 
     12         
     13        if (isTouch==true){ 
     14        start=""; 
     15        }else{ 
     16        start="onStart"; 
     17        }; 
     18         
     19        $("div.carousel").smoothDivScroll({ 
     20                autoScrollingMode: start, 
     21                touchScrolling: true, 
     22                autoScrollingStep:5, 
     23                mousewheelScrolling: "allDirections", 
     24                manualContinuousScrolling: true, 
     25        });      
     26                         
     27        $("div.carousel").bind("mouseover", function() { 
     28                $(this).smoothDivScroll("stopAutoScrolling"); 
     29        }).bind("mouseout", function() { 
     30                $(this).smoothDivScroll("startAutoScrolling"); 
     31        });      
     32         
     33         
     34        $('.fancybox').fancybox({ 
     35                helpers : { 
     36                title : { 
     37                        type : 'over' 
     38                }, 
     39                },       
     40                afterLoad: function() { 
     41                $("div.carousel").smoothDivScroll("stopAutoScrolling"); 
     42                }, 
     43                afterClose: function() { 
     44                $("div.carousel").smoothDivScroll("startAutoScrolling"); 
     45                } 
     46        }); 
     47}); 
     48{/literal}{/footer_script} 
    849 
    9 <div id="carousel"> 
    10         <div id="wrap"> 
    11                 <div class="jcarousel"> 
    12                         <ul> 
     50                 
     51                         
     52 
     53 
     54        <div class="carousel"> 
    1355                        {if !empty($category_thumbnails)} 
    14                                 {foreach from=$category_thumbnails item=cat} 
    15                                 <li> 
    16                                         <div class="illustration"> 
    17                                                 <a href="{$cat.URL}"> 
    18                                                         <img src="{$pwg->derivative_url($carousel, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}" min-width="{$carousel->max_width()}" height="{$carousel->max_height()-22}"/> 
     56                        {foreach from=$category_thumbnails item=cat} 
     57                                                <div class="illustration"> 
     58                                                        <a href="{$cat.URL}"> 
     59                                                                <img src="{$pwg->derivative_url($carousel, $cat.representative.src_image)}" alt="{$cat.TN_ALT}" title="{$cat.NAME|@replace:'"':' '|@strip_tags:false} - {'display this album'|@translate}" min-width="{$carousel->max_width()}" height="{$carousel->max_height()-22}"/> 
     60                                                         
     61                                                <div class="CatMPdescription"> 
     62                                                        <h3> 
     63                                                                {$cat.NAME} 
     64                                                        </h3> 
     65                                                        <div> 
     66                                                                {$cat.CAPTION_NB_IMAGES} 
     67                                                </div> 
     68                                                        </div>   
    1969                                                </a> 
    20                                         </div> 
    21                                         <div class="CatMPdescription"> 
    22                                                 <h3> 
    23                                                         <a href="{$cat.URL}">{$cat.NAME}</a> 
    24                                                 </h3> 
    25                                                 <div> 
    26                                                         {$cat.CAPTION_NB_IMAGES} 
    27                                                 </div>   
    28                                         </div> 
    29                                 </li> 
    30                                 {/foreach} 
     70                                                </div> 
     71                        {/foreach} 
    3172                        {/if} 
    3273                                {foreach from=$thumbnails item=thumbnail} 
    3374                                {assign var=derivative value=$pwg->derivative($carousel, $thumbnail.src_image)} 
    34                                 <li> 
    3575                                        <div class="illustration"> 
    36                                                 <a href="{if ($Slim.style_slim)!=3}{$thumbnail.path}" class="lytebox" rev="slide:true group:name showNavigation:true navType:1 slideInterval:6000"{else}{$thumbnail.URL}"{/if} title="{$thumbnail.NAME|strip_tags:false|replace:'\'':'&#39;'|replace:'"':'&quot;'}"> 
     76                                                <a href="{if ($Slim.style_slim)!=3}{$thumbnail.path}" class="fancybox" data-fancybox-group="gallery"{else}{$thumbnail.URL}"{/if} title="{$thumbnail.NAME|strip_tags:false|replace:'\'':'&#39;'|replace:'"':'&quot;'}"> 
    3777                                                <img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" height="{$carousel->max_height()-22}"/> 
    3878                                                {if $SHOW_THUMBNAIL_CAPTION } 
     
    62102                                                </a>     
    63103                                        </div>   
    64                                 </li> 
    65104                                {/foreach} 
    66                         </ul> 
    67                 </div> 
    68105        </div> 
    69         <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
    70     <a href="#" class="jcarousel-control-next">&rsaquo;</a> 
    71 </div> 
     106 
Note: See TracChangeset for help on using the changeset viewer.