Create jquery.popup.lightbox.js

Author: CodeHimBlog

js/jquery.popup.lightbox.js

@@ -0,0 +1,256 @@
+/*   Project: Popup Lightbox 
+ *   Author: Asif Mughal
+ *   URL: www.codehim.com
+ *   License: MIT License
+ *   Copyright (c) 2019 - Asif Mughal
+ */
+/* File: jquery.popup.lightbox.js */
+(function ($) {
+	$.fn.popupLightbox = function (options) {
+
+		var setting = $.extend({
+			width: 560,
+			height: 340,
+			inAnimation: "ZoomIn",
+
+		}, options);
+
+		return this.each(function () {
+
+			var target = $(this);
+
+			var popupWindow = $section();
+
+			var closeBtn = $button();
+
+			var nextBtn = $button();
+
+			var prevBtn = $button();
+
+			var imgStat = $div();
+
+			var imgFig = $figure();
+
+			var capBar = $figcaption();
+
+			var imgs = $(target).find("img");
+
+			var totalImgs = imgs.length;
+
+			var imgNum = 0;
+			var current, thisCaption;
+
+
+			$(nextBtn).addClass("btn-next")
+				.appendTo(popupWindow);
+
+			$(prevBtn).addClass("btn-prev")
+				.appendTo(popupWindow);
+
+			$(closeBtn).addClass("btn-close")
+				.appendTo(popupWindow)
+				.html("\×");
+
+			$(imgStat).addClass("lightbox-status")
+				.appendTo(popupWindow);
+
+
+			$(imgFig).addClass("img-show")
+				.appendTo(popupWindow);
+
+			$(popupWindow).addClass("lightbox animated faster " + setting.inAnimation).appendTo("body");
+
+
+			//set up unique number for each image 
+
+			for (var i = 0; i < imgs.length; i++) {
+
+				$(imgs).eq(i).attr({
+					'data-num': i,
+					'id': '#img' + i,
+				});
+
+
+			}
+
+			if ($(window).width() > 620) {
+
+
+				$(popupWindow).css({
+					'width': setting.width,
+					'height': setting.height,
+					'position': 'fixed',
+					'top': '50%',
+					'marginTop': -(setting.height / 2),
+					'left': '50%',
+					'marginLeft': -(setting.width / 2),
+					'zIndex': '999',
+					'overflow': 'hidden',
+
+				});
+
+			} else {
+				$(popupWindow).css({
+					'width': '100%',
+					'height': '100%',
+					'top': 0,
+					'left': 0,
+
+
+				});
+
+
+			}
+
+
+			$(capBar).addClass("img-caption animated fadeInUp");
+
+
+			$(imgs).click(function () {
+
+				var thisImg = $(this).clone();
+				var thisNum = $(this).attr("data-num") * 1;
+				var $caption = $(this).attr('alt');
+				if ($(this).prop('alt') == false) {
+					$caption = "This image has no caption";
+				}
+
+
+				imgNum = thisNum;
+
+				if (thisNum + 1 == totalImgs) {
+					$(nextBtn).hide();
+					$(prevBtn).show();
+				} else if (thisNum == 0) {
+					$(prevBtn).hide();
+					$(nextBtn).show();
+				} else {
+					$(nextBtn).show();
+					$(prevBtn).show();
+				}
+
+				$(imgStat).html(thisNum + 1 + " / " + totalImgs);
+
+				$(imgFig).html(thisImg)
+					.parent().fadeIn();
+
+				$(capBar).html($caption).appendTo(imgFig);
+
+			});
+
+
+			//Next image 
+
+			$(nextBtn).click(function () {
+
+				var y = totalImgs - 1;
+
+
+				if (imgNum < y) {
+					imgNum += 1;
+				}
+
+				if (imgNum + 1 == totalImgs) {
+					$(nextBtn).hide();
+				}
+
+				$(prevBtn).fadeIn();
+
+
+				$(imgFig).find("img").animate({
+					'left': '-100%',
+					'opacity': 0,
+				}, 200, function () {
+
+					$(imgFig).html($(imgs).eq(imgNum).clone());
+
+					current = $(imgFig).find("img");
+
+					thisCaption = $(current).attr("alt");
+
+					if ($(current).prop('alt') == false) {
+						thisCaption = "This image has no caption";
+					}
+
+					$(capBar).html(thisCaption).appendTo(imgFig);
+
+					$(imgStat).html(imgNum + 1 + " / " + totalImgs);
+
+				});
+
+
+			});
+
+			//Previous image 
+
+			$(prevBtn).click(function () {
+
+
+				if (imgNum > 0) {
+
+					imgNum -= 1;
+				}
+				$(nextBtn).fadeIn();
+
+
+				$(imgFig).find("img").animate({
+					'right': '-100%',
+					'opacity': 0,
+				}, 200, function () {
+					$(imgFig).html($(imgs).eq(imgNum).clone());
+
+					current = $(imgFig).find("img");
+
+					thisCaption = $(current).attr("alt");
+					$(capBar).html(thisCaption).appendTo(imgFig);
+
+
+					$(imgStat).html(imgNum + 1 + " / " + totalImgs);
+
+				});
+
+				if (imgNum == 0) {
+					$(prevBtn).hide();
+				}
+
+
+			});
+
+
+			function $div() {
+				return document.createElement("div");
+			}
+
+			function $button() {
+				return document.createElement("button");
+
+			}
+
+			function $section() {
+
+				return document.createElement("section");
+
+			}
+
+			function $figure() {
+				return document.createElement("figure");
+			}
+
+			function $figcaption() {
+				return document.createElement("figcaption");
+
+			}
+
+
+			$(".btn-close").click(function () {
+				$(this).parent().fadeOut();
+				imgNum = 0;
+
+
+			});
+
+
+		});
+	};
+
+})(jQuery);