Web masters often tend to make their web images look neet and fancy. For example, lightbox is today one of the most popular image plugins. However there are also numerous other gallery plugins. And by saying gallery I mean a group or a list of images. The one presented here is of my own creation and is a simplified jQuery (javascript) version of a popular Flash plugin called “photoFlow”.
Developer’s TIP:.
Skip this for later if you are here for the first time.
This plugin can also be integrated with jQuery version of lightbox.
But note this: since image dimensions are not always provided by the markup (as they should be for page speed), the gallery gets constructed as soon as all images on the site are loaded. After that, you can manipulate the images in any way you prefer (although some collision can occur so be carefull), so that also includes integrating the lightbox effect. It’s highly recommended that you use the “ready” option (as described below) to apply any additional funcionality to the images.
Also, tend to have all the images in similar dimensions for a neat look and feel of the gallery.
At one point I have also developed a simple PHP module that handles the image dimensions so they end up scaled to images of target fixed dimensions which means automatic resizing and scaling – saves a lot of trouble to Web masters and editors. I will write more about this issue in a while… However the customized way to adjust the image dimensions thru Web GUI is to use the EditImage Plugin which is described below.
Try out the sample of the gallery:
Demo: Simple Flowing Web Image Gallery
-
Walking thru the woods
-
Resting near the lake
-
A waterfall surrounded by flowers
-
Rowing a boat on the lake
-
The perfect vacation
HTML
<script src="https://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" ></script>
<script src="https://www.invision-web.net/gallery_beta/invision_gallery/jquery.invision.gallery.js" type="text/javascript"></script>
<link href="https://www.invision-web.net/gallery_beta/invision_gallery/jquery.invision.gallery.css" type="text/css" rel="stylesheet" />
<ul id='gallery1' class='jquery-gallery'>
<li>
<a href='#1'><img src="/tools/samples/images/img1.jpg" alt="Desc 1" /></a>
<p class='desc'>Walking thru the woods</p>
</li>
<li>
<a href='#2'><img src="/tools/samples/images/img2.jpg" alt="Desc 2" /></a>
<p class='desc'>Resting near the lake</p>
</li>
<li>
<a href='#3'><img src="/tools/samples/images/img3.jpg" alt="Desc 3" /></a>
<p class='desc'>A waterfall surrounded by flowers</p>
</li>
<li>
<a href='#4'><img src="/tools/samples/images/img4.jpg" alt="Desc 4" /></a>
<p class='desc'>Rowing a boat on the lake</p></li>
<li>
<a href='#5'><img src="/tools/samples/images/img5.jpg" alt="Desc 5" /></a>
<p class='desc'>The perfect vacation</p>
</li>
</ul>
JavaScript
$(function() {
var $gallery = $('ul#gallery1').gallery();
});
CSS
.jquery-gallery {
list-style:none;
display:block;
position:relative;
padding:10px;
border:1px solid black;
margin:10px;
overflow:hidden;
height:320px;
}
.jquery-gallery.loading {
background:url('images/loader.gif') center no-repeat;
}
.jquery-gallery li {
display:inline-block;
}
.jquery-gallery a img {
border:none;
display:none;
}
.jquery-gallery p {
display:none;
}
.jquery-gallery .current {
border:1px solid black;
padding:1px;
}
.jquery-gallery .desc {
margin:0px;
padding:10px;
}
Object methods
All of the methods are called thru the $.fn.gallery extension as following:
$(selector).gallery(method);
$(selector).gallery(method,params);
$(selector).gallery(method,params,additional);
Example:
Making a button click event swing to the next image and alert the image’s ALT text:
$('#mybutton').click(function() {
$("#mygallery").gallery("swing");
var $img = $("#mygallery").gallery("current");
alert( $img.attr("alt") );
});
List of available methods
{
"add":function(t,src) {},
// [ NOT IMPLEMENTED ]
"remove":function(t,selector) {},
// [ NOT IMPLEMENTED ]
"focus":function(t,mixed) {},
// bring focus to an image given by selector or index
"shift":function(t,amount) {},
// Move to focus to a neighbour image which is distantiated by amount
// (e.g. amount = 1 for the right neighbour) [USED in next,prev,swing,...]
"next":function(t) {},
// move focus to the next image
"prev":function(t) {},
// move focus to previous image
"scale":function(t,selector,scaleFactor) {},
// rescale an image by a scaleFactor: [ USED INTERNALLY : TODO: REMOVE FROM HERE]
"swing":function(t) {},
// Move to next image in current swing direction, if currently on the end, switch direction and then next
"swingcontinue":function(t) {},
// continue swinging [ USED INTERNALY : RECURSIVE! ]
"swingstart":function(t) {},
// Force start swinging
"swingstop":function(t) {},
// Force stop swinging
"current":function(t) {}
// return current focused image as in $(img)
}
Options and defaults
var defaults = {
ready:function() {},
// This function will be ran in the provided DOM element's context when the Gallery is constructed
// I encourage you tu use this when implementing InVision Gallery along with jQuery version of Lightbox
preloadImages:false,
// when set to true, the images are pre-loaded (they get the loading priority)
autoConstruct:true,
// when set to true, the structurea and images are used from existing DOM [ RECOMENDED ]
images:[],
// list of images, when need to construct the DOM [ NOT IMPLEMENTED YET ]
animDuration:400,
// default animation duration
scaleFactor:0.6,
// by distance from center this factor is used
opacityFactor:0.6,
// by distance from center this factor is used for opacity
effect:'default',
// default effect is photoFlow [ NOT IMPLEMENTED YET ]
imageDistance:10,
// the inital distance between two neighbour images (focused image to it's left / right sibling)
distanceFactor:1,
// as getting further from focused image,
// the images get distantiated by imageDistance * distinaceFactor ^ distance
maxHeight:'inherit',
// max height of an image [ EXPERIMENTAL | NOT IMPLEMENTED YET ]
retainContainerDimensions:false,
// since using absolute positioning, a container with no CSS defined dimensions
// will "loose" it's height, this should remain as is, and you should provide dimensions [ EXPERIMENTAL ]
descriptionSelector:'p:first',
// The class or selector which determines an element which holds the image description [ TEMPORARY ]
// Usually that element is found by following query: $img.parent().parent().find(descriptionSelector)
useMouseWheel:true,
// when set to true: images will scroll with the mouse wheel
swing:true,
// wheter to start swinging the gallery on startup
swingInterval:2000
// How much delay in miliseconds between switching focus to a neighbour image
}
DOM Extensions
In order to reference the DOM more quickly and to determine if a gallery has been constructed, some extensions are being added to DOM objects. This is provided here for debugging purposes and namespace hazards. I’m aware that there should be as least as possible of these, but note that this is still a BETA version.
ul.__gallery
// the gallery main object is attachted to the container for quick referencing
ul.__readyFunction
// reference to a function which should be ran when Gallery has been constructed,
// this is constructed and deleted after first execution
img.__index
// the image's zero-based index in it's main container object
img.__descbox
// reference to the corresponding image description element
Requirements
InVision Jquery Gallery [BETA] plugin requires following (versions last updated in 2010 at least):
jquery.js jquery.invision.gallery.js jquery.invision.gallery.css
Source Code
Source code:
InVision jQuery Gallery on GitHub
Clone from GitHub:
git clone git@github.com:kburnik/gallery.git
Download
Direct Download Link:
Download InVision jQuery Gallery from GitHub
—
Version information
Current Version: BETA 1.0
Last update: 10th August 2010
Compatibility
Currently tested on Windows XP, and WIn 7 among following browsers:
– Mozilla Firefox 3.6+
– Google Chrome 5.0+
– Internet Explorer 8+
TIP: Most of potential discompatibility can be avoided thru CSS editing.
Donate
If you’ve used this plugin and like it, be so kind to buy me a coffee!