4.0.4

Add next + prev arrow txt (for easier changing of icons + possibility
of working with backgrounds)

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "ekko-lightbox-sg",
-    "version": "4.0.3",
+    "version": "4.0.4",
     "main": "./dist/ekko-lightbox.min.js",
     "ignore": [
         "**/.*",

dist/ekko-lightbox.js

@@ -80,7 +80,7 @@ License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
           this.gallery_index = this.gallery_items.index(this.$element);
           $(document).on('keydown.ekkoLightbox', this.navigate.bind(this));
           if (this.options.directional_arrows && this.gallery_items.length > 1) {
-            this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '"></a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '"></a></div>');
+            this.lightbox_container.append('<div class="ekko-lightbox-nav-overlay"><a href="#" class="' + this.strip_stops(this.options.left_arrow_class) + '">' + this.options.left_arrow_txt + '</a><a href="#" class="' + this.strip_stops(this.options.right_arrow_class) + '">' + this.options.right_arrow_txt + '</a></div>');
             this.modal_arrows = this.lightbox_container.find('div.ekko-lightbox-nav-overlay').first();
             this.lightbox_container.find('a' + this.strip_spaces(this.options.left_arrow_class)).on('click', (function(_this) {
               return function(event) {

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "ekko-lightbox-sg",
 	"description": "A lightbox gallery plugin for Bootstrap 3 based on the modal plugin",
-	"version": "4.0.3",
+	"version": "4.0.4",
 	"keywords": [
 		"lightbox",
 		"gallery",

theme/ekko-lightbox-theme.less

@@ -0,0 +1,82 @@
+.modal-backdrop.in {
+    -webkit-opacity: 0.95;
+    -moz-opacity: 0.95;
+    opacity: 0.95;
+    background-color: #333333;
+}
+.ekko-lightbox .modal-content {
+    -webkit-box-shadow: none;
+    -moz-box-shadow: none;
+    box-shadow: none;
+    -webkit-border-radius: 0;
+    -moz-border-radius: 0;
+    border-radius: 0;
+    border: none;
+    background-color: transparent;
+}
+.ekko-lightbox .modal-header {
+    border: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+.ekko-lightbox .modal-header .close {
+    -webkit-opacity: 0.5;
+    -moz-opacity: 0.5;
+    opacity: 0.5;
+    color: #fff;
+    text-shadow: 0;
+    font-weight: 100;
+    margin-top: 5px;
+}
+.ekko-lightbox .modal-header .close:hover {
+    -webkit-opacity: 1;
+    -moz-opacity: 1;
+    opacity: 1;
+}
+.ekko-lightbox .modal-header h4.modal-title {
+    font-weight: 100;
+    color: #fff;
+    padding: 0;
+}
+.ekko-lightbox .modal-body {
+    padding: 0;
+}
+.ekko-lightbox .modal-footer {
+    -webkit-opacity: 0.9;
+    -moz-opacity: 0.9;
+    opacity: 0.9;
+    border: 0;
+    color: #fff;
+    font-weight: 100;
+    padding: 0;
+}
+.ekko-lightbox-nav-overlay a {
+    -webkit-opacity: 0.9;
+    -moz-opacity: 0.9;
+    opacity: 0.9;
+    text-shadow: none;
+}
+
+/* Arrows - taken from slick */
+.ekko-lightbox-nav-overlay .glyphicon {
+    i.fa {
+      color: @brown;
+      height: 50px;
+      width: 50px;
+      border-radius:50%;
+      background: rgba(255,255,255,0.5);
+      text-align: center;
+      line-height: 50px;
+    }
+    &:hover, &:focus {
+      i.fa {
+        background: rgba(255,255,255,0.8);
+      }
+    }
+}
+.glyphicon-chevron-left i.fa:before {
+  margin-left: -4px;
+}
+.glyphicon-chevron-right i.fa:before {
+  margin-left: 4px;
+}