Responsive Any Content Lightbox & Popup Plugin - jQuery Flashy

File Size: 1.44 MB
Views Total: 13562
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="" 
<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 class="gallery" href="2.jpg">
    <img src="thumb-2.jpg">
  <a class="gallery" href="3.jpg">
    <img src="thumb-3.jpg">
<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="">Vimeo</a>
<a class="mixed" data-flashy-type="video" href="">YouTube</a>
<a class="mixed" data-flashy-type="iframe" href="">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

5. Apply custom effects to the lightbox & popup.


  // 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.


  // 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.