Jquery plugin by Amir Imani

JLight Gallery is a jquery plugin. With it you can easly create a dynamic overlay image gallery on your website. One thumbnail for how many images you want. This is my first plugin, I was inspired by the Jquery Lightbox plugin by Leandro Riveira Pinho. Here also no need for extra markup code.

I have intentionaly mantained the same style of the Jquery Lightbox plugin for whom who want to use both plugins on the same website.

Import XML image list trought AJAX.
New animated slider for image description.
You can set on the navigation bar an extra url to a featured website.

Tested with :
IE 7, IE 8, IE 9, Firefox 3.5, Firefox 13, Safari, Chrome and Opera
Copy and paste the following code in the head tags of your html document.
Remember to adjust the file path if you put the files in a different folder.
Change the id or class name in the $('.my-thumb a') if different.
<link rel="stylesheet" type="text/css" href="css/light-gallery.css" media="screen"/>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/light-gallery.js"></script>

<script type="text/javascript">

$(function() {
// $('id or class of the target button').lightGallery();
$('.my-thumb a').lightGallery();
Set in the <a rel=" " >" attribute the name of the album you set in your XML file.
Ex. <a href="#" rel="animals">some text or image</a> to open the <album name='animals'>
<div class="my-thumb">
//Write in the rel attribute the name of the target album you set in the XML file
<a href="#" rel="animals">
<img src="images/thumb-2.jpg" width="150" height="150" />

In the XML file set in the album attribute "name" the name of the album.
In the file tag write the image path.
In the title tag write the image description.
In the alias tag write the link name ( ex. More Informations ) if empty shows the link url.
In the link tag write the url of the featured website or what else.
Don't need to write the "http://" will be automatically added.

<?xml version="1.0" encoding="UTF-8"?>
<album name='animals'>

<![CDATA[ This is a cat it s name is Luna. ]]>
<alias>More Informations</alias>
<![CDATA[ A nice little duck. ]]>
<alias>More Informations</alias>
<![CDATA[ A funny pigeon. ]]>
<alias>More Informations</alias>

Custom options in the light-gallery.js file.
border = 10; Border thicknes, if changes must be changed also in the css
bottomPadding = 25; Bottom space for the pagination, if changes must be changed also in the css
resizeSpeed = 700; Resizing speed
fixedNav = false; If true shows always navigation buttons
fixedUrl = true; If true shows always the same url. If in the xml file you leave empty the link tag the url wouldn't display on the bar
pagination = true; Show/hide pagination
fixedTitle = true; If you want to set the first title to all images set to true
xmlFile = 'xml/light-gallery.xml'; Xml file path
pageNum = 'true'; if set to false doesn't show "image 1 of 2"
imageTxt = 'image'; "image" 1 of 2 language
ofTxt = 'of'; image 1 "of" 2 language
prevBut = 'images/light-gallery-btn-prev.gif'; Previous button image path
nextBut = 'images/light-gallery-btn-next.gif'; Next button image path
closeBut = 'images/light-gallery-btn-close.gif'; Close button image path
overlayOpacity = 0.8; Set overlay opacity
overlayColor = '#000'; Set overlay color
description = true; Set to false, hide description
popW = 400 Width of the popup window opened by the link button
popH = 300 Height of the popup window opened by the link button
popOpen = '_blank'; Target open link
popTool = 'yes'; Show toolbar in the opened page or not
scrollbars = 'yes'; Show scrollbars in the opened page or not
Licenza Creative Commons

Jquery Light Gallery Plugin by Amir Imani is licensed under a Creative Commons Attribuzione - Condividi allo stesso modo 3.0 Unported License. Based on a work at leandrovieira.com.
Design & Coding : Amir Imani - The Hypno-frog logo is property of Amir Imani and could not be used without the owner authorisation.
Copyright © 2012 by Amir Imani. All rights reserved