Submit your widget

Cross browser fluid jQuery image gallery

Created 13 years ago   Views 13275   downloads 1595    Author marcelljusztin
Cross browser fluid jQuery image gallery
View DemoDownload
94
Share |

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?