JSFiddle - React, Tailwind, and code Playground

by Maicol Lopez Mora

HTML

<link rel="stylesheet" href="http://fotorama.s3.amazonaws.com/4.5.0/fotorama.css">
<script src="http://fotorama.s3.amazonaws.com/4.5.0/fotorama.js"></script>
  <!-- Just don’t want to repeat this prefix in every img[src] -->
  <base href="http://fotorama.s3.amazonaws.com/i/okonechnikov/">

<!-- Fotorama -->
<div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%">
  <img src="1-lo.jpg">
  <img src="2-lo.jpg">
  <img src="9-lo.jpg">
  <img src="6-lo.jpg">
  <img src="5-lo.jpg">
</div>

JavaScript

// 1. Initialize fotorama manually.
var $fotoramaDiv = jQuery('.fotorama_custom').fotorama({
  click:false,
  allowfullscreen:true,
});

    // 2. Get the API object.
    var fotorama = $fotoramaDiv.data('fotorama');


jQuery('.fotorama').dblclick(function(){
    fotorama.requestFullScreen();
    
});