Cross browser fluid jQuery image gallery
![Cross browser fluid jQuery image gallery](/media/2010/8/22/1282489300.jpg)
The plugin
This little jQuery image gallery plugin is basicly recreates the standard built-in window scrolling with a smooth easing effect. It is still in an early, development state, thus it may suffer from issues; but I will be working on it to make jReelGallery a more solid and robust widget.
The idea came while I was browsing the internet for available galleries for jQuery. I have seen a lot of good solutions but none of them fullfilles all the requirements I have been looking for. I decided to create a new plugin with all the features I need or consider as important: simplicity, usability and light-weight code.
Usability
Nowdays usability should be a very important and crucial part of a any web project. By extending the availability of your site and presenting it to wider audience, you increase the probability of achieving more visits which is leading to more sales, conversions and success.
In programming soemtimes it is really hard but not impossible at all to be light-weight and userfriendly at the same time. Sometimes you need to sacrifice a few things to stay between of the limits. This time the sacrifice was to give up the degradation when javascript is turned off. Whats left is a nice navigation: the plugin provides several ways to scan through the gallery. Mainly all the default(?) features, namely mouse scrolling, up and down arrow keys, home and end buttons, you would use while browsing in a window are available. In the future I would like to widen the “shortcuts” to include page down / up as well. Moreover, make it possible to configure it as you wish.
Usage
HTML
<ul id="jreel-gallery"> <li><img src="images/1.jpg" alt="1.jpg" /></li> <li><img src="images/2.jpg" alt="2.jpg" /></li> <li><img src="images/3.jpg" alt="3.jpg" /></li> </ul>
JavaScript
jQuery(document).ready( function(){ $('#images').css('height',$(window).height()); /* I set the height by javascript to fill the full screen */ $("ul#jreel-gallery").reelGallery(); } );
CSS
ul#jreel-gallery { width: 400px; height: 1px; /* In the example I set the height by javascript, see above */ margin: 0 auto; padding: 0px 50px; overflow: hidden; } ul#jreel-gallery li { width: 400px; height: 300px; // Important! See below background: #fff; margin: 35px 0px; position: relative; } ul#jreel-gallery img { width: 400px; height: 300px; // Important! See below }
Note: I use precise dimensions for the images. It is not necessary to give the proper size of each and every image, but it comes with a price. The code itself contains an algorithm for this case that will calculate the all the heights by measuring the images. Problem is solves, or isn’t? No, because to calculate the proper size all the images, they have to be loaded before the algorithm is running. This means you need to use a preloader for your website or otherwise you are forced to give the dimensions by hand. It’s up to you. I suggest using a preloader.
Options
maxAcceleration : 20 | Actually it’s a negative acceleration. This number is used when the gallery reaches the end or top. It slows down the easing. Higher number means smaller easing (= takes more time to stop). |
speedFactor: 0.2 | It’s the factor of the easing. Very sensitive. Try changing it to 0.1 for example. |
framesPerSecundum: 33 | How often should the code refresh in a second? Like speedFactor, changing it may require a fine tuning on other options (like speedFactor) |
eventArea: ‘document’ | Where the events should be triggered? |
keyEvents: true | Should the keyboard shortcuts (up, down, home, end) be enabled? |
mouseEvents: true | Should the mouse scrolling be enabled? |
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form form validation gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu