Update README.md and add overlay option

README.md

@@ -16,9 +16,9 @@ After including the files you are ready to create a container that holds two ima
 ```html
 <div id="container1">
  <!-- The before image is first -->
- <img src="http://placehold.it/400x200&text=1" />
+ <img src="http://placehold.it/400x200" />
  <!-- The after image is last -->
- <img src="http://placehold.it/400x200&text=2" />
+ <img src="http://placehold.it/400x200" />
 </div>
 ```
 
@@ -41,6 +41,9 @@ $(window).load(function(){
   });
 });
 ```
+### Demo
+
+http://htmlpreview.github.io/?https://github.com/zurb/twentytwenty/blob/master/index.html
 
 ### Prevent FOUC
 
@@ -49,9 +52,9 @@ If you want to avoid a [FOUC](http://en.wikipedia.org/wiki/Flash_of_unstyled_con
 ```html
 <div id="container1" class="twentytwenty-container">
  <!-- The before image is first -->
- <img src="http://placehold.it/400x200&text=1" />
+ <img src="http://placehold.it/400x200" />
  <!-- The after image is last -->
- <img src="http://placehold.it/400x200&text=2" />
+ <img src="http://placehold.it/400x200" />
 </div>
 ```
 

js/jquery.twentytwenty.js

@@ -1,7 +1,13 @@
 (function($){
 
   $.fn.twentytwenty = function(options) {
-    var options = $.extend({default_offset_pct: 0.5, orientation: 'horizontal'}, options);
+      var options = $.extend({
+          default_offset_pct: 0.5,
+          orientation: 'horizontal',
+          overlay: true,
+          transition_in: false,
+          min_offset: 0
+      }, options);
     return this.each(function() {
 
       var sliderPct = options.default_offset_pct;
@@ -12,7 +18,9 @@
 
 
       container.wrap("<div class='twentytwenty-wrapper twentytwenty-" + sliderOrientation + "'></div>");
-      container.append("<div class='twentytwenty-overlay'></div>");
+      if (options.overlay) {
+          container.append("<div class='twentytwenty-overlay'></div>");
+      }
       var beforeImg = container.find("img:first");
       var afterImg = container.find("img:last");
       container.append("<div class='twentytwenty-handle'></div>");
@@ -23,9 +31,11 @@
       beforeImg.addClass("twentytwenty-before");
       afterImg.addClass("twentytwenty-after");
 
-      var overlay = container.find(".twentytwenty-overlay");
-      overlay.append("<div class='twentytwenty-before-label'></div>");
-      overlay.append("<div class='twentytwenty-after-label'></div>");
+      if (options.overlay) {
+          var overlay = container.find(".twentytwenty-overlay");
+          overlay.append("<div class='twentytwenty-before-label'></div>");
+          overlay.append("<div class='twentytwenty-after-label'></div>");
+      }
 
       var calcOffset = function(dimensionPct) {
         var w = beforeImg.width();
@@ -88,6 +98,9 @@
           if (sliderPct > 1) {
             sliderPct = 1;
           }
+          if (options.min_offset && sliderPct < options.min_offset) {
+            sliderPct = options.min_offset;
+          }
           adjustSlider(sliderPct);
         }
       });
@@ -96,7 +109,36 @@
         event.preventDefault();
       });
 
-      $(window).trigger("resize.twentytwenty");
+      container.on('goTo.twentytwenty', function (e, pos) {
+                adjustSlider(pos);
+            });
+
+            if (options.transition_in) {
+                var before = $('.twentytwenty-before').css('clip', 'rect(0px 0 ' + beforeImg.height() + 'px 0px)');
+                var handle = container.find('.twentytwenty-handle').css('left', 0);
+
+                setTimeout(function () {
+                    before.add(handle)
+                        .on('transitionEnd oTransitionEnd msTransitionEnd transitionend webkitTransitionEnd', function () {
+                            container.find('.twentytwenty-handle,.twentytwenty-before').css({
+                                'transition': 'none'
+                            });
+                        })
+                    .css({
+                        '-webkit-transition': 'all 1.5s ease',
+                        '-moz-transition': 'all 1.5s ease',
+                        'transition': 'all 1.5s ease'
+                    });
+
+                    $(window).trigger("resize.twentytwenty");
+                });
+            }
+            else {
+                $(window).trigger("resize.twentytwenty");
+            }
+
+            container.trigger('init.twentytwenty', [container]);
+        });
     });
   };