jquery-iLightbox 0.1
jQuery Lightbox is a simple port of the popular lightbox script.
_<a href=http://grandesign.md/__cr/plugins/jquery.iLightbox/" target="blank">Demo Page
Usage
Styles:
Include the jquery.lightbox css file in your html page.
<link href="jquery.lightbox.css" type="text/css" rel="stylesheet" />Javascript:
Include the jQuery library and jquery.iLightbox script file in your html page.
<script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="jquery.lightbox.min.js"></script>Create link elements whose href attributes will contain the path of the element you wish to open within the iLightbox.
<a href="http://www.lifelenta.ru/images/uploads/files/FE4kxj8ylCwmc.jpg" data-lightbox-gallery="gallery" data-lightbox-title="Image 1" class="lightbox">Image 1</a> <a href="http://www.lifelenta.ru/images/uploads/cs41/Nt1cVeiuHds5I.jpg" data-lightbox-gallery="gallery" class="lightbox">Image 2</a>The plugin is named "iLightbox" and can be applied to any element. You will probably also specify some options while applying the plugin.
$(document).ready(function() { $('a.lightbox').iLightbox({ type: 'image', //'image', 'ajax', 'iframe', 'swf' and 'html' loop: true, //loop media arrows: true, //show arrows closeBtn: true, //show close button title: null, //title href: null, //link to media content: null, //html content beforeShow: function(a, b) {}, onShow: function(a, b) {}, beforeClose: function() {}, afterClose: function() {}, onUpdate: function(a) {}, template: { container: '<div class="iLightbox-container"></div>', image: '<div class="iLightbox-media"></div>', iframe: '<div class="iLightbox-media iLightbox-iframe"></div>', title: '<div class="iLightbox-details"></div>', error: '<div class="iLightbox-error">The requested content cannot be loaded.<br/>Please try again later.</div>', closeBtn: '<a href="#" class="iLightbox-close"></a>', prevBtn: '<div class="iLightbox-btnPrev"><a href="javascript:;"></a></div>', nextBtn: '<div class="iLightbox-btnNext"><a href="javascript:;"></a></div>' } }); });Features
manual Options:
- $.iLightbox.close()
attribute Options:
- data-lightbox-gallery | name of gallery
- data-lightbox-title | media title
- data-lightbox-title | type of media
- data-lightbox-content | media content
License
Licensed under MIT license.
