Questions tagged [fotorama]

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

Filter by
Sorted by
Tagged with
0 votes
1 answer
88 views

Insert an array of images in another array

I have been trying to dynamically insert an array of images and thumbnails into the js gallery but have been having trouble loading data via javascript. I have an array of images and thumbnails that I ...
kelsheikh's user avatar
  • 1,288
0 votes
1 answer
314 views

Is it possible that in Fotorama arrows can change?

I need to change arrows slider of Fotorama library. Is that possible? I read documentation, but can not find anything. My codes <div id="fotorama" class="fotorama" data-width=...
Rahil Ali's user avatar
  • 276
0 votes
1 answer
509 views

Get event of fotorama video play button being clicked

I want to obtain the event during which this video player button is clicked I want to observe when and how many the amount of it being clicked I try to use the below code require(['jquery'], function(...
Mohd Farhan Bin Ramli's user avatar
1 vote
1 answer
384 views

Magento 2 - How to replace webP image in Fotorama JS

I am trying to add picture tag to give control to browser to display either webP image or actual image based on the supported version. Can you please help how to add it in fortorma.js Thankyou
Shanmugam's user avatar
0 votes
2 answers
673 views

How to Resize fotoroma library popup when clicking on product image on product view page in Magento 2?

I want to set custom height and width of fotorama fullscreen image popup/lightbox. How to do that....please help.
Vishal Thakur's user avatar
0 votes
2 answers
726 views

How to add external image in magento2 pdp

How can we add an external image for magento2 product detail page(not from the magento2 backend). I tried some stuff in the galley.phtml but not succeed. Is there anybody who can fix this, help me ...
Ajith's user avatar
  • 55
1 vote
0 answers
629 views

Magento 2 Fotorama swipe with mouse open fullscreen mode

I've an issue with fotorama slider Sliding fotorama slider with my mouse When I mouse up for drag again the next pict => fullscreen mode is throwed Preconditions Checked on Magento 2.4 but this ...
n44s's user avatar
  • 463
-1 votes
1 answer
48 views

Accessing a Declared Variable

Good time. How do I access a declared variable? I declare like this: $ (document) .ready (function () { var fotorama = $fotoramaDiv.data ('fotorama'); $ (document) .on ('click', '.btn-del-model',...
Omega-44's user avatar
0 votes
0 answers
144 views

fotorama gallery not working inside Swiper slider

I have a slider set up with Swiper. The slides contain HTML and a photo gallery slider that is created with fotorama. The problem that I am having is that there seems to be some conflict between ...
AidanCurran's user avatar
  • 2,460
1 vote
2 answers
696 views

Fotorama jQuery Image Gallery Not loading to full size

I have embedded a jQuery Image Gallery with Fotorama on the below page. When it loads on a new browser the first time the image will load 96x64 pixels (may not be a hard rule, but just took a one off ...
shimmyshimmywah's user avatar
1 vote
0 answers
938 views

How to limit magento 2 items at thumbnail slider for product page

I'm studing magento 2. inside product page I increased the thumbnail size by view.xml. Now I need to set the thumbnail slider number of items, example, now is showing 5 thumbnails of the product, I ...
Davi Reinoldo's user avatar
0 votes
0 answers
88 views

Image swatches working on every product page except one in particular

I've been looking at the console errors but I'm not sure exactly what's happening here. Here are the images when i click on the secondary color/style on the right. DevTools failed to load SourceMap: ...
Singleton's user avatar
  • 107
1 vote
0 answers
333 views

Zoom feature for Fotorama jQuery plugin

Fotorama Magento has an inbuilt zoom feature for lightbox images. Is there a way to add a zoom feature for the lightbox image in the Fotorama jQuery plugin? I am using Fotorama slider on the PHP ...
Ashwini MP's user avatar
1 vote
2 answers
2k views

Add custom video at Fotorama - Magento 2 Product Page

I am trying to add a custom video to Fotorama slider at Product Page that I have uploaded at the storage of my server on this path: pub/media/videos. I have already tried this code, but didn't work as ...
Marios Kadriu's user avatar
1 vote
2 answers
776 views

Using fotorama in vue

I am trying to use Fotorama (photo gallery) in my project on vue-cli. jQuery 3.5.1 and Fotorama installed using NPM. Code part: <script> import 'jquery' import 'fotorama/fotorama' ...
Inventor's user avatar
  • 134
-1 votes
1 answer
288 views

Angular 8 Fotorama is not showing the preview image at the bottom

I am trying to use Fotorama for my angular web app. However it does not work after finished compiling. I have been referring to Fotorama official documents but it not working. The problem is that it ...
Jin Sheng's user avatar
1 vote
0 answers
235 views

How do I put Django images into a jQuery gallery slider?

I've created a page in Django which serves images of a specific car into a gallery slider like this. It seems that the View doesn't even recognize the fotorama gallery. The <div class="fotorama"&...
Rene's user avatar
  • 370
0 votes
1 answer
260 views

Simple Fotorama image array

I'm trying to display 80 images from a folder by using Javascript Fotorama image gallery. Instead of writing each image directory is there any way to display them all by using an array? Need to ...
Linas Vildziunas's user avatar
0 votes
0 answers
167 views

How to make images slide continuously when I click and hold arrows on fotorama?

I am now working on a fotorama gallery, and we want to add this new feature that when I click and hold on arrows images will scroll continuously until mouseup. I tried as following, however the ...
Cait's user avatar
  • 1
0 votes
0 answers
768 views

How to view dynamic images using fotorama (embedded in Bootstrap 3 modal)?

I'm having difficulties displaying dynamic images from database to a Fotorama Image Viewer using Bootstrap 3 modal. I have been able to display it correctly once, but that's it, once I try to open it ...
Vasco's user avatar
  • 1
0 votes
1 answer
2k views

Magento 2 JS libraries sometimes don't load

We are currently running a Magento 2.2.6 instance. Sometimes the product gallery breaks with a JS error: Uncaught TypeError: settings.$elementF.fotorama is not a function This also happens to other ...
user1948626's user avatar
2 votes
1 answer
1k views

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. <script src="https://...
Pbinder's user avatar
  • 452
1 vote
0 answers
5k views

Fotorama gallery and magnifier issue in magento 2

I am using Porto theme in magento 2. I got stuck while using fotorama magnifier and fotorama gallery. Magnifier: In fotorama magnifier,a I hover the product image, it shows 2 image. Does not zoom ...
Arti Rana's user avatar
  • 354
0 votes
0 answers
1k views

Fotorama thumbnails scrolling

I am using Fotorama 4.6.4 on magento 2 and I have a problem that in some situations it does not show full selected thumbnail. For example: I selected last thumbnail and then I select previous ...
goofy1337's user avatar
0 votes
1 answer
1k views

Fotorama how to embed an iframe?

Need to add an iframe into the fotorama gallery. Tab image can be fixed. Src should be a parameter to pass in. Note this is on Magento 2.0
Liam Mitchell's user avatar
1 vote
0 answers
60 views

Can fotorama captions be full width with small, non-expanding images?

Does anyone know if it's possible to set the captions on fotorama to be full width, when the images are smaller than the available space, and the images are not set to expand to fill the space? Some ...
xiatica's user avatar
  • 1,546
0 votes
2 answers
2k views

Get the thumbnail image of fotorama framework

I use [fotorama][1] framework to show my images and it works fine. Now I want to show a label when I hover the mouse on a thumbnail image.Below is the html structure <div class="fotorama ...
user2397555's user avatar
1 vote
0 answers
74 views

Change folders path of gallery with Jquery and AJAX

i'm trying to make some kind of interactive gallery for my portfolio. My code includes a jquery gallery plugin (fotorama) and some ajax that works "partially". The "Fotorama" plugin works with img ...
Seral Arts's user avatar
0 votes
1 answer
107 views

Fotorama navigation in Firefox

I'm using the Fotorama image script on my website. I have data-allowfullscreen="native". When I go into full screen in Firefox, the navigation and return from full-screen buttons sometimes disappear. ...
Kevin's user avatar
  • 1
0 votes
2 answers
355 views

how to get javascript api scope inside an onclick function?

Working with fotorama, I have a question regarding scope.. I'm able to call the api after the fotorama html instance is loaded (api call must be placed below the html fotorama div to work as shown ...
omni's user avatar
  • 35
1 vote
1 answer
864 views

Website jumps to middle content on load. One page design

I have one page design with 3 sections. <section> <div class="page1"> content </div> </section> <section> <div class="page2"> content </div> </section>...
user3458635's user avatar
1 vote
1 answer
411 views

How to cancel a background image from loading

How can you cancel the loading of an image defined by a background-image attribute? There a few questions that show how to cancel the loading of an <img> tag by setting the src to '' or to a ...
Gibbous's user avatar
  • 11
0 votes
0 answers
72 views

Fotorama scripts block another scripts

I tried to use your -- truly excellent! -- Fotorama js/jQuery scripts and they worked, but in the same time they blocked all other js/jQuery scripts added to my HTMLs. My site is: http://www.taraka.pl ...
Wojciech Jóźwiak's user avatar
1 vote
1 answer
303 views

Fotorama: captions only in fullscreen

I would like to know if there is a possibility to show the caption only in fullscreen mode. I need this for a custom website I an working on and the client requested that the captions only be shown ...
Ovidiu Cosmin Buksa's user avatar
1 vote
2 answers
2k views

fotorama click trigger thumbnails from select

I used to fotorama plugin in my web site. My issue is when I select other product via selectbox, the thumbnails doesnt changes. I need to add data-serialid="xxx" on thumbnails. Any suggestions are ...
atakan aydın's user avatar
1 vote
0 answers
87 views

How use colorbox on fotorama plugin?

I'm trying to use the fotorama plugin with the data-nav='thumb' with a colorbox on the big image. It seems work, but I can't give a width or an height at the color box. That's is my code: <div ...
Ilaria PeterPan Aloisio's user avatar
0 votes
0 answers
88 views

Images in fotorama look crappy in chrome and edge

the images in fotorama look crappy in chrome and edge on 1x display, but they are ok in FF. I have tried different settings, but the result is all the same. Here's the preview http://rgbits.com/dev/...
Gi01's user avatar
  • 11
2 votes
2 answers
6k views

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 ...
bozydarlelutko's user avatar
1 vote
0 answers
603 views

Faster load fotorama

I'm wondering how to speed up starting fotorama plugin, because now when I open page I see photo without gallery script for 1 sec and after that gallery will show up. Example: http://montari.linuxpl....
SkuterPL's user avatar
0 votes
1 answer
308 views

How to access height and width properties of fotorama active frame?

I need to resize the current image in active frame when a button is clicked but I can't access the image properties. I don't want to change the fotorama size just the current image. Here is my code ...
Christrian BP's user avatar
0 votes
1 answer
2k views

Initialize fotorama with images loaded by JSON/ajax

I tried to search but i can help with this ... My html code is: //<![CDATA[ window.onload=function(){ $("[data-instagram]").each(function(el) { $.getJSON({ method: 'GET', url: ...
ribosed's user avatar
  • 128
3 votes
1 answer
1k views

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 ...
Prasad Gayan's user avatar
  • 1,484
0 votes
3 answers
6k views

Fotorama vertical thumbnails with margin glitch (Magento 2)

I got a little problem using Fotorama Library included in Magento 2 Blank default theme, first I will tell you some settings that I added to make my gallery. my thumbnails are set to be shown in the ...
Dynomite's user avatar
  • 176
1 vote
1 answer
408 views

Resize fotoroma library popup

In Magento 2 default gallery popup is showing in full width and height. But I need to resize it with js. Is it possible from library end or any customisation.
Sintu Roy's user avatar
  • 155
-1 votes
1 answer
1k views

How to open fotorama fullscreen by click on any image?

5 images displayed and need to open fullscreen fotorama slider with these images: <div class="img-list"> <a href="????"><img src="img1"></a> <a href="????"><...
Alexandr Tarasinsky's user avatar
6 votes
1 answer
11k views

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's user avatar
-1 votes
1 answer
161 views

"Fotorama" jquery plugin size glitch

Here's the screencast: http://screencast.com/t/NK7l2VfT And the code: <div class="fotorama" data-allowfullscreen="native" data-nav="thumbs" ...
Alex Babak's user avatar
0 votes
1 answer
632 views

How to set first image after exit fullscreen popup in fotorama js?

How to set first image after cancel fullscreen popup inside fotorama js slider. By default after cancel fullscreen, last active image in popup are display as main image in slider. I want to get ...
Rakesh Jesadiya's user avatar
6 votes
2 answers
7k views

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 ...
Serbu Florin-Adrian's user avatar
12 votes
7 answers
19k views

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 ...
user5138425's user avatar