jQuery Plugin For Animated Image Popup Lightbox - jdbpopup
File Size: | 3.53 MB |
---|---|
Views Total: | 6352 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

jdbpopup is a jQuery plugin integrated with Transit.js that allows you to create responsive, CSS3 animated image lightbox popups while hiding the browser scrollbar.
How to use it:
1. Load the jdb_popup.min.css
in the head section of the document.
<link rel="stylesheet" href="jdb_popup.min.css">
2. Load jQuery library and the jdb_popup.min.js
at the end of the document.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="jdb_popup.min.js"></script>
3. The Html.
<a href="orignal.jpg" title="Image Caption" id="demo"> <img src="thumb.jpg" alt="Image Alt"> </a>
4. Call the plugin and setup the animation type when the image lightbox pops up.
$("#demo").jdbpopup({ effect: "fade" })
5. Available options.
$("#demo").jdbpopup({ // transition speed when the lightbox opens timeOpen: 1200, // transition speed when the lightbox closes timeClose: 800, // easing options. // refer to http://ricostacruz.com/jquery.transit/ for more information easing: "snap", // animations // 'fade', 'scale', 'flipX', 'flipY', 'slide', 'translateX', 'translateY', 'translateXY' effect: "translateX", // enable image captions caption: false, // enable responsive layout responsive: true, })
Change log:
2015-02-23
- update.
This awesome jQuery plugin is developed by juliendb. For more Advanced Usages, please check the demo page or visit the official website.