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.


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'});


A few options are available to make posterGallery fit into your web design.

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.


Download the files you need to get posterGallery running in a zipped package here.