Fotorama - Responsive jQuery Image Gallery

What is Fotorama?

Fotorama is a lightweight, responsive jQuery plugin for creating image galleries, slideshows, and carousels. It supports swipe gestures, keyboard navigation, fullscreen mode, thumbnails, and video embedding. Despite being a mature library, it remains widely used for its simplicity and zero-configuration setup.

Quick Setup

<!-- 1. Include jQuery + Fotorama CSS/JS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>

<!-- 2. Add images inside a .fotorama container -->
<div class="fotorama">
  <img src="image1.jpg" alt="First slide">
  <img src="image2.jpg" alt="Second slide">
  <img src="image3.jpg" alt="Third slide">
</div>

That's it - Fotorama auto-initializes on any element with the fotorama class.

Configuration via data-* Attributes

<div class="fotorama"
  data-width="100%"
  data-ratio="16/9"
  data-max-width="800"
  data-nav="thumbs"
  data-allowfullscreen="true"
  data-autoplay="3000"
  data-loop="true"
  data-arrows="true"
  data-click="true"
  data-swipe="true"
  data-keyboard="true"
  data-transition="crossfade"
  data-fit="cover">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
</div>

Options Reference

JavaScript API

// Initialize programmatically
var $fotorama = $('.fotorama').fotorama();
var api = $fotorama.data('fotorama');

// Navigate
api.show(0);        // go to first frame
api.show('>');      // next
api.show('<');      // previous

// Control playback
api.startAutoplay(3000);
api.stopAutoplay();

// Enter/exit fullscreen
api.requestFullScreen();
api.cancelFullScreen();

// Dynamic images
api.push({ img: 'new-photo.jpg', thumb: 'new-thumb.jpg' });

// Events
$fotorama.on('fotorama:show', function(e, fotorama) {
  console.log('Now showing frame:', fotorama.activeIndex);
});

Custom Styling

/* Custom arrow buttons */
.fotorama__arr--prev { background-image: url('left-arrow.svg'); }
.fotorama__arr--next { background-image: url('right-arrow.svg'); }

/* Custom dot navigation */
.fotorama__dot { background: #ccc; }
.fotorama__active .fotorama__dot { background: #04122e; }

/* Thumbnail styling */
.fotorama__thumb-border { border-color: #f2bf59; }

Modern Alternatives

If you are starting a new project without jQuery, consider these modern alternatives: Swiper.js (framework-agnostic, touch-optimized), Splide (lightweight, accessible), or Glide.js (minimal, no dependencies). However, Fotorama remains a solid choice for jQuery-based projects.