Added miniaturePosition option

webismymind · Apr 18, 2018 · 17a8346 · 17a8346
1 parent 2c8d192
commit 17a8346
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 67 deletions.
diff --git a/dist/js/wimmViewer.js b/dist/js/wimmViewer.js
@@ -1,11 +1,14 @@
+
 (function($) {
-    $.fn.WimmViewer = function (options) {
+    $.fn.WimmCarousel = function (options) {
 
         var self = this;
 
         //Style
         $(self).addClass('wimm_carousel');
         options = options || {};
+        options.miniaturePosition = options.miniaturePosition || 'top';
+        options.miniaturePosition = options.miniaturePosition === 'top' ? 'top' : 'bottom';
 
         options.miniatureWidth = options.miniatureWidth || 200;
         options.miniatureHeight = options.miniatureHeight || 150;
@@ -15,30 +18,19 @@
         options.onImgChange = typeof options.onImgChange === 'function' ? options.onImgChange : function(){};
         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 carousel = $(self).find('.carousel'),
+        var MAX_CAROUSEL_WIDTH = (options.miniatureSpace+options.miniatureWidth) * $(self).find('.item').length,
+            cursor = 0,
+            carousel = $(self).find('.carousel'),
             carouselInner = $(self).find('.carousel_inner'),
-            firstMiniature = $($(self).find('.item')[options.startIndex]);
+            firstMiniature = $($(self).find('.item')[0]);
 
-        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>');
+        if (options.miniaturePosition == 'top') {
+            $(self).append('<div class="mainImg"></div>');
+        }
+        else {
+            $(self).prepend('<div class="mainImg"></div>');
+        }
 
         var mainPicture = $(self).find('.mainImg');
 
@@ -50,58 +42,20 @@
         var  nextButton = $(self).find('.next'),
             prevButton = $(self).find('.prev');
 
-        if (cursor == 0) $(prevButton).hide();
+        $(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);
-        }
-
         $(self).find('.item').each(function(){
             $(this).click(function(){
                 options.onImgChange();
                 var imageUrl = $(this).attr('data-url');
                 $(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',
@@ -146,4 +100,4 @@
             }
         })
     }
-})(jQuery);
+})(jQuery);
diff --git a/examples/index.html b/examples/index.html
@@ -10,7 +10,7 @@
 
 </head>
 <body>
-<h1>WimmViewer Example</h1>
+<h1>WimmSlider Example</h1>
 <div id="slider1">
     <div class="carousel">
         <ul class="carousel_inner">
@@ -33,14 +33,12 @@ <h1>WimmViewer Example</h1>
 <script src="../dist/js/wimmViewer.js"></script>
 <script>
     $(function(){
-        $('#slider1').WimmViewer({
+        $('#slider1').WimmCarousel({
             miniatureWidth : 100,
             miniatureHeight: 100,
-            viewerMaxHeight: 300,
-            render3d: true,
-            startIndex: 3
             // Availables customizations:
             /*
+             miniaturePosition : 'bottom', // 'top'|'bottom'
              miniatureSpace: 10,
              nextText:'Next',
              prevText:'Prev',