Responsive Any Content Lightbox & Popup Plugin - jQuery Flashy

Flashy is a brand new jQuery popup & gallery lightbox plugin created for showcasing your content in a responsive, touch-enabled slider/carousel popup. With focus on performance and effects.

Supports most popular of media types such as images, HTML5/Youtube/Vimeo videos, iframe content, inline content and much more.

More features:

• Item counter.
• Supports swipe events.
• Content loading indicator.
• Keyboard navigation with arrows and close with ESC.
• Autoplay video.
• Infinite loop.

How to use it:

1. Import jQuery library and the Flashy plugin's files into the html file.

<link rel="stylesheet" href="flashy.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous"></script>
<script src="jquery.flashy.min.js"></script>

2. Load the animation library for extra elegant effects. In this example, we're going to use the effect.css for CSS3 powered animations.

<link rel="stylesheet" href="effect.css">

3. Create a gallery lightbox from a group of images.

<div class="example">
  <a class="gallery" href="1.jpg">
    <img src="thumb-1.jpg">
  </a>
  <a class="gallery" href="2.jpg">
    <img src="thumb-2.jpg">
  </a>
  <a class="gallery" href="3.jpg">
    <img src="thumb-3.jpg">
  </a>
  ...
</div>

<link rel="stylesheet" href="effect.css">

4. Create a gallery lightbox from mixed contents such as videos, iframes, inline contents, etc.

<a class="mixed" data-flashy-type="video" href="https://vimeo.com/271516323">Vimeo</a>
<a class="mixed" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s">YouTube</a>
<a class="mixed" data-flashy-type="iframe" href="https://example.com/">iFrame</a>
<a class="mixed" data-flashy-type="inline" href="#inline">Inline</a>

<div id="inline" style="display:none">
  <div class="inline">
    Inline Content here
  </div>
</div>

$('.mixed').flashy();

5. Apply custom effects to the lightbox & popup.

$('.mixed').flashy({

  // Applied when a new item is shown
  showClass: 'fx-fadeIn',

  // Applied when a new item is hidden
  hideClass: 'fx-fadeOut'

  // Applied when a new item is shown on prev event
  prevShowClass: 'fx-bounceInLeft',

  // Applied when a new item is shown on next event
  nextShowClass: 'fx-bounceInRight',

  // Applied when the current item is hidden on prev event
  prevHideClass: 'fx-bounceOutRight',

  // Applied when the current item is hidden on next event
  nextHideClass: 'fx-bounceOutLeft'

});

6. More customization options.

$('.mixed').flashy({

  // image, inline, ajax, iframe, video
  type: 'image',

  // show title
  title: true,

  // can be any CSS valid unit - px, %, and etc
  width: null,
  height: null,

  // enable/disable gallery mode
  gallery: true, 

  // enable/disable infinite loop
  galleryLoop: true, 

  // show item counter
  galleryCounter: true, 

  // show prev and next navigation controls
  galleryPrevNext: true, 

  // message used in the item counter. If empty, no counter will be displayed
  galleryCounterMessage: '[index] / [total]', 

  // enable/disable swipe on desktop
  gallerySwipeDesktop: true, 

  // enable/disable swipe on mobile devices
  gallerySwipeMobile: true, 

  // set swipe threshold in px
  gallerySwipeThreshold: 100, 

  // enable/disable keyboard navigation with arrows and close with ESC
  keyboard: true, 

  // close lightbox via the close button or overlay click
  overlayClose: false, 

  // additional css classes for customization
  themeClass: null, 
  
  // enable/Disable video autoplay
  videoAutoPlay: false, 

  // error message displayed when a content fails to load
  loadError: 'Sorry, an error occured while loading the content...' 

});

---

This awesome jQuery plugin is developed by avirtum. For more Advanced Usages, please check the demo page or visit the official website.