Awesome Responsive LightBox Plugin For jQuery - VisualLightBox

File Size: 1.19MB
Views Total: 7473
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Awesome Responsive LightBox Plugin For jQuery - VisualLightBox

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)


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