Changeset 25998 for extensions/Slimi/template

Timestamp:

Dec 17, 2013, 11:25:38 PM (10 years ago)

Author:

Miklfe

Message:

 

Location:

extensions/Slimi/template

Files:

• index.tpl (modified) (1 diff)
• mainpage_categories.tpl (modified) (2 diffs)
• thumbnails.tpl (modified) (3 diffs)

extensions/Slimi/template/index.tpl

@@ -145 +145 @@
 
 {if !empty($THUMBNAILS)}
-<ul class="thumbnails" id="thumbnails">
 {$THUMBNAILS}
-</ul>
+{footer_script}{literal}
+        $('.jcarousel')
+            .jcarousel({
+                 wrap: 'circular'
+            })          
+                        .jcarouselAutoscroll({
+                        autostart: false
+                        });     
+                        
+        $('.jcarousel-control-prev')
+            .on('jcarouselcontrol:active', function() {
+                $(this).removeClass('inactive');
+            })
+            .on('jcarouselcontrol:inactive', function() {
+                $(this).addClass('inactive');
+            })
+            .jcarouselControl({
+                target: '-=1'
+            });
+
+        $('.jcarousel-control-next')
+            .on('jcarouselcontrol:active', function() {
+                $(this).removeClass('inactive');
+            })
+            .on('jcarouselcontrol:inactive', function() {
+                $(this).addClass('inactive');
+            })
+            .jcarouselControl({
+                target: '+=1'
+            });
+{/literal}{/footer_script}
 {/if}
 
 {if empty($THUMBNAILS)}
-{if !empty($CATEGORIES)}{$CATEGORIES}{/if}
+{if !empty($CATEGORIES)}{$CATEGORIES}
+                {footer_script}{literal}
+        $('.jcarousel')
+            .jcarousel({
+                 wrap: 'circular'
+            })          
+                        .jcarouselAutoscroll({
+                        interval: 3000,
+                        target: '+=1',
+                        autostart: true
+                        });     
+                        
+        $('.jcarousel-control-prev')
+            .on('jcarouselcontrol:active', function() {
+                $(this).removeClass('inactive');
+            })
+            .on('jcarouselcontrol:inactive', function() {
+                $(this).addClass('inactive');
+            })
+            .jcarouselControl({
+                target: '-=1'
+            });
+
+        $('.jcarousel-control-next')
+            .on('jcarouselcontrol:active', function() {
+                $(this).removeClass('inactive');
+            })
+            .on('jcarouselcontrol:inactive', function() {
+                $(this).addClass('inactive');
+            })
+            .jcarouselControl({
+                target: '+=1'
+            });
+                
+                $('.jcarousel')
+                        .on('mouseenter', function(){
+                                $(this).jcarouselAutoscroll('stop')
+                        })
+                        .on('mouseleave', function(){
+                                $(this).jcarouselAutoscroll('start')
+                        });
+{/literal}{/footer_script}
+
+{/if}
 {/if}
 

extensions/Slimi/template/mainpage_categories.tpl

@@ -1 +1 @@
 {define_derivative name='carousel' width='300' height='300' min_width='300'}
-
-
-{html_style}
-.jcarousel-skin-cat .jcarousel-list li{ldelim}
-        min-width:{$carousel->max_width()}px;
-{/html_style}
-
-<div id="carouselcat">
-
+<div id="carousel">
 <div id="wrap">
-          <ul id="carousel" class="jcarousel-skin-cat">
-
+        <div class="jcarousel">
+          <ul>
                 {foreach from=$category_thumbnails item=cat}
-
-
                         <li>
                                         <div class="illustration">
@@ -40 +30 @@
                 {/foreach}
         </ul>
-{footer_script}{literal}
-function mycarousel_initCallback(carousel)
-{
-// Disable autoscrolling if the user clicks the prev or next button.
-    carousel.buttonNext.bind('click', function() {
-        carousel.startAuto(1);
-    });
-
-    carousel.buttonPrev.bind('click', function() {
-        carousel.startAuto(0);
-    });
-        
-        
-    // Pause autoscrolling if the user moves with the cursor over the clip.
-    carousel.clip.hover(function() {carousel.stopAuto();}, 
-                                                function() {carousel.startAuto();}
-                                                );
-};
-
-jQuery(document).ready(function() {
-    jQuery('#carousel').jcarousel({
-        auto: 1,
-                wrap: 'circular',
-                scroll: 2,
-                animation: 2000,
-                initCallback: mycarousel_initCallback,
-                
-    });
-});
-{/literal}{/footer_script}
 </div>
 </div>
-
+        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+</div>

extensions/Slimi/template/thumbnails.tpl

@@ -3 +3 @@
     global $page, $template;
     $template->assign('cat_name', $page['category']['name']);
-        
-        global $Slimi;  $this->assign( 'Slimi', $Slimi);
 {/php}
 
 
-<div id="carouselthumb">
+<div id="carousel">
 <div id="wrap">
-<ul id="carousel" class="jcarousel-skin-cat">
+                <div class="jcarousel">
+<ul>
                 {if !empty($category_thumbnails)}
                 
@@ -39 +38 @@
         {assign var=derivative value=$pwg->derivative($carousel, $thumbnail.src_image)}
                         <li>
-                                <div class="iIllustration">
+                                <div class="illustration">
                                         <a href="{if ($Slimi.lytebox_slimi)==1}{$thumbnail.path}" class="lytebox" rev="slide:true group:name showNavigation:true navType:1 slideInterval:6000"{else}{$thumbnail.URL}"{/if} title="{$thumbnail.NAME|strip_tags:false|replace:'\'':'&#39;'|replace:'"':'&quot;'}">
                                         <img class="thumbnail" src="{$derivative->get_url()}" alt="{$thumbnail.TN_ALT}" title="{$thumbnail.TN_TITLE}" height="{$carousel->max_height()}"/>
@@ -73 +72 @@
         {/foreach}
 </ul>
-{footer_script}{literal}
-function mycarousel_initCallback(carousel)
-{
-    // Pause autoscrolling if the user moves with the cursor over the clip.
-    carousel.clip.hover(function() {
-        carousel.stopAuto();
-    }, function() {
-        carousel.startAuto();
-    });
-};
-
-jQuery(document).ready(function() {
-    jQuery('#carousel').jcarousel({
-        auto: 0,
-                wrap: 'circular',
-                scroll: 2,
-                initCallback: mycarousel_initCallback,
-                
-    });
-});
-
-{/literal}{/footer_script}
 
 </div>
 </div>
+        <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
+    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
+</div>