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