source: extensions/Slimi/template/mainpage_categories.tpl @ 28586

{define_derivative name='carousel' width='300' height='350' min_width='350'}

{footer_script}{literal}
(function($) {
        $(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: {/literal}{$Slimi.carousel_speed}{literal},
                        manualContinuousScrolling: true,
                        mousewheelScrolling: "allDirections",
                
                });     
                                
                $("div.carousel").bind("mouseover", function() {
                        $(this).smoothDivScroll("stopAutoScrolling");
                }).bind("mouseout", function() {
                        $(this).smoothDivScroll("startAutoScrolling");
                });     
        
                
        });
})(jQuery);
{/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}
                                                                        {if !empty($cat.icon_ts)}
                                                                        <img title="{$cat.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent{if $cat.icon_ts.IS_CHILD_DATE}_by_child{/if}.png" alt="(!)">
                                                                        {/if}
                                                                </h3>
                                                                <div class="Nb_images">
                                                                {if isset($cat.INFO_DATES) }
                                                                <p class="dates">{$cat.INFO_DATES}</p>
                                                                {/if}
                                                                <p >{$cat.CAPTION_NB_IMAGES}</p>
                                                                {if not empty($cat.DESCRIPTION)}
                                                                <p>{$cat.DESCRIPTION}</p>
                                                                {/if}
                                                                </div>
                                                        </div>
                                                </a>
                                                </div>
                        {/foreach}
</div>