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/mainpage_categories.tpl

    r25997 r28556  
    1 {define_derivative name='carousel' width='300' height='300' min_width='300'} 
    2 <div id="carousel"> 
    3 <div id="wrap"> 
    4         <div class="jcarousel"> 
    5                 <ul> 
     1{define_derivative name='carousel' width='300' height='350' min_width='350'} 
     2 
     3{footer_script}{literal} 
     4$(document).ready(function () { 
     5        var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)), 
     6                start; 
     7         
     8        if (isTouch==true){ 
     9        start=""; 
     10        }else{ 
     11        start="onStart"; 
     12        }; 
     13         
     14        $("div.carousel").smoothDivScroll({ 
     15                autoScrollingMode: start, 
     16                touchScrolling: true, 
     17                autoScrollingStep: 5, 
     18                mousewheelScrolling: "allDirections", 
     19                manualContinuousScrolling: true, 
     20                 
     21        });      
     22                         
     23        $("div.carousel").bind("mouseover", function() { 
     24                $(this).smoothDivScroll("stopAutoScrolling"); 
     25        }).bind("mouseout", function() { 
     26                $(this).smoothDivScroll("startAutoScrolling"); 
     27        });      
     28}); 
     29{/literal}{/footer_script} 
     30 
     31<div class="carousel"> 
    632                        {foreach from=$category_thumbnails item=cat} 
    7                                 <li> 
    833                                                <div class="illustration"> 
    934                                                        <a href="{$cat.URL}"> 
    1035                                                                <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}"/> 
    11                                                         </a> 
    12                                                 </div> 
     36                                                         
    1337                                                <div class="CatMPdescription"> 
    1438                                                        <h3> 
    15                                                                 <a href="{$cat.URL}">{$cat.NAME}</a> 
     39                                                                {$cat.NAME} 
    1640                                                        </h3> 
    1741                                                        <div> 
    1842                                                                {$cat.CAPTION_NB_IMAGES} 
     43                                                </div> 
    1944                                                        </div>   
     45                                                </a> 
    2046                                                </div> 
    21                                 </li> 
    2247                        {/foreach} 
    23                 </ul> 
    24         </div> 
    2548</div> 
    26         <a href="#" class="jcarousel-control-prev">&lsaquo;</a> 
    27     <a href="#" class="jcarousel-control-next">&rsaquo;</a> 
    28 </div> 
Note: See TracChangeset for help on using the changeset viewer.