Fotorama - A simple, stunning, powerful jQuery gallery

Fotorama is a simple, stunning, powerful jQuery gallery.

It's default settings are good, so there’s no need to mess with them. Still, you can fine-tune:

• Dimensions

Fotorama’s dimensions are the dimensions of the first image. Other pictures are scaled proportionally to fit. 

• Thumbnails

Change navigation style from iPhone-style dots to thumbnails by adding data-nav="thumbs".

• Fullscreen

Allow fotorama to enter fullscreen using data-allowfullscreen.

• Video

To add video from YouTube or Vimeo just link to the video page.

• HTML

Show custom HTML.

• Fit

There are 4 ways to fit an image into a fotorama.

• Transition

Define which transition to use — slide or crossfade — using data-transition.

• Captions

Add a captions using data-caption.

• Hash

Attribute data-hash="true" lets the page change its URL upon switching images.

• Loop

Loop the last and the first frame for seamless transition using data-loop="true".

• Autoplay

Let Fotorama play photos automatically using data-autoplay="true".

• Shuffle

Shuffle the frames by adding data-shuffle="true".

• Keyboard

Turn on keyboard navigation with the arrows by adding data-keyboard="true".

• Arrows, click, swipe

Control the way your users interact with the fotorama with three attributes data-arrows, data-click, data-swipe and data-trackpad.

• Navigation position

To move dots or thumbs on top, use data-navposition="top".

• Lazy load

Browsers load images even if they are removed with JavaScript.