jQuery posterGallery
In order to display your art portfolio show your design ideas or advertising pictures, jQuery posterGallery places images in a horizontal row and steadily moves from left to right, when hovering the trigger buttons.
Features
Coherent animation speed
One feature of posterGallery is that you can start the animation at any position whilst keeping a constant velocity. To make this work, posterGallery calculates the animation time depending on the stage width, traveled distance and the initial animationSpeed.
Automatic scaling of images
Depending on the shape - portrait or landscape - posterGallery calculates the maximal value (80% of the gallery height) and assigns it to the longer edge of your image.
How to enable the jQuery posterGallery plugin
Place an unordered list with images inside the body tag. Put them inside a container with an id. I used
a section element with the id '#canvas-slider'.
Place the postergallery.css, the postergallery.js and the following code inside the head tag.
<script type="text/javascript">
$(window).load(function() {
$('#poster-gallery').posterGallery({transitionSpeed: 2, galleryHeight: 300, galleryWidth: 800, galleryBackground: '#cecece', outerShadow: '0 0 3px 0 #999'});
});
</script>
Options
A few options are available to make posterGallery fit into your web design.
- transitionSpeed: the time it takes to move from side to side (in seconds).
- galleryHeight: the height of the gallery. The size of (and space between) images will be calculated according to this value.
- galleryWidth: yeah, it simply sets the width of your gallery.
- galleryBackground: the background color of the gallery. Has to be written as a string, for example '#333333'.
- outerShadow: shape and color of the gallery shadow. Has to be written as a string, for example '0 0 3px 0 #999'.
An advice
On this site I used large images in different shapes to demonstrate the scaling capability of the plugin.
If you need to improve your website for speed, it is best practice to scale the images before the page loads. If you are running a php based web application, there probably is a mechanism that does it for you.
Anyhow i recommend doing this in a graphic software like GIMP or Photoshop.