Bootstrap Lightbox

_lightbox.scss

.lightbox {
    position: relative;
    display: block;

    .lightbox-open {
        position: absolute;
        bottom: 0;
        right: 0;
        color: white;
        border: 30px solid;
        border-color: $brand-primary #fff #fff $brand-primary;

        .icon-circle-with-plus {
            position: absolute;
            right: 0;
            bottom: 0;
            font-size: 24px;
        }
    }

    &:hover {
        .lightbox-open {
            border-color: darken($brand-primary, 10%) #fff #fff darken($brand-primary, 10%);
        }
    }
}

.modal-body {
    padding-left: 30px;
    padding-right: 30px;

    .modal-lightbox & {
        padding: 30px;
    }
}

.modal-footer {
    padding: 20px 30px;

    &.text-center {
        text-align: center;
    }

    .modal-lightbox & {
        padding-top: 0;
        padding-bottom: 30px;
        border-top: none;
        margin-top: -15px;

        .image-couter {
            padding-top: 12px;
        }
    }
}

.modal-lightbox {
    .lightbox-prev, .lightbox-next {
        padding: 0;
        line-height: 1;
        font-size: 40px;

        i {
            display: block;
        }
    }
}

.modal .close {
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    color: white;
    font-weight: normal;
    font-size: 20px;
    border: 30px solid $brand-primary;
    border-bottom-color: transparent;
    border-left-color: transparent;
    outline: none;

    &:hover,
    &:focus,
    &:active {
        border-top-color: darken($brand-primary, 10%);
        border-right-color: darken($brand-primary, 10%);
    }

    > span {
        position: absolute;
        top: -22px;
        right: -20px;
    }
}

.modal-caption {
    margin-top: 10px;
}

@media (min-width: $screen-lg-min) {
    .modal-lg {
        width: 1102px;
    }
}

bootstrap.lightbox.js

$(function () {

  /**
   * Basic lightbox implementation based on Bootstrap modals
   */
  if ($('a.lightbox').length > 0) {
    var $lightboxModal = '\
			<div class="modal fade" id="lightbox" tabindex="-1" role="dialog" aria-hidden="true">\
				<div class="modal-dialog modal-lightbox">\
					<div class="modal-content">\
						<div class="modal-body"></div>\
					</div>\
				</div>\
			</div>\
		';
    $('body').append($lightboxModal);
    $('.lightbox').click(function (event) {
      event.preventDefault();
      var $lightbox = $('#lightbox');
      var $modalBody = $lightbox.find('.modal-body');
      var $modalFooter = $lightbox.find('.modal-footer');
      var $modalDialog = $lightbox.find('.modal-dialog');
      $modalBody.empty();
      $modalFooter.remove();
      $modalBody.append('<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>');
      var $src = $(this).attr("href");
      var $image = "<img class=\"img-responsive\" src=\"" + $src + "\">";

      // FIX IMAGEWIDTH
      var img = new Image();
      img.onload = function () {
        $modalDialog.width(img.width);
      };

      $modalDialog.css({"max-width": '95%'});
      img.src = $src;

      $modalBody.append($image);
      var $title = $(this).attr("title");
      var $text = $(this).parent().find('.caption').html();
      if ($title || $text) {
        $modalBody.append('<div class="modal-caption"></div>');
        if ($title) {
          $modalBody.find('.modal-caption').append("<span class=\"modal-caption-title\">" + $title + "</span>");
        }
        if ($text) {
          $modalBody.find('.modal-caption').append($text);
        }
      }

      var galleryName = $(this).data('lightbox');

      if (galleryName && $('[data-lightbox="' + galleryName + '"]').length) {
        var $gallery = $('[data-lightbox="' + galleryName + '"]');
        var itemsCount = $gallery.length;

        var current = $gallery.index(this);

        $modalBody.after('<div class="modal-footer clearfix"><div class="pull-left"><p class="image-couter small"><strong><span class="current">' + (current + 1) + '</span>/<span class="total">' + itemsCount + '</span></strong>: Grenzwiederherstellung</p></div><div class="pull-right"><button type="button" class="btn btn-primary lightbox-prev"><i class="icon-chevron-left"></i></button><button type="button" class="btn btn-primary lightbox-next"><i class="icon-chevron-right"></i></button></div></div>');

        var $next = $modalDialog.find('.lightbox-next');
        var $prev = $modalDialog.find('.lightbox-prev');
        var $current = $modalDialog.find('.current');
        var $img = $modalDialog.find('.img-responsive');

        $next.on('click', function () {
          current++;

          if (current >= itemsCount) {
            current = 0;
          }
          changeImg();
        });

        $prev.on('click', function () {
          current--;

          if (current < 0) {
            current = itemsCount - 1;
          }
          changeImg();
        });

        function changeImg() {
          $current.text(current + 1);
          $src = $gallery.eq(current).attr("href");
          //console.log($src);
          //console.log($gallery.eq(current));

          img.src = $src;
          $img.attr('src', $src);
        }

      }

      $('#lightbox').modal({show: true});
    });
  }

});