Sample 1: Simple gallery

Sample area

• 

  Walking thru the woods

• 

  Resting near the lake

• 

  A waterfall surrounded by flowers

• 

  Rowing a boat on the lake

• 

  The perfect vacation

HTML

<ul id='gallery1'>
	<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

Already Included in packaged file jquery.invision.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);

// NOTE: method is always a string! 

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

All of the required scripts are already included in the * NIGHTLY BUILD. If you want the current (not so stable) BETA version, I strongly suggest you download these files and integrate them locally.

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript" ></script>
<script src="http://www.invision-web.net/gallery_beta/invision_gallery/jquery.invision.gallery.js" type="text/javascript"></script>
<link href="http://www.invision-web.net/gallery_beta/invision_gallery/jquery.invision.gallery.css" type="text/css" rel="stylesheet" />

* The nightly build is a version that gets updated with features and fixes every once in a while, every older version will be also kept in the invision_galllery/ directory. Backward comaptibility will be respected whenever possible. So if you want your websites to be up to date (but still with a possibility of a bug) you should use the nightly build.

Version information

Current Version: BETA 1.0
Last update: 10th August 2010

Version upgrades and bug fixes / Nightly Build LOG

August 2nd 2010
Published version BETA 1.0

August 8th 2010
Bug fix: Height of the container in Internet Explorer was not getting calculated correctly, 
causing images to appear below the middle of the container.

August 10th 2010
Added image preloading functionality which gives priority to the images in the gallery, 
note that this option is set to false by default for backward compatibility.

Compatibility

Currently tested on Windows XP, and WIn 7 among following browsers:

1. Mozilla Firefox 3.6+
2. Google Chrome 5.0+
3. Internet Explorer 8+

TIP: Most of potential discompatibility can be avoided thru CSS editing.

Download

You can download the files manually thru directory listing for the time being:
InVision jQuery Gallery plugin BETA 1.0:

Contact, Feedback, Support

This web site is still in it's initial creation state but will be upgraded soon. For now you can contact me by e-mailing to this address:

Donate

At this point I'm working to establish a donating account on moneybookers.

Sample 1: Image cropping

Click once on the image to start cropping and doubleclick it when done, to cancel press the ESC key. Move and resize the highlighted rectangle to the portion in which you want the image to be cropped.

Sample area

(click on the image to start cropping)

HTML

<img src='tools/samples/editimage.sample.png' id='sample1' />

Javascript

$('img#sample1').croppable({
	onCropComplete:function(l,t,w,h) {
		alert('Image cropped to dimensions '+ w + ', ' + h);
	}
});

Object methods

Methods included in the editImage plugin which can be applied/invoked on image elements. These methods can be used to be triggered by other elements on your page, for example if you want to use buttons to start or end cropping.

$('#image').croppable(options);
initializes the crop functionality over chosen image element

$('#image').cropStart();
Starts the cropping (displays the overlay)

$('#image').cropComplete();
Triggers the onCropComplete event 
or first sends the request to the server (when ajaxMode set to true)
and on server response triggers the onCropComplete event

#('#image').cropCancel();
Hides the cropping overlay.
	

Options and defaults

{
	ajaxMode:false,
	ajaxMethod:'post',
	ajaxURL:'editimage/editimage.php',
	ajaxOptions:{
		action:'crop',
		src:$image.attr('src'),
		left:0,
		top:0,
		width:$image.width(),
		height:$image.height()
	},
	ajaxDataType:'json',
	startOnReady:false,
	triggerElement:false, 
	triggerEvent:'click',
	completeElement:false, 
	completeEvent:'dblclick',
	confirmMessage:'Apply crop transformation?',
	onResizeStart:function() {},
	onResize:function() {},
	onResizeEnd:function() {},
	onMoveStart:function() {},
	onMove:function() {},
	onMoveEnd:function() {},
	onCropStart:function() {},
	onCropComplete:function(left,top,width,height) {},
	onCropCancel:function() {},
	tooltip:true,
	tooltipFormat:'{width} x {height} @ {left}, {top}',
	useKeys:true,
	completeKeyCode:13,
	cancelKeyCode:27,
	overlayWidth:Math.round($image.width()/2),
	overlayHeight:Math.round($image.height()/2),
	resolutionX:1,
	resolutionY:1,
	aspect:1
}

Requirements

The EditImage plugin requires following (versions last updated in 2009 at least):

• jquery.js
• jquery.event.drag.js
• jquery.invision.resizeable.js
• jquery.invision.editimage.js

All of the required scripts are already included in the download package. I suggest once you extract the editimage folder to your site root to copy-paste following code into your page/template:

<script src="editimage/js/jquery.js" type="text/javascript" ></script>
<script src="editimage/js/jquery.event.drag.js" type="text/javascript"></script>
<script src="editimage/js/jquery.invision.resizeable.js" type="text/javascript"></script>
<script src="editimage/js/jquery.invision.editimage.js" type="text/javascript"></script>

Version information

Version: 1.0
Last update: 10th January 2010

Download

Download jQuery EditImage plugin v1.0: