Fancy jQuery Image Gallery with Lightbox Integration - Photofy
File Size: | 272 KB |
---|---|
Views Total: | 1726 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.