support custom Before and After labels #28 #49

README.md

@@ -37,7 +37,9 @@ $(window).load(function(){
 $(window).load(function(){
   $(".twentytwenty-container").twentytwenty({
     default_offset_pct: 0.7, // How much of the before image is visible when the page loads
-    orientation: 'vertical' // Orientation of the before and after images ('horizontal' or 'vertical')
+    orientation: 'vertical', // Orientation of the before and after images ('horizontal' or 'vertical')
+    before_label: 'January 2017', // Set a custom before label
+    after_label: 'March 2017' // Set a custom after label
   });
 });
 ```

css/twentytwenty-no-compass.css

@@ -91,12 +91,12 @@
 .twentytwenty-before-label {
   opacity: 0; }
   .twentytwenty-before-label:before {
-    content: "Before"; }
+    content: attr(data-content); }
 
 .twentytwenty-after-label {
   opacity: 0; }
   .twentytwenty-after-label:before {
-    content: "After"; }
+    content: attr(data-content); }
 
 .twentytwenty-horizontal .twentytwenty-before-label:before {
   left: 10px; }

js/jquery.twentytwenty.js

@@ -1,7 +1,7 @@
 (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', before_label: 'Before', after_label: 'After'}, options);
     return this.each(function() {
 
       var sliderPct = options.default_offset_pct;
@@ -22,10 +22,10 @@
       container.addClass("twentytwenty-container");
       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>");
+      overlay.append("<div class='twentytwenty-before-label' data-content='"+options.before_label+"'></div>");
+      overlay.append("<div class='twentytwenty-after-label' data-content='"+options.after_label+"'></div>");
 
       var calcOffset = function(dimensionPct) {
         var w = beforeImg.width();

scss/twentytwenty-no-compass.scss

@@ -143,7 +143,7 @@ $twenty20-label-radius: 2px !default;
   &:before {
     @extend %label-structure;
     @extend %label-text;
-    content: "Before";
+    content: attr(data-content);
   }
 }
 
@@ -157,7 +157,7 @@ $twenty20-label-radius: 2px !default;
   &:before {
     @extend %label-structure;
     @extend %label-text;
-    content: "After";
+    content: attr(data-content);
   }
 }
 

scss/twentytwenty.scss

@@ -144,7 +144,7 @@ $twenty20-label-radius: 2px !default;
   &:before {
     @extend %label-structure;
     @extend %label-text;
-    content: "Before";
+    content: attr(data-content);
   }
 }
 
@@ -158,7 +158,7 @@ $twenty20-label-radius: 2px !default;
   &:before {
     @extend %label-structure;
     @extend %label-text;
-    content: "After";
+    content: attr(data-content);
   }
 }