InVision jQuery Gallery plugin

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

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! :-)


Donation points



Web Plugins | Posted on July 2, 2013 by .

About Kristijan Burnik

Kristijan Burnik is a Programmer and Web Developer specializing in Server-side and Client-side Technologies and Application Development on Linux Servers and Windows Desktop . Also has experience in Networking, Desktop application development as well as Android mobile application development . Experienced in Programming Languages like Java, C, C++, C#, PHP, Javascript, MySQL and somewhat in other languages like Bash, Perl & Python. Sometimes he works as a Graphical Designer for digital production as well as for printing and advertising. He dedicates his spare time writing Tech Articles on his blog in order to share his work with others, as well as to document his projects for his own use. He's also an Educator & Mentor in field of Algorithms and Programming to young programmers in Zagreb, Croatia.

Leave a Reply