Skip to content

Commit 7fb5209

Browse files
CodeHimBlogCodeHimBlog
authored
Add files via upload
1 parent 424c884 commit 7fb5209

File tree

1 file changed

+125
-0
lines changed

1 file changed

+125
-0
lines changed

‎index.html

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

0 commit comments

Comments
 (0)