Initialization

By default, Fotorama is initialized automatically in every <div> element with the specified fotorama class.

You can switch this behavior to manual by setting the data-auto attribute to false.

<div class="fotorama"
     data-auto="false">
  <img src="1.jpg">
  <img src="2.jpg">
</div>

...and turn it on manually:

$(function () {
  $('.fotorama').fotorama();
});

Data

Load data into fotorama directly via Javascript:

<div class="fotorama"
     data-auto="false"></div>

<script>
  $('.fotorama').fotorama({
    data: [
      {img: '1.jpg', thumb: '1-thumb.jpg'},
      {img: '2.jpg', thumb: '2-thumb.jpg'}
    ]
  });
</script>

You can also apply the Image CDN approach when dynamically loading images.

<div class="fotorama"
    data-auto="false"></div>

<script>
$('.fotorama').fotorama({
 data: [
   {img: 'https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/',
    thumb: 'https://ucarecdn.com/05f649bf-b70b-4cf8-90f7-2588ce404a08/-/resize/96x/'},
   {img: 'https://ucarecdn.com/a9ed82c6-14f1-462e-849e-3b007c2aae87/',
    thumb: 'https://ucarecdn.com/a9ed82c6-14f1-462e-849e-3b007c2aae87/-/resize/96x/'}
 ]
});
</script>

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: 'https://youtu.be/C3lWwBslWqg', // 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'
}