source: extensions/Slim/template/mainpage_categories.tpl @ 28556

{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}
                                                <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}"/>
                                                        
                                                <div class="CatMPdescription">
                                                        <h3>
                                                                {$cat.NAME}
                                                        </h3>
                                                        <div>
                                                                {$cat.CAPTION_NB_IMAGES}
                                                </div>
                                                        </div>  
                                                </a>
                                                </div>
                        {/foreach}
</div>