Ignore:
Timestamp:
May 28, 2014, 11:14:27 PM (6 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.