Stack Overflow
Stack Overflow

Questions tagged [fotorama]

Fotorama is a jQuery plugin which provides a simple, stunning and powerful photo gallery

Fotorama is a jQuery gallery.

Set up

<!-- 1. Link to jQuery (1.8.0 or later), -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <!-- 91 KB -->

<!-- fotorama.css & fotorama.js. -->
<link  href="http://fotorama.s3.amazonaws.com/4.2.1/fotorama.css" rel="stylesheet"> <!-- 14 KB -->
<script src="http://fotorama.s3.amazonaws.com/4.2.1/fotorama.js"></script> <!-- 28 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama">
  <img src="1.jpg">
  <img src="2.jpg">
  <img src="3.jpg">
</div>

<!-- 3. Enjoy! -->

Basic example

Customize

Plug in

Fotorama for Wordpress

Fotorama for Ruby on Rails

Fork

http://github.com/artpolikarpov/fotorama

171 questions
12
votes
7 answers

Magento 2 - Fotorama

I have a problem with the ProductSlider on the Productdetail Page. I dont know how to set the Container width & heights. I found some configuration for the Fotorama Plugin but there is nothing about width and height. My Productimages have another…
user5138425
  • 121
  • 1
  • 1
  • 5
6
votes
1 answer

How to set fotorama thumbnail as vertical

I am using magento 2 porto theme. In product details page i need to set the thumbnail of fotorama slider to left as vertical. Is it possible?? Please help
Akhaya Satapathy
  • 124
  • 1
  • 2
  • 8
6
votes
2 answers

Magento2 gallery afterLoad callback

I need to move the product gallery navigation thumbnails on horizontal position if the screen is less than 768px wide. For this I need to hook up on a callback that is triggered after the gallery is completely loaded. How to do this when the…
Serbu Florin-Adrian
  • 511
  • 5
  • 14
4
votes
1 answer

Center fotorama slider on a webpage

I'm using the beautiful and excellent Fotorama slider, but I have a question! By default, the slider is on the top on the left! I just want it center on the page. I find in the .css, but i don't find the answer. Can u help me?
Antoine
  • 41
  • 1
  • 3
3
votes
1 answer

Can I add custom button for fotorama full screen mode

Im using fotorama as a image gallery, So I want to add custom button for images or video when its on full screen. Is there any way to add custom buttons (eg. for share, like ...) or toolbar when fotorama image in full screen mode. Custom fotorama…
Prasad Gayan
  • 1,424
  • 17
  • 26
3
votes
1 answer

Fotorama show thumbnail with one image

How to always show thumbnails in fotorama? Got a gallery with only one image and I want to show the thumbnail too and they are only shown when there are two pics or more.
Estirpicidades
  • 153
  • 11
3
votes
1 answer

Fotorama Slider: How can I get the slider to pause on mouse over the resume auto play when mouse out?

Fotorama Slider: The slider is set to Autoplay="true" and it works great. How can I get the slider to pause on mouse over then resume auto play when mouse out? Here is my code:
Greg Robertson
  • 99
  • 1
  • 1
  • 9
3
votes
0 answers

Strange Fotorama behavior in Samsung Android default browser

I created a page using Fotorama 4. The code is as below:
Raptor
  • 53,206
  • 45
  • 230
  • 366
3
votes
3 answers

Fotorama slider - how to Lazy Load images and then unload them when not visible?

I'm using fotorama.io on my site and I have a large gallery of images in the slider (60-80) so I followed the suggestion in the manual to use Lazy Load to not load all my images at once. But when I browse images and already reached 40+ images, my…
Seb
  • 113
  • 1
  • 4
  • 12
2
votes
1 answer

Fotorama: How to cancel fullscreen by click outside of image?

I would like to cancel Fotorama'a fullscreen by click outside of the images. Fotorama only allows to exit fullscreen clicking on the fotorama__fullscreen-icon button.
Pbinder
  • 452
  • 1
  • 6
  • 24
2
votes
2 answers

How to open fotorama fullscreen mode by click on main image?

I'm using fotorama js plugin for product gallery. How to turn on fullscreen mode when clicking on main image (not thumbnails)? I want to allow user to open fullscreen mode by click on image instead fullscreen icon on right top corner. This answer…
bozydarlelutko
  • 511
  • 7
  • 21
2
votes
1 answer

fotorama how to work with ajax

I got two problems by using ajax in fotorama i) before ajax, my code is:
after ajax, my code is:
gamer
  • 23
  • 4
2
votes
1 answer

Using Fotorama api for custom thumbnails and captions

I am building a site using the Fotorama (www.fotorama.io) Jquery plugin. I have been using this code to generate custom thumbnails (jsfiddle): $('.thumbs').each(function () { $('a', this).each(function () { var $a = $(this); // set ids,…
Haniel
  • 31
  • 3
2
votes
0 answers

Fotorama container doesn't get its initial width after fullscreen

on some actual project I use Fotorama a couple of times. I got it working perfectly on some part of the website (allowing fullscreen also). Anyway, there is another template I need the slider into and there it has an odd behaviour that I can't fix…
Extratoe
  • 21
  • 2
2
votes
0 answers

Layout (Position of Thumbnails)

I would like to use Fotorama with Thumbnails on my webpage. Is was looking at the coding but as it is rather complex I couldn't find what I need. I would like to have the thumbnails in a separate div container and the pictures in another div…
user4132177
1
2 3
…
11 12