Skip to content

Commit 75ff6c5

Browse files
CodeHimBlogCodeHimBlog
authored
Update index.html
1 parent ccab9fc commit 75ff6c5

File tree

1 file changed

+87
-6
lines changed

1 file changed

+87
-6
lines changed

‎index.html

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

0 commit comments

Comments
 (0)