jQuery Plugin For Animated Image Popup Lightbox - jdbpopup

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.