### Initialize Fotorama with Options

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/speed/hide-addClass-detach.html

This example shows how to initialize Fotorama with custom options. Ensure the HTML structure includes a container for the gallery.

```javascript
$(function () {
  var fotorama = $(".fotorama").fotorama({
    width: 700,
    maxwidth: '100%',
    ratio: 800/400,
    allowfullscreen: true,
    nav: 'dots'
  });
});
```

--------------------------------

### Update Options with setOptions()

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Modify gallery configuration dynamically after the initial setup.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Change single option
fotorama.setOptions({ loop: true });

// Change multiple options at once
fotorama.setOptions({
  transition: 'crossfade',
  transitionduration: 500,
  autoplay: 3000,
  nav: 'dots',
  arrows: 'always',
  captions: false
});

// Disable navigation
fotorama.setOptions({
  arrows: false,
  click: false,
  swipe: false
});
```

--------------------------------

### Access Fotorama API

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/__base.html

This snippet shows how to get an instance of the Fotorama API after it has been initialized. This instance can then be used to control the gallery programmatically.

```javascript
$(function () { f = $('.fotorama').data('fotorama'); })
```

--------------------------------

### Control Fotorama Autoplay

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/start-n-stop.html

Basic implementation for triggering autoplay start and stop via external buttons.

```javascript
var fotorama = $('#start-n-stop').data('fotorama');
    $('#start').on('click', function () {
      fotorama.startAutoplay(3000);
    });
    $('#stop').on('click', function () {
      fotorama.stopAutoplay();
    });
```

```javascript
input[type="button"] { font-size: 16px; } $(function () { var $fotorama = $('#start-n-stop'), fotorama = $fotorama.data('fotorama'), $thumbBorder = $('.fotorama__thumb-border', $fotorama), thumbBorderColor = $thumbBorder.css('border-color'), thumbBackground = $thumbBorder.css('background'), $start = $('#start'), $stop = $('#stop'); // Visual response $fotorama.on('fotorama:startautoplay fotorama:stopautoplay', function (e, fotorama) { $start.attr('disabled', !!fotorama.autoplay); $thumbBorder.css({ borderColor: fotorama.autoplay ? 'rgb(0, 200, 0)' : thumbBorderColor, background: fotorama.autoplay ? 'rgba(100, 200, 100, .25)' : thumbBackground }); }); // API calls $start.on('click', function () { fotorama.startAutoplay(3000); }); $stop.on('click', function () { fotorama.stopAutoplay(); }); });
```

--------------------------------

### Destroy Fotorama Instance

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/speed/hide-addClass-detach.html

This example shows how to completely remove the Fotorama instance from the DOM and detach event listeners. Use this when the gallery is no longer needed.

```javascript
var fotorama = $('.fotorama').data('fotorama');
fotorama.destroy();
```

--------------------------------

### Access Fotorama Instance After Initialization

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/hash.html

This JavaScript snippet shows how to get the Fotorama instance after the DOM is ready. It's useful for programmatically controlling the gallery or accessing its methods.

```javascript
$(function () {
  f = $('.fotorama').data('fotorama');
})
```

--------------------------------

### Listen for Fotorama Show Event

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/events--autoplay.html

Attach a listener to the 'fotorama:show' event to react when a new frame is displayed. This example updates a counter to show the current frame number and total frames.

```javascript
$('#events').on('fotorama:show', function (e, fotorama) {
  $('#number').text((fotorama.activeIndex + 1) + '/' + fotorama.size);
});
```

--------------------------------

### Control Shuffle with JavaScript

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/shuffle--10ms.html

This JavaScript code initializes Fotorama, and then uses setInterval to call the shuffle method repeatedly. It also provides a button to start and stop the shuffling.

```javascript
$(function () {
    var $fotorama = $('#shuffle-fotorama'),
        fotorama = $fotorama.data('fotorama'),
        shuffleFLAG,
        shuffleInterval,
        $button = $('#shuffle'),
        $buttonText = $('.text', $button);

    $button.on('click', function () {
        shuffleFLAG = !shuffleFLAG;
        if (shuffleFLAG) {
            $buttonText.text('Stop crazy shuffle');
            shuffleInterval = setInterval(fotorama.shuffle, 10);
        } else {
            $buttonText.text('Resume crazy shuffle');
            clearInterval(shuffleInterval);
        }
    });
});
```

--------------------------------

### Custom Keyboard Arrow Controls

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/keyboard.html

This example shows how to bind custom click events to elements that act as navigation arrows. It prevents default behavior and uses the Fotorama API to navigate to a specific image index, with `altKey` enabling slow transitions.

```javascript
$(function () { $(".js-arrow").on("mousedown", function (e) { e.preventDefault(); var $this = $(this), data = $this.data(), fotorama = $(data.fotorama).data('fotorama'); fotorama && fotorama.show({index: data.show, slow: e.altKey}); }); });
```

--------------------------------

### Programmatic Initialization with Options

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Configure the gallery instance using JavaScript options and retrieve the instance for API access.

```javascript
// Initialize with JavaScript options
$('#my-gallery').fotorama({
  width: 700,
  height: 467,
  ratio: 700/467,
  maxwidth: '100%',
  nav: 'thumbs',           // 'dots', 'thumbs', or false
  navposition: 'bottom',   // 'top' or 'bottom'
  allowfullscreen: true,   // true, false, or 'native'
  transition: 'slide',     // 'slide', 'crossfade', or 'dissolve'
  transitionduration: 300,
  loop: true,
  autoplay: 5000,          // milliseconds or false
  arrows: true,
  click: true,
  swipe: true,
  keyboard: true
});

// Get the fotorama instance for API access
var fotorama = $('#my-gallery').data('fotorama');
```

--------------------------------

### Monitor Autoplay Events

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/autoplay.html

Listen for start and stop autoplay events using jQuery event binding.

```javascript
$(function () { $('.fotorama').on('fotorama:startautoplay fotorama:stopautoplay', function (e) { console.log(e.type); }); });
```

--------------------------------

### Initialize Fotorama Gallery

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Set up a gallery using HTML data attributes or by including the necessary library files.

```html
<!-- Automatic initialization with data attributes -->
<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>

<!-- Include jQuery and Fotorama -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
```

--------------------------------

### Basic Fotorama Initialization

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/many-big.html

Use a simple div with the class 'fotorama' to initialize the gallery. Ensure you have Fotorama's CSS and JS included.

```html
<div class="fotorama">


```

--------------------------------

### Initialize Basic Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/basic.html

Use this HTML structure to create a basic image gallery. Ensure the Fotorama library is included in your project.

```html
<div class="fotorama">
```

--------------------------------

### Initialize Fotorama with Thumbnails

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/thumbnails--auto.html

Apply basic styling and initialize the Fotorama instance with event listeners.

```css
* { box-sizing: border-box; } img { border-radius: 10px; }
```

```javascript
$(function () { f = $('.fotorama').on('fotorama:show', function () { console.log('SHOW'); }).fotorama().data('fotorama'); })
```

--------------------------------

### Programmatic Initialization with Options

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Create a Fotorama instance programmatically using jQuery plugin syntax and customize options via a JavaScript object.

```APIDOC
## Programmatic Initialization with Options

Create a Fotorama instance programmatically using the jQuery plugin syntax with custom options.

```javascript
// Initialize with JavaScript options
$('#my-gallery').fotorama({
  width: 700,
  height: 467,
  ratio: 700/467,
  maxwidth: '100%',
  nav: 'thumbs',           // 'dots', 'thumbs', or false
  navposition: 'bottom',   // 'top' or 'bottom'
  allowfullscreen: true,   // true, false, or 'native'
  transition: 'slide',     // 'slide', 'crossfade', or 'dissolve'
  transitionduration: 300,
  loop: true,
  autoplay: 5000,          // milliseconds or false
  arrows: true,
  click: true,
  swipe: true,
  keyboard: true
});

// Get the fotorama instance for API access
var fotorama = $('#my-gallery').data('fotorama');
```
```

--------------------------------

### Control Autoplay Functionality

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Manage the autoplay feature of Fotorama. You can start, stop, and configure autoplay with custom intervals. Autoplay can be configured to stop on user touch.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Start autoplay with default interval (5000ms)
fotorama.startAutoplay();

// Start autoplay with custom interval
fotorama.startAutoplay(3000);  // 3 seconds

// Stop autoplay
fotorama.stopAutoplay();

// Check autoplay state
if (fotorama.autoplay) {
  console.log('Autoplay is running');
}
```

```javascript
$('.fotorama').fotorama({
  autoplay: 5000,
  stopautoplayontouch: true  // Stops on user interaction
});
```

--------------------------------

### Initialize Facebook SDK

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/sites/tjournal.html

Sets up the Facebook JavaScript SDK with a specific application ID.

```javascript
window.fbAsyncInit=function(){ FB.init({ appId:'506675079378064',xfbml:true }) };(function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id)){ return }js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/ru_RU/all.js";fjs.parentNode.insertBefore(js,fjs) }(document,'script','facebook-jssdk'));
```

--------------------------------

### Get Current Active Image

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/speed/hide-addClass-detach.html

This snippet illustrates how to retrieve information about the currently active image in the Fotorama gallery. Useful for tracking user interaction or displaying captions.

```javascript
var fotorama = $('.fotorama').data('fotorama');
var active_image = fotorama.active_index;

console.log('Active image index:', active_image);
console.log('Active image data:', fotorama.data[active_image]);
```

--------------------------------

### Initialize Fotorama with Keyboard Support

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/keyboard--2.html

Use the data-keyboard attribute to enable keyboard navigation for the slider.

```html
<div class="fotorama"
     data-keyboard="true">
```

--------------------------------

### show() Method

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Navigate to a specific frame by index or using special navigation strings like '>', '<', '>>', '<<'. Supports options for transition duration and speed.

```APIDOC
## show() Method

Navigate to a specific frame by index or using special navigation strings.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Show by index (0-based)
fotorama.show(0);  // First frame
fotorama.show(2);  // Third frame

// Show using navigation strings
fotorama.show('>');   // Next frame
fotorama.show('<');   // Previous frame
fotorama.show('>>');  // Last frame
fotorama.show('<<');  // First frame

// Show with options
fotorama.show({
  index: 3,
  time: 500,       // Transition duration in ms
  slow: false,     // Set true for slow motion (10x)
  user: true       // Indicates user-initiated navigation
});

// Navigate by frame ID (when using hash option)
fotorama.show('photo-sunset');
```
```

--------------------------------

### Initialize and Control Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/start-index.html

Initializes the Fotorama gallery and demonstrates how to access the instance to trigger a slide change.

```javascript
$(function () { //f = $('.fotorama').data('fotorama'); $('.fotorama') .fotorama() .data('fotorama') .show({index: 2, time: 0}) })
```

--------------------------------

### Hacking Fotorama Dots with CSS

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/full-window-n-nav.html

Customize the appearance of Fotorama navigation dots using CSS. This example hides the default navigation bar and overlays it with custom-styled dots.

```css
.fotorama__nav { /* Lie that the height is equal to zero */ height: 0; /* And return it using a “back door” */ padding-top: 30px; /* Overlay the stage */ margin-top: -30px; }
.fotorama__nav__shaft { top: -30px; }
/* White dots */
.fotorama__dot { border-color: #fff; }
.fotorama__active .fotorama__dot { background-color: #fff; }

```

--------------------------------

### Basic jQuery DOM Manipulation

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/speed/hide-addClass-detach.html

This snippet demonstrates basic jQuery usage for DOM manipulation, including appending elements and removing them. It's a foundational example for understanding jQuery.

```javascript
$(function () {
  var $body = $('body');
  S.times(10, function () {
    $body.append('<div>' + Math.random() +'</div>');
  });
});
```

```javascript
S.test.after = function() {
  $('div').remove();
};
```

--------------------------------

### Configuring Global Defaults

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Define window.fotoramaDefaults before initialization to apply consistent settings across all gallery instances on the page.

```javascript
// Set global defaults before any fotorama initialization
window.fotoramaDefaults = {
  width: '100%',
  maxwidth: 1000,
  ratio: 16/9,
  nav: 'thumbs',
  thumbwidth: 80,
  thumbheight: 60,
  allowfullscreen: true,
  transition: 'crossfade',
  transitionduration: 400,
  loop: true,
  arrows: true,
  shadows: true
};

// All fotoramas will use these defaults unless overridden
$('.gallery-1').fotorama();  // Uses defaults
$('.gallery-2').fotorama({ nav: 'dots' });  // Overrides nav only
```

--------------------------------

### Styling Custom HTML Elements in Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/html-100.html

Apply CSS rules to style custom HTML elements within Fotorama. This example styles elements with the class '.any' for a unique appearance.

```css
.fotorama .any { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); font-family: Georgia, serif; font-size: 72px; text-align: center; height: 181px; padding-top: 100px; }
```

--------------------------------

### Initialize Fotorama and Handle Events

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/thumbnails--only.html

Initializes Fotorama with 'lenta' layout and custom event handling for showing images. It also includes logic for toggling fullscreen and touch interactions.

```javascript
$(function () {
  f = $('.fotorama').data('fotorama');
})
```

```javascript
(function () {
  var _preventDeault = function (e) {
    e.stopPropagation();
    e.preventDefault();
  },
  touchClick = function ($el, fn) {
    var el = $el[0];
    if (el && el.addEventListener) {
      el.addEventListener('touchstart', fn, false);
      el.addEventListener('MSPointerDown', fn, false);
    }
    return $el.on('mousedown', fn);
  },
  preventDefault = function ($el) {
    return touchClick($el, _preventDeault);
  };
  var now;
  $(document).on('fotorama:show', '.fotorama--lenta', function (e, fotorama, extra) {
    var $fotorama = $(this);
    if (extra.user && !fotorama._isOpen) {
      fotorama._isOpen = true;
      fotorama.setOptions({
        trackpad: false,
        nav: 'dots',
        transitionduration: 333
      });
      $fotorama.css({height: fotorama.options.height}).addClass('fotorama--dots-overlay');
      if (!fotorama._isTouched) {
        fotorama._isTouched = true;
        var $close = $('<div class="fotorama__fullscreen-icon"></div>');
        $('.fotorama__stage', $fotorama).append(
          preventDefault(touchClick($close, function () {
            if (fotorama._isOpen) {
              fotorama._isOpen = false;
              fotorama.setOptions({
                nav: 'thumbs',
                trackpad: true
              });
              $fotorama.css({height: fotorama.options.thumbheight}).removeClass('fotorama--dots-overlay');
            }
          }))
        );
        preventDefault($fotorama);
      }
    }
  });
})();
```

--------------------------------

### Initialize Fotorama and track load time

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/video.html

Initializes multiple Fotorama instances and measures the load time of the second instance using console timers.

```javascript
$(function () { console.time('load'); f1 = $('.fotorama').eq(0).data('fotorama'); f2 = $('.fotorama').eq(1).on('fotorama:load', function () { console.timeEnd('load'); }).data('fotorama'); });
```

--------------------------------

### Initialize Fotorama with List Adapter

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/ul.html

Initializes Fotorama on a 'ul.fotorama' element after applying the `fotoramaListApapter` to process its list items. Ensure Fotorama library is included before this script.

```javascript
$(function () {
  $('ul.fotorama')
    .fotoramaListApapter()
    .fotorama();
});
```

--------------------------------

### Configure Fotorama Data Fit

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/cover.html

Initializes a Fotorama gallery with the cover fit property applied.

```html
<div class="fotorama">
         data-fit="cover">
```

--------------------------------

### Initialize Fotorama with event logging

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/events.html

Initializes the plugin and binds an event handler that logs event details and updates the frame counter.

```javascript
$(function () { $('#events') .on('fotorama:show', function (e, fotorama, direct) { console.log(e.type, fotorama.activeFrame, direct); $('#number').text((fotorama.activeIndex + 1) + '/' + fotorama.size); }) .fotorama() // .hover(function () { // $('#events').data('fotorama').startAutoplay(500); // }, function () { // $('#events').data('fotorama').stopAutoplay(); // }); });
```

--------------------------------

### Initialize Fotorama with Dissolve Transition

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/dissolve--plain.html

Use this JavaScript code to initialize Fotorama and set the dissolve transition. Ensure the Fotorama library is loaded before this script.

```javascript
$(window).on('load', function () { f = $('.fotorama').data('fotorama'); });
```

--------------------------------

### Initialize Fotorama with jQuery

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/initialization.html

Initializes the Fotorama plugin on elements with the 'fotorama' class and logs the instance data.

```javascript
$(function () { var $fotorama = $('.fotorama').show().clone().css({position: 'absolute'}).appendTo('body').fotorama(); console.log($fotorama, $fotorama.width()); var fotorama = $fotorama.data('fotorama'); console.log(fotorama.data); })
```

--------------------------------

### Initialize Fotorama and Handle History

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/history.html

This code initializes Fotorama, synchronizes the active frame with the URL hash, and listens for 'fotorama:show' events to update the history. It also sets the initial Fotorama frame based on the URL hash. Ensure Fotorama library is included.

```javascript
$(function () {
  var f = $('.fotorama').data('fotorama');
});

$(function () {
  window.onpopstate = function (e) {
    var hash = location.hash.replace(/^#/, '');
    if (fotorama && hash) {
      fotorama.show(hash);
    }
  };

  var fotorama = $('.fotorama')
    .on('fotorama:show', function (e, fotorama) {
      var hash = fotorama.activeFrame.id || fotorama.activeIndex;
      console.log('fotorama:show', hash);
      if (window.history && location.hash.replace(/^#/, '') != hash) {
        history.pushState(null, null, '#' + hash);
      }
    })
    .fotorama({
      startindex: location.hash.replace(/^#/, '')
    })
    .data('fotorama');
});
```

--------------------------------

### Keyboard Navigation Configuration

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Configure keyboard shortcuts for gallery navigation via data attributes or JavaScript initialization.

```APIDOC
## Keyboard Navigation Configuration

### Description
Configure extended keyboard navigation options for the gallery.

### Parameters
#### Request Body
- **keyboard** (object) - Configuration object for keys: left, right, up, down, space, home, end.
```

--------------------------------

### Initialize Fotorama with Thumbnails

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/thumbnails.html

Use the 'thumbs' option to enable thumbnail navigation. Ensure the 'fotorama' div has the 'data-nav="thumbs"' attribute.

```html
<div class="fotorama"
     data-nav="thumbs">
</div>
```

--------------------------------

### Initialize Fotorama and Navigate

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/_show12.html

This JavaScript code initializes Fotorama on an element with the class 'fotorama' and sets up click event listeners for elements with the class 'js-fotorama' to navigate through the gallery. Ensure Fotorama is loaded and the HTML structure is in place before executing this script.

```javascript
$(function () { var fotorama = $('.fotorama').data('fotorama'); $('.js-fotorama').on('click', function (e) { e.preventDefault(); fotorama.show($(this).attr('href').replace(/^#/, '')); }); });
```

--------------------------------

### Initialize Fotorama and Access API

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/auto-false.html

Initializes Fotorama on a '.fotorama' element and makes its API available. Ensure the DOM is ready before initialization.

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; $(function () { f = $('.fotorama').data('fotorama'); })
```

--------------------------------

### Initialize Fotorama and Event Listener

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/clicktransition.html

Initializes the Fotorama gallery and attaches a listener for the show event. Requires jQuery and the Fotorama plugin to be loaded.

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; $(function () { f = $('.fotorama') .on('fotorama:show', function (event, fotorama, extra) { console.log('***' + event.type.toUpperCase() + '***'); }) .data('fotorama'); })
```

--------------------------------

### Initialize Fotorama and Custom Controls

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/additional-nav-bar.html

Initializes the Fotorama gallery and appends custom controls after the navigation element.

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; $(function () { var $fotorama = $('.fotorama').fotorama(); $fotorama.each(function () { $('.fotorama__nav', this).after($(this).next('.fotorama-control').show()); }); })
```

--------------------------------

### Initialize Fotorama with jQuery

Source: https://github.com/artpolikarpov/fotorama/blob/master/index.html

Initializes the gallery and sets the active index to 2 immediately upon the ready event.

```javascript
$(function () { $('.fotorama') .on('fotorama:ready', function (e, fotorama) { fotorama.show({index: 2, time: 0}); }) .fotorama(); })
```

--------------------------------

### Initialize Fotorama and Show Photo

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/issue--14.html

Initializes Fotorama on a '.slideshow' element and then programmatically shows the photo at index 3. Ensure the Fotorama JavaScript and CSS are included.

```javascript
$(function () {
  $fotorama = $('.slideshow');
  $fotorama.fotorama();
  fotorama = $fotorama.data('fotorama');
  fotorama.show(3); // $('.slideshow')
  // .on('fotorama:ready', function (e, fotorama) {
  // fotorama.show({index: 3, time: 0});
  // })
  // .fotorama();
});
```

--------------------------------

### Initialize Fotorama and Track Mouse Movement

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/issue--144.html

Initializes Fotorama on an element with the class 'fotorama' and logs mousemove events to the console. Includes fallback for console methods if they are not available.

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; $(function () { f = $(".fotorama").data("fotorama"); var mouseMoveCount = 1; $(document).on("mousemove", function (e) { console.log(e.type + " " + (mouseMoveCount++)); }); })
```

--------------------------------

### Initialize and Load Fotorama Gallery

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/initialization--2.html

Initializes a Fotorama instance on a dynamically created div and loads an image array. Ensure jQuery is loaded before executing this script.

```javascript
$(function () { $gallery = $('<div id="gal"></div>').appendTo("body"); //$gallery = $('#gal'); console.log("gallery is in the document: ", $("#gal").length); $gallery.fotorama(); console.log("gallery is missed: ", $("#gal").length); var fotorama = $gallery.data("fotorama"); console.log("fotorama instance is initialized: ", fotorama); $gallery.appendTo("body"); console.log("add gallery to the document: ", $("#gal").length); fotorama.load([{img: "http://img3-fotki.yandex.net/get/9509/26024940.4b/0_STATIC8372b_d93f13a1_L.jpg"}]); console.log("gallery is still missed: ", $("#gal").length); });
```

--------------------------------

### Basic Fotorama HTML Structure

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/no-css.html

Use this HTML structure to initialize Fotorama. Ensure the 'fotorama' class is applied to the container div. Image sources are specified using '[]()' syntax.

```html
<div class="fotorama">

[](i/okonechnikov/1-lo.jpg)[](i/okonechnikov/2-lo.jpg)

Photos [by Andrey Okonetchnikov](http://okonet.ru/)
```

--------------------------------

### Basic Initialization

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Initialize Fotorama automatically by adding the .fotorama class to a div containing images, or include jQuery and Fotorama scripts.

```APIDOC
## Basic Initialization

Initialize Fotorama with the `.fotorama` class for automatic setup or programmatically via jQuery.

```html
<!-- Automatic initialization with data attributes -->
<div class="fotorama"
     data-width="700"
     data-ratio="3/2"
     data-max-width="100%">
  <img src="photo1.jpg">
  <img src="photo2.jpg">
  <img src="photo3.jpg">
</div>

<!-- Include jQuery and Fotorama -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<link href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
```
```

--------------------------------

### Initialize Fotorama with Options

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/__base.html

Use this code to initialize Fotorama on an element with specified options like dimensions, fullscreen, and navigation type. Ensure the jQuery library and Fotorama plugin are included.

```javascript
$(function () { $('.fotorama').fotorama({ width: 700, maxwidth: '100%', ratio: 16/9, allowfullscreen: true, nav: 'thumbs' }); });
```

--------------------------------

### Initialize and load images in Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/load-data.html

Initializes the Fotorama plugin on elements with the 'fotorama' class and loads an array of image objects into the gallery.

```javascript
$(function () { f = $('.fotorama').fotorama().data('fotorama'); f.load([ {img: 'i/okonechnikov/1-lo.jpg'}, {img: 'i/okonechnikov/2-lo.jpg'}, {img: 'i/okonechnikov/3-lo.jpg'} ]) })
```

--------------------------------

### setOptions() Method

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Dynamically change Fotorama options after initialization, allowing for real-time configuration updates.

```APIDOC
## setOptions() Method

Change Fotorama options dynamically after initialization.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Change single option
fotorama.setOptions({ loop: true });

// Change multiple options at once
fotorama.setOptions({
  transition: 'crossfade',
  transitionduration: 500,
  autoplay: 3000,
  nav: 'dots',
  arrows: 'always',
  captions: false
});

// Disable navigation
fotorama.setOptions({
  arrows: false,
  click: false,
  swipe: false
});
```
```

--------------------------------

### CSS and JavaScript Initialization for Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/position.html

Defines basic styling for the container and initializes the Fotorama plugin with default settings.

```css
td { vertical-align: top; } .background { width: 300px; height: 300px; background-image: url(i/okonechnikov/1-lo.jpg); background-repeat: no-repeat; border: 1px solid; } .fotorama { border: 1px solid; }
```

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; fotoramaDefaults = { width: 300, height: 300, nav: 'thumbs', arrows: false, fit: false, data: [ {img: 'i/okonechnikov/1-lo.jpg'} ] }; $(function () { f = $('.fotorama').data('fotorama'); })
```

--------------------------------

### Lightbox JavaScript Logic

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/lightbox-2.html

JavaScript implementation for initializing the lightbox, handling clicks, and managing keyboard navigation.

```javascript
$(function () { var $document = $(document), $window = $(window), $body = $('body'); var placeFotorama = function ($fotorama, time) { if ($fotorama.data('open')) { $fotorama .stop() .css({marginTop: -30, left: $body.width() / 2 - $fotorama.width() / 2, top: $window.scrollTop() + $window.height() / 2 - $fotorama.height() / 2 - 20}) .animate({marginTop: 0, opacity: 1}, time || 0); } else { $fotorama.css({left: -99999, top: -99999}); } }; // take all .fotorama blocks $('.thumbs').each(function () { var $thumbs = $(this), // clone it and make fotorama $fotorama = $('.fotorama', $thumbs) .clone() .addClass('fotorama-lightbox') .appendTo('body') .fadeTo(0, 0) .fotorama(), fotorama = $fotorama.data('fotorama'); placeFotorama($fotorama); for (var _i = 0, _l = fotorama.data.length; _i < _l; _i++) { // prepare id to use in fotorama.show() fotorama.data[_i].id = fotorama.data[_i].img; } // bind clicks $fotorama.on('click', function (e) { e.stopPropagation(); }); $thumbs.on('click', 'a', function (e) { e.preventDefault(); e.stopPropagation(); var $this = $(this), _$fotorama = $body.data('$fotorama'); fotorama // show needed frame .show({index: $this.attr('href'), time: _$fotorama ? 300 : 0, slow: e.altKey}); if (_$fotorama) return; $body .addClass('overflow-hidden') .data('$fotorama', $fotorama); $fotorama.css({left: $this.offset().left, top: $this.offset().top}); placeFotorama($fotorama.data('open', true), 300); }); $window.on('resize', function () { placeFotorama($fotorama); }); var closeFotorama = function () { var $fotorama = $body.data('$fotorama'); if (!$fotorama) return; $body .removeClass('overflow-hidden') .data('$fotorama', null); $fotorama .stop() .animate({marginTop: 30, opacity: 0}, 300, function () { placeFotorama($fotorama.data('open', false)); }); }; $document .on('click', closeFotorama) .on('keydown', function (e) { var $fotorama = $body.data('$fotorama'); if (!$fotorama) return; var fotorama = $fotorama.data('fotorama'); if (e.keyCode === 27) { e.preventDefault(); closeFotorama(); } else if (e.keyCode === 39) { fotorama.show({index: '>', slow: e.altKey, direct: true}); } else if (e.keyCode === 37) { e.preventDefault(); fotorama.show({index: '<', slow: e.altKey, direct: true}); } }); $fotorama.on('fotorama:fullscreenenter', function (e, fotorama) { fotorama.cancelFullScreen(); closeFotorama(); }); }); });
```

--------------------------------

### Initialize Fotorama and Handle Show Event

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/events--autoplay.html

Initializes Fotorama on a selected element and attaches a 'fotorama:show' event listener. The listener logs event details to the console and updates a frame counter. Use this for comprehensive event handling and initialization.

```javascript
$(function () {
  f = $('#events')
    .on('fotorama:show', function (e, fotorama, direct) {
      console.log(e.type, fotorama.activeFrame, direct);
      $('#number').text((fotorama.activeIndex + 1) + '/' + fotorama.size);
    })
    .fotorama()
    .data('fotorama');
});
```

--------------------------------

### Initialize Twitter Widgets

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/sites/tjournal.html

Asynchronously loads the Twitter widgets JavaScript library.

```javascript
!function(d,s,id){ var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){ js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs); } }(document,"script","twitter-wjs");
```

--------------------------------

### Initialize and handle Fotorama events

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/issue--26.html

Initializes the Fotorama gallery and attaches a listener to the showend event to process images once they are loaded or if an error occurs.

```javascript
$(function () { //f = $('.fotorama').data('fotorama'); function catchImage ($frame) { var $img = $('.fotorama__img', $frame); // do something smart } $('.fotorama') .on('fotorama:showend', function (e, fotorama) { var $frame = fotorama.activeFrame.$stageFrame; if (!$frame.data('state')) { $frame.on('f:load f:error', function () { catchImage($frame); }); } else { catchImage($frame); } }) .fotorama(); });
```

--------------------------------

### Initialize Fotorama with Loop

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/loop--1.html

Enables infinite looping of images by setting the data-loop attribute to true in the HTML markup.

```html
<div class="fotorama"
     data-loop="true">
```

--------------------------------

### Initialize Fotorama Data

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/iframe.html

Initializes the Fotorama instance and provides console fallbacks for debugging.

```javascript
console = window.console || {}; console.time = console.time || $.noop; console.timeEnd = console.timeEnd || $.noop; $(function () { f = $('.fotorama').data('fotorama'); }) // $(document).on('mousemove', function () { // console.log('mousemove'); // }); // // $(document).on('mouseleave', function (e) { // console.log('mouseleave', e.target); // }); // // $('iframe').on('mousemove', function () { // console.log('iframe mousemove'); // })
```

--------------------------------

### Initialize Google Analytics and LiveInternet Counter

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/sites/tjournal.html

Configures Google Analytics tracking and injects a LiveInternet counter pixel into the document.

```javascript
var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-39367429-1']);_gaq.push(['_trackPageview']);(function(){ var ga=document.createElement('script');ga.type='text/javascript';ga.async=true;ga.src=('https:'==document.location.protocol?'https://ssl':'http://www')+'.google-analytics.com/ga.js';var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(ga,s)})(); document.write("<a href='http://www.liveinternet.ru/click' target=_blank><img src='//counter.yadro.ru/hit?t44.6;r" + escape(document.referrer) + ((typeof(screen)=="undefined")?"";":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth)) + ";u" + escape(document.URL) +";h"+escape(document.title.substring(0,80)) + ";" + Math.random() + "' border=0 width=1 height=1 alt='' title='LiveInternet'><\/a>")
```

--------------------------------

### Update Fotorama Options

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/speed/hide-addClass-detach.html

Shows how to update Fotorama's options after initialization. This is useful for dynamically changing gallery behavior, like enabling/disabling fullscreen.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Update an option, e.g., disable fullscreen
fotorama.setOptions({
  allowfullscreen: false
});
```

--------------------------------

### Initialize and load photos into Fotorama

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/json.html

Use this snippet to initialize a Fotorama gallery on a DOM element and dynamically load a set of images.

```javascript
$(function () { var photos = [ {img: 'i/okonechnikov/1-lo.jpg'}, {img: 'i/okonechnikov/2-lo.jpg'}, {img: 'i/okonechnikov/9-lo.jpg'}, {img: 'i/okonechnikov/6-lo.jpg'}, {img: 'i/okonechnikov/5-lo.jpg'} ]; var fotorama = $('#gallery').fotorama().data('fotorama'); fotorama.load(photos); });
```

--------------------------------

### Configure via Data Attributes

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Define all gallery settings directly within the HTML markup using data attributes.

```html
<div class="fotorama"
     data-width="100%"
     data-ratio="16/9"
     data-max-width="1000"
     data-min-width="400"
     data-nav="thumbs"
     data-navposition="bottom"
     data-navwidth="500"
     data-thumbwidth="100"
     data-thumbheight="75"
     data-thumbmargin="4"
     data-allowfullscreen="native"
     data-transition="crossfade"
     data-transitionduration="500"
     data-loop="true"
     data-autoplay="3000"
     data-stopautoplayontouch="true"
     data-keyboard="true"
     data-arrows="always"
     data-click="true"
     data-swipe="true"
     data-captions="true"
     data-hash="true"
     data-startindex="0"
     data-direction="ltr"
     data-shadows="true"
     data-fit="contain">
  <img src="1.jpg" data-caption="First image">
  <img src="2.jpg" data-caption="Second image">
</div>
```

--------------------------------

### Initialize Fotorama with Custom HTML

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/html-100.html

Use this JavaScript snippet to initialize Fotorama. Ensure your custom HTML is correctly structured within the Fotorama container.

```javascript
$(function () { });
```

--------------------------------

### Full Window Fotorama Configuration

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/full-window.html

Set data-width and data-height to 100% to make the Fotorama gallery fill the entire window. Ensure the parent container also allows for full-width and height.

```html
<div class="fotorama"
     data-width="100%"
     data-height="100%">

[](i/okonechnikov/5.jpg)[](i/okonechnikov/3.jpg)[](i/okonechnikov/10.jpg)[](i/okonechnikov/14.jpg)[](i/okonechnikov/9.jpg)

Photos [by Andrey Okonetchnikov](http://okonet.ru/)
```

--------------------------------

### Basic CSS for Thumbnails

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/thumbnails-2.html

Apply basic CSS to style the thumbnails, ensuring they have a border-radius.

```css
* { box-sizing: border-box; }
img { border-radius: 10px; }
```

--------------------------------

### Configure Fullscreen via JavaScript Events

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/fullscreen--44.html

Use the fotorama:fullscreenenter and fotorama:fullscreenexit events to toggle fit settings when the gallery enters or leaves fullscreen mode.

```javascript
img { max-width: 100px; } //<![CDATA[ $(function(){ f = $('.fotorama') .on('fotorama:fullscreenenter fotorama:fullscreenexit', function (e, fotorama) { if (e.type === 'fotorama:fullscreenenter') { // Настройки для полного экрана fotorama.setOptions({ fit: 'cover' }); } else { // Возврат к обычным настройкам fotorama.setOptions({ fit: 'contain' }); } }).fotorama().data('fotorama'); });//]]>
```

--------------------------------

### resize() Method

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Programmatically resize the Fotorama gallery with new dimensions or ratios. Can also be triggered on window resize.

```APIDOC
## resize() Method

Programmatically resize the Fotorama gallery with new dimensions.

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Resize with new dimensions
fotorama.resize({
  width: 800,
  height: 600
});

// Resize with ratio
fotorama.resize({
  width: '100%',
  ratio: 16/9,
  minwidth: 400,
  maxwidth: 1200,
  minheight: 300,
  maxheight: 800
});

// Resize responds to window changes automatically
$(window).on('resize', function() {
  fotorama.resize();
});
```
```

--------------------------------

### Initialize Fotorama with Shuffle and No Navigation

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/mousefish.html

Use this JavaScript snippet to initialize Fotorama with shuffle, no navigation, looping enabled, and no arrows. Ensure jQuery and Fotorama are loaded before this script.

```javascript
$(function () { $('.mousefish').fotorama({shuffle: true, nav: false, loop: true, arrows: false}); });
```

--------------------------------

### Fullscreen Methods

Source: https://context7.com/artpolikarpov/fotorama/llms.txt

Control fullscreen mode programmatically using request, cancel, and toggle methods.

```APIDOC
## Fullscreen Methods

Control fullscreen mode programmatically with request, cancel, and toggle methods.

### Methods

- `requestFullScreen()`: Enters fullscreen mode.
- `cancelFullScreen()`: Exits fullscreen mode.
- `toggleFullScreen()`: Toggles fullscreen mode.
- `fullScreen` (property): Returns a boolean indicating if the gallery is currently in fullscreen mode.

### Configuration

- `allowfullscreen` (option): Set to `'native'` to enable native browser fullscreen API.

### Example

```javascript
var fotorama = $('.fotorama').data('fotorama');

// Enter fullscreen mode
fotorama.requestFullScreen();

// Exit fullscreen mode
fotorama.cancelFullScreen();

// Toggle fullscreen mode
fotorama.toggleFullScreen();

// Check fullscreen state
if (fotorama.fullScreen) {
  console.log('Currently in fullscreen');
}

// Native fullscreen setup
$('.fotorama').fotorama({
  allowfullscreen: 'native'
});
```
```

--------------------------------

### Initialize Fotorama with Thumbnails

Source: https://github.com/artpolikarpov/fotorama/blob/master/test/thumbnails-2.html

Use the 'data-nav="thumbs"' attribute to enable thumbnail navigation. This JavaScript snippet initializes the Fotorama instance.

```html
<div class="fotorama"
     data-nav="thumbs">

[![](i/nyc/thumbs/guy-in-car.jpg)](i/nyc/guy-in-car.jpg) [![](i/nyc/thumbs/acapella.jpg)](i/nyc/acapella.jpg) [![](i/nyc/thumbs/crazyjohn.jpg)](i/nyc/crazyjohn.jpg) [![](i/nyc/thumbs/dudeintheground.jpg)](i/nyc/dudeintheground.jpg) [![](i/nyc/thumbs/dudes.jpg)](i/nyc/dudes.jpg) [![](i/nyc/thumbs/explanation.jpg)](i/nyc/explanation.jpg) [![](i/nyc/thumbs/eyes.jpg)](i/nyc/eyes.jpg) [![](i/nyc/thumbs/facing-wind.jpg)](i/nyc/facing-wind.jpg) [![](i/nyc/thumbs/father-son-looking.jpg)](i/nyc/father-son-looking.jpg) [![](i/nyc/thumbs/flipoff.jpg)](i/nyc/flipoff.jpg) [![](i/nyc/thumbs/freakout.jpg)](i/nyc/freakout.jpg) [![](i/nyc/thumbs/guy-in-park.jpg)](i/nyc/guy-in-park.jpg) [![](i/nyc/thumbs/homeless-sleeping.jpg)](i/nyc/homeless-sleeping.jpg) [![](i/nyc/thumbs/italianguy.jpg)](i/nyc/italianguy.jpg) [![](i/nyc/thumbs/KIOSK.jpg)](i/nyc/KIOSK.jpg) [![](i/nyc/thumbs/ladies-riding.jpg)](i/nyc/ladies-riding.jpg) [![](i/nyc/thumbs/lift-dude.jpg)](i/nyc/lift-dude.jpg) [![](i/nyc/thumbs/severedhead-lo.jpg)](i/nyc/severedhead-lo.jpg) [![](i/nyc/thumbs/smoking.jpg)](i/nyc/smoking.jpg) [![](i/nyc/thumbs/streetlook.jpg)](i/nyc/streetlook.jpg) [![](i/nyc/thumbs/two-umbrellas.jpg)](i/nyc/two-umbrellas.jpg) [![](i/nyc/thumbs/woman-reading.jpg)](i/nyc/woman-reading.jpg)
</div>
```

```javascript
$(function () {
  f = $('.fotorama').data('fotorama');
})
```