Image Slider Popup Plugin With jQuery - Popup Lightbox
File Size: | 8.03 KB |
---|---|
Views Total: | 24823 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

The Popup Lightbox jQuery plugin displays large images in a responsive slider popup when you click the thumbnails. The users are able to slide through the images by clicking the next/prev buttons.
More features:
- Uses animate.css for CSS3 animations.
- Uses Font Awesome for slider controls.
- Shows a counter that displays the current/total images.
- Auto exacts captions from
alt
attribute.
See also:
How to use it:
1. Include the necessary jQuery library, Animate.css and Font Awesome Iconic Font on the web page.
<!--jQuery--> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> </script> <!--Font Awesome--> <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!--Animate CSS--> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" rel="stylesheet" />
2. Include the jQuery Popup Lightbox plugin's files.
<!--Popup Lightbox Js--> <script src="js/jquery.popup.lightbox.js"></script> <!--Popup Lightbox CSS--> <link href="css/popup-lightbox.css" rel="stylesheet">
3. Insert images into the slider popup.
<div class="img-container"> <img src="https://source.unsplash.com/600x450/?fitness" alt="Fitness" /> <img src="https://source.unsplash.com/600x450/?bikini" alt="jQueryScript.Net"/> <img src="https://source.unsplash.com/600x450/?girl" alt="Girls"/> <img src="https://source.unsplash.com/600x450/?fashion" alt="Fashion" /> </div>
4. Call the plugin on the top container and done.
$(document).ready(function(){ $(".img-container").popupLightbox(); });
5. Customize the width & height of the slider popup.
$(".img-container").popupLightbox({ width: 600, height: 450 });
6. Specify the animation name (animate.css) for the slide popup.
$(".img-container").popupLightbox({ inAnimation: "ZoomIn" });
This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.