feh1ks
5/19/2016 - 9:30 AM

Fotorama

Fotorama

##Fotorama setup

###1. Install

bower install fotorama

###2. Usage

#####2.1 CONNECT CSS & JS TO HTML

<link  href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>

#####2.2 HTML

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

#####2.3 Options

$('.fotorama').fotorama({
  width: 700,
  maxwidth: '100%',
  height: 200,
  maxheight: 400,
  ratio: 16/9,
  allowfullscreen: true,
  nav: 'thumbs' or 'dots' or false,
  navposition: 'top' or 'bottom',
  thumbwidth: 120,
  thumbheight: 60,
  loop: true or false,
  allowfullscreen: true or false or 'native',
  fit: 'contain' or 'cover' or 'scaledown' or 'none', // How to fit an image into a fotorama
  transition: 'slide' or 'crossfade' or 'dissolve',
  arrows: true or false or 'always', // Turns on navigation arrows over the frames
  click: true or false, // Moving between frames by clicking
  swipe: true or false // Moving between frames by swiping
});