Minimal Image & Video Lightbox Plugin With jQuery - Quickview
File Size: | 96.9 KB |
---|---|
Views Total: | 5556 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Quickview is a super tiny jQuery plugin that allows you to open image and Youtube / Vimeo video links in a responsive modal lightbox popup instead of leaving the current page.
How to use it:
1. Add image or Youtube video links to your webpage.
<a href="large.jpg"> <img src="small.jpg"> </a> <a href="https://www.youtube.com/watch?v=ixTddQQ2Hs4"> Watch Me! </a>
2. Add jQuery library and the jQuery quickview plugin to your webpage.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="jquery_image_quickview.js"></script>
3. That's it. Style the lightbox using your own CSS styles.
#imageQuickView { display: none; width: 100%; height: 100%; background: #333333; background: rgba(0,0,0,0.8); z-index: 99999; position: fixed; top: 0; left: 0; } /*#imageQuickViewTable { display:table; width:100%; height:100%; }*/ #imageQuickViewCell { /*display:inline-block;*/ display: table-cell; vertical-align: middle; text-align: center; width: 100%; height: 100%; } #imageQuickView img { max-width: 90%; max-height: 90%; box-shadow: 2px 2px 5px rgba(0,0,0,0.8); cursor: pointer; } #imageQuickView iframe { max-width: 80%; max-height: 80%; border: none; } #imageQuickView .caption { color: #FFFFFF; max-width: 640px; margin: 5px auto; }
Change log:
2016-01-29
- Modified Regex to handle channles on Vimeo URL
2016-01-27
- Add responsive behavior for small devices
This awesome jQuery plugin is developed by bcole808. For more Advanced Usages, please check the demo page or visit the official website.