Fancy jQuery Image Gallery with Lightbox Integration - Photofy

Photofy is a fancy jQuery image/photo gallery plugin that automatically & randomly shuffle and swap images at a given interval. When visitors click on an image, it will open a ligthtbox within the gallery and show a larger image and some other html elements.

How to use it:

1. Load the jQuery photofy plugin after jQuery javascript library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery-photofy.js" type="text/javascript"></script>

2. Create an empty container to display the image gallery.

<div id="photofy"></div>

3. Create an image list in the Javascript.

var images = [
{ImageUrl: "Images/Thumbnails/1.jpg", LinkUrl: "Images/1.jpg", HTML: "Description 1" },
{ImageUrl: "Images/Thumbnails/2.jpg", LinkUrl: "Images/2.jpg", HTML: "Description 1" },
{ImageUrl: "Images/Thumbnails/3.jpg", LinkUrl: "Images/3.jpg", HTML: "Description 1" }
]

4. Call the plugin and load the data from the image list you just created.

$("#photofy").photofy({
imageSource: images,
});

5. The sample CSS to style the gallery. Change it as you like.

#photofy {
width: 506px;
height: 304px;
position: absolute;
top: 40%;
left: 50%;
margin: -152px 0 0 -253px;
}
#photofy a {
color: #1f90c5;
}
#photofy a.photofy_overlay_close {
font-size: 12px;
}
#photofy a.photofy_thumbnail {
border: 1px solid #eee;
display: block;
float: left;
text-decoration: none;
width: 100px;
height: 100px;
margin: 0 -1px -1px 0;
}
#photofy a img {
border: none;
}

---

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