InVision jQuery Gallery plugin [BETA]
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 a few samples: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
<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:- Mozilla Firefox 3.6+
- Google Chrome 5.0+
- Internet Explorer 8+
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.InVision jQuery EditImage plugin v1.0
Once an image is uploaded to the server it often needs adjustments such as cropping, resizing, etc.Following samples show how an image can be cropped using the EditImage plugin.
The editImage plugin supports ajax for sending the crop request to the server side script, when the server responds, the image gets reloaded in its new portion and can be cropped again.
This functionality is not provided in this sample for security reasons.
Try out a few samples: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
<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
