-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
131 lines (118 loc) · 5.75 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1 "/>
<title>jQuery and CSS Popup Image Lightbox </title>
<!--jQuery-->
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<!--Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<!--Animate CSS-->
<link href="css/animate.css" rel="stylesheet" />
<!--Popup Lightbox Js-->
<script src="js/jquery.popup.lightbox.js"></script>
<!--Popup Lightbox CSS-->
<link href="css/popup-lightbox.css" rel="stylesheet" />
<script>
$(document).ready(function(){
$(".img-container").popupLightbox();
});
</script>
</head>
<body>
<!--Introduction and Demo Only -->
<header class="intro">
<h1>
jQuery and CSS Popup Image Lightbox
</h1>
<p>
A simple and clean popup window image lightbox based on css and jQuery.
<br />
<br />
<b> Written in:</b><i> HTML, CSS, JS</i><br>
<b> Frameworks: </b> <i> jQuery 3.3.1 & Font Awesome, Animate CSS. </i>
</p>
<div class="action">
<a class="btn github" href="https://github.com/CodeHimBlog/jquery-popup-lightbox"> Fork on GiHub </a>
<a class="btn down" href="https://github.com/CodeHimBlog/jquery-popup-lightbox/archive/master.zip">Download </a>
</div>
</header>
<main>
<article>
<h2> <small> Popup Lightbox</small> Main Features</h2>
<ul>
<li> Simple, clean, light weight and fast.</li>
<li> Responsive and attractive design </li>
<li> Detect next and previous images.</li>
<li> Show status (numbering) for each image.</li>
<li> Popup window show the caption of the image detected from alt text.</li>
<li> Animate CSS animations supported. </li>
<li> Font Awesome Icons for lightbox.</li>
</ul>
<h2> jQuery Lightbox Popup Window Example</h2>
<p> Select any image to view the lightbox Popup window. </p>
<div class="img-container">
<img src="images/jquery-lightbox-image2.jpg" alt="lightbox image 2" />
<img src="images/jquery-lightbox-image3.jpg" alt="lightbox image 3"/>
<img src="images/jquery-lightbox-image1.jpg" alt="Effel Tower"/>
<img src="images/jquery-lightbox-image4.jpg" alt="lightbox image 4" />
</div>
<div style="margin: 0 10px 10px 10px;">
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-layout="in-article"
data-ad-format="fluid"
data-ad-client="ca-pub-7089100907045419"
data-ad-slot="7782420780"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<h2> How to use Popup Lightbox</h2>
<p>
The popup lightbox is very easy to use in your web projects. The main purpose to develop this lightbox is show images in easy and simple way.
<br>
There is no tough job to get it working. Just follow the step by step guide to done.
</p>
<p>1. Include the popup lightbox javascript and css file into your web project. </p>
<pre class="prettyprint lang-html">
<!--Popup Lightbox Js-->
<script src="js/jquery.popup.lightbox.js"></script>
<!--Popup Lightbox CSS-->
<link href="css/popup-lightbox.css" rel="stylesheet" />
</pre>
<p>
2. Create a image container, whose images should be shown in the popup lightbox. (Optional if you are going to create a gallery).
</p>
<pre class="prettyprint lang-html">
<div class="img-container">
<img src="images/jquery-lightbox-image2.jpg" alt="lightbox image 2" />
<img src="images/jquery-lightbox-image3.jpg" alt="lightbox image 3"/>
<img src="images/jquery-lightbox-image1.jpg" alt="Effel Tower"/>
<img src="images/jquery-lightbox-image4.jpg" alt="lightbox image 4" />
</div>
</pre>
<p> 3. Now, initialize the "popupLightbox()" in jQuery document ready function with the selector whose images will be show. </p>
<pre class="prettyprint lang-js">
$(document).ready(function(){
$(".img-container").popupLightbox();
});
</pre>
<p> 4. Now you have done! no need to build HTML or any extra tag. It will be automatically done by popup lightbox plugin. </p>
<p>
<b>Note:</b> You can also call the plugin with body selector to show all body images. Similarly, you can use it to show article images. <br>
</p>
</article>
</main>
<!--Demo Only Files-->
<link href="docs/demo.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> </script>
<footer class="credit">
Coded with <span title="Coffee"></span> by Asif Mughal © 2019 - <a href="https://www.codehim.com" rel="dofollow" title="Awesome Web Projects and Tutorials" target="_blank"> Codehim.com </a>
</footer>
</body>
</html>