Fotorama initialized automatically in all the blocks with the fotorama class.

Change this with data-auto="false":

<div class="fotorama"
  <img src="1.jpg">
  <img src="2.jpg">

...and turn it on manually:

$(function () {


Load data into fotorama directly via Javascript:

<div class="fotorama"

    data: [
      {img: '1.jpg', thumb: '1-thumb.jpg'},
      {img: '2.jpg', thumb: '2-thumb.jpg'}

Frame object

The complete frame object may look like so:

  img: '1.jpg',
  thumb: '1-thumb.jpg',
  full: '1-full.jpg', // Separate image for the fullscreen mode.
  video: '', // Youtube, Vimeo or custom iframe URL
  id: 'one', // Custom anchor is used with the hash:true option.
  caption: 'The first caption',
  html: $('selector'), // ...or '<div>123</div>'. Custom HTML inside the frame.
  fit: 'cover', // Override the global fit option.
  any: 'Any data relative to the frame you want to store'