JLIGHT GALLERY 0.1
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.
Features:
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
INSTRUCTIONS
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">
$(document).ready(function(){
$(function() {
// $('id or class of the target button').lightGallery();
$('.my-thumb a').lightGallery();
});
})
</script>
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" />
</a>
</div>
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"?>
<gallery>
<album name='animals'>
<image>
<file>gallery/animals/cat.jpg</file>
<title>
<![CDATA[ This is a cat it s name is Luna. ]]>
</title>
<alias>More Informations</alias>
<link>![CDATA[http://en.wikipedia.org/wiki/Cat]]></link>
</image>
<image>
<file>gallery/animals/duck.jpg</file>
<title>
<![CDATA[ A nice little duck. ]]>
</title>
<alias>More Informations</alias>
<link>![CDATA[http://en.wikipedia.org/wiki/Anatidae]]></link>
</image>
<image>
<file>gallery/animals/pigeon.jpg</file>
<title>
<![CDATA[ A funny pigeon. ]]>
</title>
<alias>More Informations</alias>
<link>![CDATA[http://en.wikipedia.org/wiki/Pigeon]]></link>
</image>
</album>
</gallery>
SETTINGS
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 |
