Fotorama - Simple Photo Album Plugin

Fotorama - Simple Photo Album Plugin
File Size: 22.4 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

Fotorama is a Simple new impressive jQuery photo album plugin with Thumbnails.It can help you create a simple and nice looking javascript gallery with intuitive controls, and great browser compatibility. You can also use this plugin on any other mobile devices. There're a lot of examples in the zip file to help you quickly create your own gallery.

Features:

  • Supports Auto play, Fullscreen, Responsive, Keyboard navigation, thumbnails, transiton, callback events, etc
  • Supports video, image, html, text, etc.
  • Cross Browser
  • Simple and easy to implement

Basic Usage:

1. Include jQuery library and jQuery fotorama on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="../product/fotorama.js"></script>

2. Include required jQuery Fotorama CSS on the page

<link  href="../product/fotorama.css" rel="stylesheet">

3. Create the html

<div class="fotorama"> 
<img src="i/okonechnikov/1-lo.jpg"> 
<img src="i/okonechnikov/2-lo.jpg"> 
<img src="i/okonechnikov/9-lo.jpg"> 
<img src="i/okonechnikov/6-lo.jpg"> 
<img src="i/okonechnikov/5-lo.jpg"> 
</div>

More Examples:

Change log:

v4.5.2 (2014-06-23)

  • Keyboard accessibility, allow tabbing on arrows and thumbs.
  • Better styles for printing.
  • New controlsonstart option. Set it to false if you want controls to appear only after hover or tap.
  • New thumbfit option.
  • New thumbratio:'auto' option (experimental :skull:).
  • Simplify and fix logic when to trigger show events
  • Fix video loading on https
  • Default cursor is now pointer because for desktop users one click is enough to switch the frame. Cursor changes to grab only on dragging and swiping.
  • Make fotorama monolithic with z-index.
  • Now fotorama’s dimensions are really the dimensions of the first image (by order, not by loading time).
  • Do not cache $('html') and $('body') for correct fullscreen in single-page-apps (Meteor, Angular, Derby).
  • Fix clicktransition behaviour.
  • Add missing dependencies and repository-setting to package.json
  • Better image fit, work nice with odd width without Retina artefacts.
  • Adjust animations.
  • Disabled trackpad by default.
  • Fix loop conditions.

v4.5.1 (2014-03-30)

  • Fix animations and visibility of arrows and captions.
  • Always visible arrows via arrows:'always'.
  • Fullscreen mode now using complete width and surpass the maxwidth limit.
  • Allow to hide captions via setOptions.
  • Make loop:true and clicktransition:'crossfade' play well together.
  • Extended keyboard support.
  • Fix some measures collisions.
  • Optimize, test.

v4.5.0 (2014-03-20)

  • New options: navwidth and clicktransition
  • Bugs fixed.

v4.4.9 (2013-12-31)

  • Fixed Partially hidden fullscreen-icon
  • Fixed Some animation bugs.
  • Fixed Move-click-swipe tolerances.
  • Fixed Recursion (when connecting some of the events and methods).

v4.4.8 (2013-11-13)

  • Counterclockwise spinner if direction:rtl.
  • Fix onTouchEnd call. Fix infinite spinner which sometimes happened
  • Fix doubled spinner.
  • Remove stagetap event.
  • More accurate deleting broken frames, good frames will not be flushed any more.

v4.4.7 (2013-11-05)

  • New preloader (spin.js).
  • Fix some issues with fade transitions in IE 7 and IE 8.
  • Disable GPU compositing of frame when video plays.
  • Cache image dimensions. Improved loading mechanics.

This awesome jQuery plugin is developed by artpolikarpov. For more Advanced Usages, please check the demo page or visit the official website.