akhileshdarjee/Responsive Modal LightBox with CSS & JS (no plugins).html

## Responsive Modal LightBox with CSS & JS (no plugins).html
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Fancybox</title>
		<style type="text/css">
			/* Fancybox */
			.fancyimg {
				border-radius: 5px;
				cursor: pointer;
				transition: 0.3s;
			}

			.fancyimg:hover {opacity: 0.7;}

			/* The Modal (background) */
			#fancybox {
				position: fixed; /* Stay in place */
				z-index: 1; /* Sit on top */
				padding: 20px; /* Location of the box */
				left: 0;
				top: 0;
				width: 100%; /* Full width */
				height: 100%; /* Full height */
				overflow: auto; /* Enable scroll if needed */
				background-color: rgb(0,0,0); /* Fallback color */
				background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
			}

			/* Modal Content (Image) */
			.fancybox-content {
				margin: auto;
				display: block;
				width: 100%;
				max-width: 900px;
			}

			/* Caption of Modal Image (Image Text) - Same Width as the Image */
			#fancybox-caption {
				margin: auto;
				display: block;
				width: 80%;
				max-width: 700px;
				text-align: center;
				color: #ccc;
				padding: 10px 0;
				height: 40px;
			}

			/* Add Animation - Zoom in the Modal */
			.fancybox-content, #fancybox-caption {
				-webkit-animation-name: zoom;
				-webkit-animation-duration: 0.6s;
				animation-name: zoom;
				animation-duration: 0.6s;
			}

			@-webkit-keyframes zoom {
				from {-webkit-transform:scale(0)}
				to {-webkit-transform:scale(1)}
			}

			@keyframes zoom {
				from {transform:scale(0)}
				to {transform:scale(1)}
			}

			/* The Close Button */
			.fancybox-close {
				position: absolute;
				top: 15px;
				right: 35px;
				color: #f1f1f1;
				font-size: 40px;
				font-weight: bold;
				transition: 0.3s;
			}

			.fancybox-close:hover,
			.fancybox-close:focus {
				color: #bbb;
				text-decoration: none;
				cursor: pointer;
			}

			/* 100% Image Width on Smaller Screens */
			@media only screen and (max-width: 700px){
				.fancybox-content {
					width: 100%;
				}
			}
			/* FancyBox end */
		</style>
	</head>
	<body>
		<img src="https://static.xx.fbcdn.net/rsrc.php/v3/yi/r/OBaVg52wtTZ.png" class="fancyimg">
		<div id="fancybox" class="modal" style="display: none;">
			<span class="fancybox-close">&times;</span>
			<img class="fancybox-content" id="fancybox-img">
			<div id="fancybox-caption"></div>
		</div>
		<script type="text/javascript">
			$("img.fancyimg").on("click", function() {
				var img_src = $(this).attr("data-big");
				var img_src = img_src ? img_src : $(this).attr("src");
				$("#fancybox").show();
				$("#fancybox-img").attr("src", img_src);
				$("#fancybox-caption").html($(this).attr("alt"));
			});

			$(".fancybox-close").on("click", function() {
				$("#fancybox").hide();
			});

			// You can also show large image by setting data attribute: data-big=”/big-img-path”
		</script>
	</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Fancybox</title>
	<style type="text/css">
	/* Fancybox */
	.fancyimg {
	border-radius: 5px;
	cursor: pointer;
	transition: 0.3s;
	}

	.fancyimg:hover {opacity: 0.7;}

	/* The Modal (background) */
	#fancybox {
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	padding: 20px; /* Location of the box */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
	}

	/* Modal Content (Image) */
	.fancybox-content {
	margin: auto;
	display: block;
	width: 100%;
	max-width: 900px;
	}

	/* Caption of Modal Image (Image Text) - Same Width as the Image */
	#fancybox-caption {
	margin: auto;
	display: block;
	width: 80%;
	max-width: 700px;
	text-align: center;
	color: #ccc;
	padding: 10px 0;
	height: 40px;
	}

	/* Add Animation - Zoom in the Modal */
	.fancybox-content, #fancybox-caption {
	-webkit-animation-name: zoom;
	-webkit-animation-duration: 0.6s;
	animation-name: zoom;
	animation-duration: 0.6s;
	}

	@-webkit-keyframes zoom {
	from {-webkit-transform:scale(0)}
	to {-webkit-transform:scale(1)}
	}

	@keyframes zoom {
	from {transform:scale(0)}
	to {transform:scale(1)}
	}

	/* The Close Button */
	.fancybox-close {
	position: absolute;
	top: 15px;
	right: 35px;
	color: #f1f1f1;
	font-size: 40px;
	font-weight: bold;
	transition: 0.3s;
	}

	.fancybox-close:hover,
	.fancybox-close:focus {
	color: #bbb;
	text-decoration: none;
	cursor: pointer;
	}

	/* 100% Image Width on Smaller Screens */
	@media only screen and (max-width: 700px){
	.fancybox-content {
	width: 100%;
	}
	}
	/* FancyBox end */
	</style>
	</head>
	<body>
	<img src="https://static.xx.fbcdn.net/rsrc.php/v3/yi/r/OBaVg52wtTZ.png" class="fancyimg">
	<div id="fancybox" class="modal" style="display: none;">
	<span class="fancybox-close">×</span>
	<img class="fancybox-content" id="fancybox-img">
	<div id="fancybox-caption"></div>
	</div>
	<script type="text/javascript">
	$("img.fancyimg").on("click", function() {
	var img_src = $(this).attr("data-big");
	var img_src = img_src ? img_src : $(this).attr("src");
	$("#fancybox").show();
	$("#fancybox-img").attr("src", img_src);
	$("#fancybox-caption").html($(this).attr("alt"));
	});

	$(".fancybox-close").on("click", function() {
	$("#fancybox").hide();
	});

	// You can also show large image by setting data attribute: data-big=”/big-img-path”
	</script>
	</body>
	</html>