Awesome Responsive LightBox Plugin For jQuery - VisualLightBox
File Size: | 1.19MB |
---|---|
Views Total: | 7500 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
VisualLightBox is a Cross-browser, responsive, and mobile-friendly jQuery plugin that allows you to create image galleries with thumbnails and 30+ awesome lightbox overlay effects.
Basic Usage:
1. Include necessary javascript files in the head section
<link rel="stylesheet" href="vlightbox1.css" type="text/css" /> <link rel="stylesheet" href="visuallightbox.css" type="text/css" media="screen" />
2. Include the Main CSS and Skin CSS files
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="../visuallightbox.min.js" type="text/javascript"></script>
3. Markup
<div id="vlightbox1"> <a class="vlightbox1" href="1.jpg" title="Image Lightbox"> <img src="1.jpg" alt="Image Lightbox"/> </a> <a class="vlightbox1" href="2.jpg" title="Lightbox features"> <img src="2.jpg" alt="Lightbox features"/> </a> </div>
4. Javascript
jQuery(document).ready(function(){ window.Lightbox = new jQuery().visualLightbox({ autoPlay:true, borderSize:39, classNames:'vlightbox1', descSliding:true, enableRightClick:false, enableSlideshow:true, resizeSpeed:7, slideTime:4, startZoom:true, overlayOpacity:0.9 }) }); jQuery(document).ready(function(){ var a=jQuery;a("#vlightbox1 .vlightbox1").mouseenter(function(){var b=a("div.vlb_zoom",this);if(!b.length){b=a(">a",this).get(0)||this;b=a('<div class="vlb_zoom" style="position:absolute">').html(a(b).html()).hide().appendTo(this);a("img:first",b).detach();b.html(b.html().trim())}if(b.html()){b.slideDown("fast")}}).mouseleave(function(){if(a("div",this).html()){a("div",this).slideUp("fast")}})});
Change Log:
v5.1.33 (2013-03-18)
- Features update
This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.