This time I will share jQuery Plugin and tutorial about Responsive Any Content Lightbox & Popup Plugin – jQuery Flashy, hope it will help you in programming stack.
| File Size: | 1.44 MB |
|---|---|
| Views Total: | 11763 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
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.
1 |
<link rel="stylesheet" href="flashy.min.css"> |
2 |
<script src="https://code.jquery.com/jquery-1.12.4.min.js" |
3 |
integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" |
4 |
crossorigin="anonymous"></script> |
5 |
<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.
1 |
<link rel="stylesheet" href="effect.css"> |
3. Create a gallery lightbox from a group of images.
01 |
<div class="example"> |
02 |
<a class="gallery" href="1.jpg"> |
03 |
<img src="thumb-1.jpg"> |
04 |
</a> |
05 |
<a class="gallery" href="2.jpg"> |
06 |
<img src="thumb-2.jpg"> |
07 |
</a> |
08 |
<a class="gallery" href="3.jpg"> |
09 |
<img src="thumb-3.jpg"> |
10 |
</a> |
11 |
... |
12 |
</div> |
1 |
<link rel="stylesheet" href="effect.css"> |
4. Create a gallery lightbox from mixed contents such as videos, iframes, inline contents, etc.
01 |
<a class="mixed" data-flashy-type="video" href="https://vimeo.com/271516323">Vimeo</a> |
02 |
<a class="mixed" data-flashy-type="video" href="https://youtu.be/dzNvk80XY9s">YouTube</a> |
03 |
<a class="mixed" data-flashy-type="iframe" href="https://example.com/">iFrame</a> |
04 |
<a class="mixed" data-flashy-type="inline" href="#inline">Inline</a> |
05 |
06 |
<div id="inline" style="display:none"> |
07 |
<div class="inline"> |
08 |
Inline Content here |
09 |
</div> |
10 |
</div> |
1 |
$('.mixed').flashy(); |
5. Apply custom effects to the lightbox & popup.
01 |
$('.mixed').flashy({ |
02 |
03 |
// Applied when a new item is shown |
04 |
showClass: 'fx-fadeIn', |
05 |
06 |
// Applied when a new item is hidden |
07 |
hideClass: 'fx-fadeOut' |
08 |
09 |
// Applied when a new item is shown on prev event |
10 |
prevShowClass: 'fx-bounceInLeft', |
11 |
12 |
// Applied when a new item is shown on next event |
13 |
nextShowClass: 'fx-bounceInRight', |
14 |
15 |
// Applied when the current item is hidden on prev event |
16 |
prevHideClass: 'fx-bounceOutRight', |
17 |
18 |
// Applied when the current item is hidden on next event |
19 |
nextHideClass: 'fx-bounceOutLeft' |
20 |
21 |
}); |
6. More customization options.
01 |
$('.mixed').flashy({ |
02 |
03 |
// image, inline, ajax, iframe, video |
04 |
type: 'image', |
05 |
06 |
// show title |
07 |
title: true, |
08 |
09 |
// can be any CSS valid unit - px, %, and etc |
10 |
width: null, |
11 |
height: null, |
12 |
13 |
// enable/disable gallery mode |
14 |
gallery: true, |
15 |
16 |
// enable/disable infinite loop |
17 |
galleryLoop: true, |
18 |
19 |
// show item counter |
20 |
galleryCounter: true, |
21 |
22 |
// show prev and next navigation controls |
23 |
galleryPrevNext: true, |
24 |
25 |
// message used in the item counter. If empty, no counter will be displayed |
26 |
galleryCounterMessage: '[index] / [total]', |
27 |
28 |
// enable/disable swipe on desktop |
29 |
gallerySwipeDesktop: true, |
30 |
31 |
// enable/disable swipe on mobile devices |
32 |
gallerySwipeMobile: true, |
33 |
34 |
// set swipe threshold in px |
35 |
gallerySwipeThreshold: 100, |
36 |
37 |
// enable/disable keyboard navigation with arrows and close with ESC |
38 |
keyboard: true, |
39 |
40 |
// close lightbox via the close button or overlay click |
41 |
overlayClose: false, |
42 |
