This time I will share jQuery Plugin and tutorial about Full-featured jQuery Responsive Lightbox Plugin – VenoBox, hope it will help you in programming stack.
| File Size: | 23.2 KB |
|---|---|
| Views Total: | 18345 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
VenoBox is a responsive & mobile device-friendly jQuery lightbox plugin used to overlay any html elements (like images, iframes, videos, etc…) on your current page.
Features:
- Images and image lightbox gallery supported (possibility of navigation with keyboard arrows).
- Ajax & inline content supported.
- Youtube & Vimeo videos supported.
- Iframes and google maps supported.
- Provides a scroll bar if the height of overlayed elements is tall than the window.
- Share and Download buttons: Facebook, Twitter, LinkedIn, Pinterest.
Basic Usage:
1. Include required venobox.css and venobox.js on your web page.
1 |
<link href="/path/to/venobox/venobox.css" rel="stylesheet" /> |
2 |
<script src="/path/to/cdn/jquery.min.js"></script> |
3 |
<script src="/path/to/venobox/venobox.js"></script> |
2. Initialize the plugin and we’re ready to go.
1 |
$('.venobox').venobox({ |
2 |
// settings here |
3 |
}); |
3. Create a gallery lightbox from a group of images. Note that the images are grouped with the data-gall attribute. Otherwise it only shows a single image lightbox when you click on the thumbnail.
01 |
<a class="venobox" |
02 |
data-gall="my<a href="https://www.jqueryscript.net/gallery/">Gallery</a>" |
03 |
title="Image 1" |
04 |
href="1.jpg"> |
05 |
<img src="thumb.jpg" /> |
06 |
</a> |
07 |
<a class="venobox" |
08 |
data-gall="myGallery" |
09 |
title="Image 2" |
10 |
href="2.jpg"> |
11 |
<img src="thumb.jpg" /> |
12 |
</a> |
13 |
<a class="venobox" |
14 |
data-gall="myGallery" |
15 |
title="Image 3" |
16 |
href="3.jpg"> |
17 |
<img src="thumb.jpg" /> |
18 |
</a> |
4. Display inline content in the lightbox.
01 |
<!-- Trigger element --> |
02 |
<a class="venobox" |
03 |
data-gall="myGallery" |
04 |
data-title="inline content" |
05 |
data-vbtype="inline" |
06 |
href="#inline-content"> |
07 |
Inline Content |
08 |
</a> |
09 |
10 |
<!-- Inline Content --> |
11 |
<div id="inline-content" style="display:none;"> |
12 |
Inline Content Here |
13 |
</div> |
5. Display iframe content in the lightbox.
1 |
<a class="venobox" |
2 |
data-gall="iframe" |
3 |
data-vbtype="iframe" |
4 |
title="iFrame example" |
5 |
href="https://example.com/"> |
6 |
iFrame |
7 |
</a> |
6. Display AJAX content in the lightbox.
1 |
<a class="venobox" |
2 |
data-gall="iframe" |
3 |
data-vbtype="ajax" |
4 |
href="ajax.php"> |
5 |
Ajax |
6 |
</a> |
7. Embed Youtube or Vimeo video into the lightbox.
01 |
<a class="venobox" |
02 |
data-gall="gall-video" |
03 |
data-autoplay="true" |
04 |
data-vbtype="video" |
05 |
href="http://vimeo.com/75976293"> |
06 |
Vimeo |
07 |
</a> |
08 |
09 |
<a class="venobox" |
10 |
data-gall="gall-video" |
11 |
data-autoplay="true" |
12 |
data-vbtype="video" |
13 |
href="https://youtu.be/bS5P_LAqiVg"> |
14 |
YouTube |
15 |
</a> |
8. Optionally you can open a default item in the lightbox on page load by adding the #firstlink to the desired trigger element.
1 |
<a id="firstlink" |
2 |
class="venobox" |
3 |
data-gall="myGallery" |
4 |
title="Image 1" |
5 |
href="1.jpg"> |
6 |
<img src="thumb.jpg" /> |
7 |
</a> |
9. Customization options.
01 |
$('.venobox').venobox({ |
02 |
03 |
// color of navigation arroes |
04 |
arrowsColor : '#B6B6B6', |
05 |
06 |
// same as data-autoplay |
07 |
autoplay : false, |
08 |
09 |
// background color |
10 |
bgcolor: '#fff', |
11 |
12 |
// border |
13 |
border: '0', |
14 |
15 |
// background color of close button |
16 |
closeBackground : '#161617', |
17 |
18 |
// colr of close button |
19 |
closeColor : "#d2d2d2", |
20 |
