How to make lightbox or onclick image popup slider using HTML and CSS

How-to-make-lightbox-or-onclick-image-popup-slider-using-HTML-and-CSS

How to make lightbox or onclick image popup slider using HTML and CSS 

In this tutorial you learn How to make lightbox or onclick image popup slider using HTML and CSS 

STEP:1 :- open an editor, paste the following code and save it as .html or the extension you want to save .

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bhagauti.com</title>
<link href="src1/css/lightcase.css" rel="stylesheet" type="text/css">
<style>
.container { margin:50px auto; max-width:960px;}
.container img { width:300px; margin:10px; float:left;}
.clear { clear:both;}
</style>
</head>
<body>
<div class="container">
<h1></h1>
</div>

<h1 style="text-align: center;">Simple Gallery Lightbox / Onclick Slideshow</h1>
<div class="gallery-lightbox">
	<a  href="http://bhagauti.com/images/1505714895.jpg" id="example2" class="showcase" data-rel="lightcase:myCollection:slideshow" title="www.Bhagauti.com">
		<img style="width: 30%"  border="2px solid black" src="http://bhagauti.com/images/1505714895.jpg">
	</a>

	<a href="http://bhagauti.com/images/1505811465.PNG" id="example3" class="showcase" data-rel="lightcase:myCollection:slideshow" title="www.Bhagauti.com">
		<img style="width: 30%"  border="2px solid black" src="http://bhagauti.com/images/1505811465.PNG">
	</a>

	<a href="http://bhagauti.com/images/1505646988.PNG" id="example4" class="showcase" data-rel="lightcase:myCollection:slideshow" title="www.Bhagauti.com">
		<img style="width: 30%" border="2px solid black" src="http://bhagauti.com/images/1505646988.PNG">
	</a>
</div>
</div>
<script src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="src1/js/lightcase.js"></script>
<script src="vendor/jQuery/jquery.events.touch.js"></script>

<script>
$('.showcase').lightcase();
</script>

</body>
</html>

DEMO     DOWNLOAD CODE 

STAY CONNECTED FOR MORE :)

 

ADD COMMENT

Your email address will not be published. Required fields are marked *








Be the first to comment. :)

The primary motive of our company is to provide beyond satisfactory results .

Request a free consultation quote

WWW.BHAGAUTI.COM © COPYRIGHT 2018 | TERMS AND CONDITIONS | Privacy & Policy