Weblenium » jquery

AnythingZoomer – a jQuery plugin Zoomer

phorner — Tue, 21 Jul 2009 14:55:09 +0000

AnythingZoomer is a jQuery plugin that will zoom just about anything. Image, text and calendar zooming are examples presented on the website. You can even double click on the unzoomed object to see the enlarged version.

Great for those eCommerce websites looking for a product zoomer but don’t want to use Flash.

For more information: AnythingZoomer

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

Multiple file upload using jQuery and Flash

phorner — Fri, 01 May 2009 17:39:23 +0000

I was recently searching for a solution that would allow people to upload photos of their homes on Golf Home Exchange. The standard upload method using HTML forms and PHP was not good enough as their was no indication of progress. As a result, the users thought the system wasn’t responding or something had gone wrong when simply it was taking a while to upload the image. Many simply gave up and never finished the registration process.

Luckily I stumbled across Uploadify, developed by Ronnie Garcia. Uploadify is a jQuery plugin that allows the easy integration of multiple (or single) file uploads. By default, the standard File Upload dialog in browsers only allows for single selection of files. To circumvent this issue and enable multiple file uploading, Flash is used.

To get started, you will need to download the jquery.uploadify-v1.6.2.zip package, then unzip and upload the files to your website.

Then in your HTML, add this code:

This will set up Uploadify in it’s basic form. There are a ton of parameters you can set, plus event listeners (e.g. onAllComplete – triggers when all the files in the queue have been uploaded).

You can provide your own styled upload button and specifying the path to it by using the buttonImg parameter. If you want to customise the look of the upload progress bars, you will need to go into the Uploadify FLA and modify that manually.

You can also specify whether multiple files upload simultaneously or one at a time.

The script parameter allows you to specify your server side code that gets executed once a file has finished uploading. The example provided is PHP but you could use any backend development language.

There is only one downside to Uploadify, and that is that it needs Flash Player installed. If a user doesn’t have Flash Player installed, then it won’t work. I’m still looking for a File Upload solution for instances where the user doesn’t have Flash Player installed. Can anyone point me in the right direction?

Apart from this small issue, Uploadify is a solid alternative to using the standard File Upload dialog.

For more information and documentation: Uploadify

Sliding jQuery Login Panel that reduces needed screen space

phorner — Thu, 23 Apr 2009 22:50:25 +0000

One of the things I dislike the most when creating the layout for a website is trying to find a good place to put the login/register details. You can never quite find the right spot to put it. However, Jeremie Tisseau from web-kreation.com, has developed a sliding login panel using jQuery which overcomes this problem.

The login/registration panel sits at the top of the screen, only showing a small tab.

When a trigger in the tab is clicked, the hidden portion of the panel slides down over the current screen contents, displaying login and registration fields.

Not only does this function well, it looks great too. Jeremie has also done a tutorial explaining how to integrate his sliding panel into Wordpress.

For more information: www.web-kreation.com