Get started with fotorama CDN

MIT licensed

Fotorama is a lightweight, touch-friendly photo gallery library for the web.

Tags:
  • gallery
  • ui
  • responsive
  • slider
  • carousel
  • slideshow
  • photo
  • image
  • content
  • video

Stable version

Copied!

How to start using fotorama CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fotorama@4.6.4/css/fotorama.css">
  <script src="https://cdn.cdnhub.io/fotorama/4.6.4/fotorama.min.js"></script>
</head>
<body>
  <button id="gallery">Open Gallery</button>
  <div class="gallery" style="display: none;">
    <a href="image1.jpg" class="gallery-item">
      <img src="image1.jpg" alt="Image 1">
    </a>
    <a href="image2.jpg" class="gallery-item">
      <img src="image2.jpg" alt="Image 2">
    </a>
    <a href="image3.jpg" class="gallery-item">
      <img src="image3.jpg" alt="Image 3">
    </a>
  </div>

  <script>
    document.getElementById('gallery').addEventListener('click', function() {
      new Fotorama('.gallery', {
        arrows: 'thumbnails',
        nav: 'thumbs'
      });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions