Changeset 28556 for extensions/Slim/template/mainpage_categories.tpl

Timestamp:

May 28, 2014, 11:14:27 PM (10 years ago)

Author:

Miklfe

Message:

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

File:

• extensions/Slim/template/mainpage_categories.tpl (modified) (1 diff)

extensions/Slim/template/mainpage_categories.tpl

@@ -1 @@
-{define_derivative name='carousel' width='300' height='300' min_width='300'}
-<div id="carousel">
-<div id="wrap">
-        <div class="jcarousel">
-                <ul>
+{define_derivative name='carousel' width='300' height='350' min_width='350'}
+
+{footer_script}{literal}
+$(document).ready(function () {
+        var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
+                start;
+        
+        if (isTouch==true){
+        start="";
+        }else{
+        start="onStart";
+        };
+        
+        $("div.carousel").smoothDivScroll({
+                autoScrollingMode: start,
+                touchScrolling: true,
+                autoScrollingStep: 5,
+                mousewheelScrolling: "allDirections",
+                manualContinuousScrolling: true,
+                
+        });     
+                        
+        $("div.carousel").bind("mouseover", function() {
+                $(this).smoothDivScroll("stopAutoScrolling");
+        }).bind("mouseout", function() {
+                $(this).smoothDivScroll("startAutoScrolling");
+        });     
+});
+{/literal}{/footer_script}
+
+<div class="carousel">
                         {foreach from=$category_thumbnails item=cat}
-                                <li>
                                                 <div class="illustration">
                                                         <a href="{$cat.URL}">
                                                                 <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}"/>
-                                                        </a>
-                                                </div>
+                                                        
                                                 <div class="CatMPdescription">
                                                         <h3>
-                                                                <a href="{$cat.URL}">{$cat.NAME}</a>
+                                                                {$cat.NAME}
                                                         </h3>
                                                         <div>
                                                                 {$cat.CAPTION_NB_IMAGES}
+                                                </div>
                                                         </div>  
+                                                </a>
                                                 </div>
-                                </li>
                         {/foreach}
-                </ul>
-        </div>
 </div>
-        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
-    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
-</div>