Image Slider Popup Plugin With jQuery - Popup Lightbox

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:

• Top 10 JavaScript & CSS Gallery Lightbox Libraries

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.