Questions tagged [fotorama]
Fotorama is a jQuery plugin which provides a simple, stunning and powerful photo gallery
171
questions
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 ...
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=...
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(...
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
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.
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 ...
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 ...
-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',...
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 ...
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 ...
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 ...
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: ...
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 ...
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 ...
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'
...
-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 ...
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"&...
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 ...
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 ...
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 ...
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 ...
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://...
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 ...
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 ...
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
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 ...
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 ...
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 ...
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. ...
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 ...
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>...
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 ...
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
...
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 ...
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 ...
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 ...
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/...
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 ...
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....
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
...
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: ...
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 ...
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 ...
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.
-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="????"><...
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
-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"
...
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 ...
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 ...
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 ...