Adding bgLightBox

examples/example.html

@@ -49,6 +49,16 @@
     <button name="validate" type="button">Validate</button>
 </form>
 
+<hr>
+
+<div class="images">
+    <img src="https://cdn-images-1.medium.com/max/1200/0*ngXgBNNdx6iiWP8q.png" alt="" width="200" height="200">
+    <img src="https://www.codingdojo.com/blog/wp-content/uploads/most-popular-programming-languages-of-2018.png" alt=""
+         width="200" height="200">
+    <img src="https://www.fintechnews.org/wp-content/uploads/2018/08/mundo-1.jpg" alt="" width="200" height="200">
+</div>
+
+
 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
 <script src="../src/bskit.js"></script>
 
@@ -176,6 +186,8 @@
             format: "d-m-y"
         });
 
+        $(".images img").bsLightBox();
+
 
     });
 

src/bskit.css

@@ -518,3 +518,42 @@
 .bs-datepicker-middle-table-td:not(.bs-datepicker-selected-day):hover {
     background-color: #efefef;
 }
+
+.bs-lightbox-container {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    z-index: 9999;
+}
+
+.bs-lightbox-content {
+    display: block;
+    /*width: 50vw;*/
+    max-width: 50vw;
+    height: auto;
+    min-height: 300px;
+    background-color: #fff;
+    box-shadow: 0 0 5px 2px #d9d9d9;
+    text-align: center;
+    border-radius: 5px;
+    padding: 10px;
+    margin: 25vh auto 0 auto;
+    position: relative;
+    /*transition: all .5s;*/
+    overflow: auto;
+    animation-name: zoomIn;
+    animation-duration: .4s;
+    animation-iteration-count: 1;
+}
+
+.bs-lightbox-button {
+    position: absolute;
+    top: 50%;
+    background-color: #fff;
+    -webkit-border-radius: 50%;
+    -moz-border-radius: 50%;
+    border-radius: 50%;
+    font-size: 20px;
+}

src/bskit.js

@@ -6,6 +6,10 @@
  */
 
 
+$.fn.tagName = function () {
+    return this.prop("tagName");
+};
+
 $.fn.bsTable = function (params) {
 
     this.id = "";
@@ -1191,4 +1195,73 @@ $.fn.bsLightBox = function (params) {
 
     var _this = this;
 
+    _this.backgroundAlpha = 0.5;
+    _this.currentIndex = 0;
+    _this.itemCount = _this.length;
+
+
+    if (typeof params !== "undefined") {
+        if (typeof params.backgroundAlpha !== "undefined") {
+            _this.backgroundAlpha = params.backgroundAlpha;
+        }
+    }
+
+
+    _this.click(function () {
+        var imgEl = $(this);
+
+        _this.currentIndex = imgEl.index();
+
+
+        _this.container = $('<div/>', {
+            class: "bs-lightbox-container",
+            style: "background: rgba(0, 0, 0, " + _this.backgroundAlpha + ");",
+            html: ""
+        });
+
+        _this.content = $('<div/>', {
+            class: "bs-lightbox-content",
+
+        });
+
+        _this.imageContent = $('<img/>', {
+            src: imgEl.attr("src")
+        });
+
+        _this.content.append(_this.imageContent);
+
+        _this.container.append(_this.content);
+
+
+        _this.leftButton = $('<div/>', {
+            class: "bs-lightbox-button bs-lightbox-button-left",
+            html: "<"
+        });
+
+        _this.rightButton = $('<div/>', {
+            class: "bs-lightbox-button bs-lightbox-button-right",
+            html: ">"
+        });
+
+        $("body").append(_this.container);
+
+        _this.content.css("width", _this.imageContent.width() + "px");
+
+        // _this.container.append(_this.leftButton);
+        // _this.container.append(_this.rightButton);
+        // _this.leftButton.css("left", (_this.content.position().left * 2) + "px");
+        // _this.rightButton.css("right", (_this.content.position().left) + "px");
+
+
+        $(".bs-lightbox-container").click(function () {
+            // _this.content.css("animation-name", "zoomOut");
+            // setTimeout(function () {
+            //     $("body .bs-lightbox-container").remove();
+            // }, 300);
+
+            $("body .bs-lightbox-container").remove();
+        });
+
+    });
+
 };