ADDED

* + option: render3d. If true, display a css3 rendered 3D effect for thumbnails * + option: startIndex, if defined, first active thumb rendered is that one. ADAPTED * cursor is moved on init if startIndex is defined * previous button is displayed if startIndex is defined and higher than 0
webismymind · Jan 3, 2017 · 2c8d192 · 2c8d192
1 parent 672bd23
commit 2c8d192
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 16 deletions.
diff --git a/dist/css/wimmViewer.css b/dist/css/wimmViewer.css
diff --git a/dist/css/wimmViewer.css.map b/dist/css/wimmViewer.css.map
diff --git a/dist/css/wimmViewer.min.css b/dist/css/wimmViewer.min.css
diff --git a/dist/css/wimmViewer.scss b/dist/css/wimmViewer.scss
@@ -100,4 +100,24 @@ $wimm_carousel_color: #5897e3;
 
 }
 
+.wimm_carousel.render3d {
+  .carousel_inner {
+
+    .item {
+      transition: all 0.3s;
+      -webkit-transition: all 0.3s;
+      &.isNext {
+        transform: perspective(500px) rotateY(-45deg);
+        -webkit-transform: perspective(500px) rotateY(-45deg);
+        -moz-transform: perspective(500px) rotateY(-45deg);
+      }
+      &.isPrev {
+        transform: perspective(500px) rotateY(45deg);
+        -webkit-transform: perspective(500px) rotateY(45deg);
+        -moz-transform: perspective(500px) rotateY(45deg);
+      }
+    }
+  }
+}
+
 
diff --git a/dist/js/wimmViewer.js b/dist/js/wimmViewer.js
@@ -1,4 +1,3 @@
-
 (function($) {
     $.fn.WimmViewer = function (options) {
 
@@ -17,14 +16,27 @@
         options.onNext = typeof options.onNext === 'function' ? options.onNext : function(){};
         options.onPrev = typeof options.onPrev === 'function' ? options.onPrev : function(){};
         options.viewerMaxHeight = options.viewerMaxHeight || false;
+        options.startIndex = options.startIndex || 0;
+        options.render3d = options.render3d || false;
+
+        if (options.render3d) {
+            $(self).addClass('render3d');
+
+        }
 
-        var MAX_CAROUSEL_WIDTH = (options.miniatureSpace+options.miniatureWidth) * $(self).find('.item').length,
+        var MAX_CAROUSEL_WIDTH = (options.miniatureSpace+options.miniatureWidth) * $(self).find('.item').length;
 
-            cursor = 0,
 
-            carousel = $(self).find('.carousel'),
+
+
+        var carousel = $(self).find('.carousel'),
             carouselInner = $(self).find('.carousel_inner'),
-            firstMiniature = $($(self).find('.item')[0]);
+            firstMiniature = $($(self).find('.item')[options.startIndex]);
+
+        var cursor = (options.miniatureSpace*2 + options.miniatureWidth) * (options.startIndex-1);
+        if (cursor <0) cursor =0;
+
+        $(carouselInner).css('left',-cursor+'px');
 
         $(self).append('<div class="mainImg"></div>');
 
@@ -38,16 +50,34 @@
         var  nextButton = $(self).find('.next'),
             prevButton = $(self).find('.prev');
 
-        $(prevButton).hide();
+        if (cursor == 0) $(prevButton).hide();
 
         //Init first picture
         $(firstMiniature).addClass('active');
+
+        var isPrev = true;
+
+        $(self).find('.item').each(function(){
+
+            if (isPrev && !$(this).hasClass('active')) {
+                $(this).addClass('isPrev');
+            }
+            else if ( $(this).hasClass('active')) {
+                isPrev = false;
+            }
+            else {
+                $(this).addClass('isNext');
+
+            }
+
+        });
+
         var firstImageUrl = $(firstMiniature).attr('data-url');
         $(mainPicture).append('<img src='+firstImageUrl+' />');
 
-       if (options.viewerMaxHeight) {
-           $(mainPicture).find('img').css('maxHeight',options.viewerMaxHeight);
-       }
+        if (options.viewerMaxHeight) {
+            $(mainPicture).find('img').css('maxHeight',options.viewerMaxHeight);
+        }
 
         $(self).find('.item').each(function(){
             $(this).click(function(){
@@ -56,6 +86,22 @@
                 $(mainPicture).find('img').attr('src',imageUrl);
                 $(self).find('.active').removeClass('active');
                 $(this).addClass('active');
+                var isPrev = true;
+                $(self).find('.item').removeClass('isPrev').removeClass('isNext').each(function(){
+
+                    if (isPrev && !$(this).hasClass('active')) {
+                        $(this).addClass('isPrev');
+                    }
+                    else if ( $(this).hasClass('active')) {
+                        isPrev = false;
+                    }
+                    else {
+                        $(this).addClass('isNext');
+
+                    }
+
+
+                })
             });
             $(this).css({
                 width: options.miniatureWidth+'px',
@@ -100,4 +146,4 @@
             }
         })
     }
-})(jQuery);
+})(jQuery);
diff --git a/dist/js/wimmViewer.min.js b/dist/js/wimmViewer.min.js
diff --git a/examples/index.html b/examples/index.html
@@ -37,6 +37,8 @@ <h1>WimmViewer Example</h1>
             miniatureWidth : 100,
             miniatureHeight: 100,
             viewerMaxHeight: 300,
+            render3d: true,
+            startIndex: 3
             // Availables customizations:
             /*
              miniatureSpace: 10,