Weblenium » image gallery

prettyPhoto – a jQuery Lightbox clone

phorner — Sat, 23 May 2009 20:19:18 +0000

For those of you looking for a Lightbox clone that utilises jQuery, prettyPhoto provides the answer. prettyPhoto supports image galleries, Flash content, video (including YouTube) and embedding external websites using iframes.

It comes with four themes and has been tested and known to work with Firefox 2.0+, Safari 3.1.1+, Opera 9+, and Internet Explorer 6.0+.

prettyPhoto is released under the Creative Commons Attribution 2.5 license. This means it’s freely available for all projects (including commercial projects).

For more information: prettyPhoto

jQuery Image Gallery that uses mouse gestures

phorner — Sat, 16 May 2009 22:32:02 +0000

Here is an interesting take on navigating through an image gallery. jQuery-Gestures-Image Gallery uses mouse gesture combinations to perform certain navigation functionality. For example, holding the mouse button and moving the mouse to the left will go to the previous image in the gallery, holding the mouse button and moving the mouse to the right will go to the next image in the gallery. You can even link together various direction combinations to perform special functionality.

The examples on the jQuery-Gestures-Image Gallery page really help to show the possibilities. An intriguing idea. Will be interesting to see if this type of interaction gets adopted by the main stream.

For more information: jQuery-Gestures-Image Gallery

GalleryView: a jQuery Image Gallery

phorner — Wed, 13 May 2009 15:56:38 +0000

I was looking for a jQuery based gallery that could show images as a slideshow. I tested several possibilities but wasn’t really satisified as there was always something that wasn’t quite what I wanted. That’s when I stumbled across GalleryView.

GalleryView is a jQuery plugin that allows you to create image galleries (and also insert HTML to be displayed as content). It takes an unordered list of images and turns it into a gallery. You can create several types of galleries, such as horizontal or vertical scrolling thumbnails, galleries with panel overlays and content panels. You can also customise the thumbnails width and height, the fade opacity, whether the images cross fade or just appear, and so on.

Here is some example Javascript showing some of the configuration features:

$(document).ready(function(){
$('#photos').galleryView({
panel_width: 800,
panel_height: 600,
frame_width: 150,
frame_height: 80,
start_frame: 5,
overlay_position: 'top',
filmstrip_position: 'left',
transition_speed: 1500,
transition_interval: 6500,
overlay_opacity: 0.55,
frame_opacity: 1.0,
nav_theme: 'light',
easing: 'easeInOutQuad',
show_captions: true,
fade_panels: false,
panel_scale: 'crop',
frame_scale: 'nocrop',
pointer_size: 12,
frame_gap: 10,
pause_on_hover: true
});
});

If you use the jQuery Easing plugin in addition, this will help to create a smoother filmstrip animation. You can also create your own theme for the styling of GalleryView. It comes with two themes, “light” and “dark”.

GalleryView is incredibly simple to setup. You’ll have a gallery up and running within about 10 minutes.

For more information: GalleryView