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

Revision 28556, 3.1 KB checked in by Miklfe, 5 years ago (diff)

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

Line 
1{define_derivative name='carousel' width='300' height='350' min_width='350'}
2{php}
3    global $page, $template;
4    $template->assign('cat_name', $page['category']['name']);
5       
6{/php}
7
8{footer_script}{literal}
9$(document).ready(function () {
10        var isTouch = (('ontouchstart' in window) || (navigator.msMaxTouchPoints > 0)),
11                start;
12       
13        if (isTouch==true){
14        start="";
15        }else{
16        start="onStart";
17        };
18       
19        $("div.carousel").smoothDivScroll({
20                autoScrollingMode: start,
21                touchScrolling: true,
22                autoScrollingStep:5,
23                mousewheelScrolling: "allDirections",
24                manualContinuousScrolling: true,
25        });     
26                       
27        $("div.carousel").bind("mouseover", function() {
28                $(this).smoothDivScroll("stopAutoScrolling");
29        }).bind("mouseout", function() {
30                $(this).smoothDivScroll("startAutoScrolling");
31        });     
32       
33       
34        $('.fancybox').fancybox({
35                helpers : {
36                title : {
37                        type : 'over'
38                },
39                },     
40                afterLoad: function() {
41                $("div.carousel").smoothDivScroll("stopAutoScrolling");
42                },
43                afterClose: function() {
44                $("div.carousel").smoothDivScroll("startAutoScrolling");
45                }
46        });
47});
48{/literal}{/footer_script}
49
50               
51                       
52
53
54        <div class="carousel">
55                        {if !empty($category_thumbnails)}
56                        {foreach from=$category_thumbnails item=cat}
57                                                <div class="illustration">
58                                                        <a href="{$cat.URL}">
59                                                                <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}"/>
60                                                       
61                                                <div class="CatMPdescription">
62                                                        <h3>
63                                                                {$cat.NAME}
64                                                        </h3>
65                                                        <div>
66                                                                {$cat.CAPTION_NB_IMAGES}
67                                                </div>
68                                                        </div> 
69                                                </a>
70                                                </div>
71                        {/foreach}
72                        {/if}
73                                {foreach from=$thumbnails item=thumbnail}
74                                {assign var=derivative value=$pwg->derivative($carousel, $thumbnail.src_image)}
75                                        <div class="illustration">
76                                                <a href="{if ($Slim.style_slim)!=3}{$thumbnail.path}" class="fancybox" data-fancybox-group="gallery"{else}{$thumbnail.URL}"{/if} title="{$thumbnail.NAME|strip_tags:false|replace:'\'':'&#39;'|replace:'"':'&quot;'}">
77                                                <img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" height="{$carousel->max_height()-22}"/>
78                                                {if $SHOW_THUMBNAIL_CAPTION }
79                                                        <div class="CatMPdescription">
80                                                                <H3>
81                                                                        {$thumbnail.NAME}
82                                                                        {if !empty($thumbnail.icon_ts)}
83                                                                                <img title="{$thumbnail.icon_ts.TITLE}" src="{$ROOT_URL}{$themeconf.icon_dir}/recent.png" alt="(!)">
84                                                                        {/if}
85                                                                </h3>
86                                                                {if isset($thumbnail.NB_COMMENTS) or isset($thumbnail.NB_HITS)}
87                                                                        <div>
88                                                                        {if isset($thumbnail.NB_COMMENTS)}
89                                                                                <p class="{if 0==$thumbnail.NB_COMMENTS}zero {/if}nb-comments">
90                                                                                        {$pwg->l10n_dec('%d comment', '%d comments',$thumbnail.NB_COMMENTS)}
91                                                                                </p>
92                                                                        {/if}
93                                                                        {if isset($thumbnail.NB_HITS)}
94                                                                                <p class="{if 0==$thumbnail.NB_HITS}zero {/if}nb-hits">
95                                                                                        {$pwg->l10n_dec('%d hit', '%d hits',$thumbnail.NB_HITS)}
96                                                                                </p>
97                                                                        {/if}
98                                                                        </div>
99                                                                {/if}
100                                                        </div>
101                                                {/if}
102                                                </a>   
103                                        </div> 
104                                {/foreach}
105        </div>
106
Note: See TracBrowser for help on using the repository browser.