7 votes

Magento 2 product gallery doesn't close on iPhone

Override fotorama.js in your custom theme at app/design/<vendor>/<custom_theme>/web/fotorama/fotorama.js, you can copy this file from \lib\web\fotorama\fotorama.js and replace code as per ...
Dipesh Rangani's user avatar
5 votes
Accepted

How to add "click" or "change" event on product thumbnail images in frontend?

There are three ways to change the image Nav Frame image click, Nav prev/next arrow click and Slide the image. jQuery event dispatched on dispatch() method on 5192 line from {Magento2 root directory}/...
Rajkumar Vellaiswamy's user avatar
4 votes
Accepted

Magento 2 Product: programmatically 'click' thumbnail

Actually, I found something! If you think there is a better solution, please comment or provide your own. You can attach an event to the loading of the gallery and also to the change of the option ...
Mageician's user avatar
  • 707
3 votes
Accepted

Magento 2 Gallery.js fotorama js

This returnCurrentImages is a fotorama API object function. These fotorama object data's are set from gallery element. As you can see the gallery element in the below path: vendor/magento/module-...
Siranjeevi K S's user avatar
3 votes

How to add "click" or "change" event on product thumbnail images in frontend?

This is also one of the answers for achieving click events on thumbnail images without modifying the fotorama.js file which suits my requirement. We can directly add the click event for the nav frame ...
Siranjeevi K S's user avatar
3 votes
Accepted

Magento 2 : How reduce size of fotoroma gallery icons on product detail page

The icons actually come by cropping a weird background which contain all the icons, located here - pub/static/frontend/Magento/luma/en_US/mage/gallery/gallery.png so you will have to adjust background-...
Vivek Kumar's user avatar
  • 5,385
3 votes

Magento 2 + need to use fotorama in cms page

CSS: app/design/frontend/{Vendor}/{theme}/Magento_Theme/layout/default_head_blocks.xml <?xml version="1.0"?> <page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:...
PЯINCƎ's user avatar
  • 11.7k
3 votes

Magento 2 how to listen to event fotorama fullscreenenter

I've got it! inside the gallery:loaded i can now listen to event fullscreenenter when fullscreen mode shows when image is clicked essentially like so: ... var item = $(document).find('.fotorama-item'...
Juliano Vargas's user avatar
2 votes

Fotorama Gallery - How to minimize the frame size for product base image

In your theme > app/design/frontend/package/theme-name/etc/view.xml Inside <media> node you can define different image sizes: <images module="Magento_Catalog"> <image id="...
Moin Malek's user avatar
2 votes
Accepted

Issue With Displaying Gallery Widget

So I figured it out after days of trying to fix this. The problem is because there is a css file that is not loaded properly. <link rel="stylesheet" type="text/css" href="&...
Magento_learner's user avatar
2 votes

Magento 2 + need to use fotorama in cms page

Yes. CMS page content is very straight forward as describe here Note : I put my fotorama CMS page content in ans section for better readability. I am not giving the full ans of your queation as @...
Pritam Biswas's user avatar
2 votes

Magento 2 Gallery.js fotorama js

returnCurrentImages function looping images (this.fotorama.data) from fotorama.js(vendor/magento/magento2-base/lib/web/fotorama/fotorama.js) file. $.fn.fotorama (line num : 3796) set opts.data from ...
S.P's user avatar
  • 1,534
1 vote
Accepted

Add custom mp4 file to Fotorama but without using iframe - Magento 2.4

I have worked into your issue for the get video tag apart from the iframe, below I have added a solution please replace your script to this script code and your issue is resolved. also, I have added a ...
Rohit Gohel's user avatar
1 vote
Accepted

Magento 2 open fullscreen/lightbox view when clicking on product thumbnails

In the end this is what did it for me: require(['jquery', 'mage/gallery/gallery'], function($, gallery) { $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () { $('...
joeybab3's user avatar
  • 378
1 vote
Accepted

Magento 2.4.1: Zoom_in and Zoom_out button is not working inside product popup image on product details page

* Product media data template * * @var $block \Magento\Catalog\Block\Product\View\Gallery */ ?> <?php $images = $block->getGalleryImages()->getItems(); $mainImage = current(...
Reshad Zazai's user avatar
1 vote
Accepted

Fotorama zoom_in and zoom_out buttons are not working in Magento 2.3.6

/** * Product media data template * * @var $block \Magento\Catalog\Block\Product\View\Gallery */ ?> <?php $images = $block->getGalleryImages()->getItems(); $mainImage = current(...
Reshad Zazai's user avatar
1 vote

Magento 2 Console Error Uncaught TypeError

Hello friends I found the issue. jquery was conflicting When I check in console jQuery was undefined I have checked using require but jquery was not worked. require(['jquery'],function($){ console....
Bhavesh Prajapati's user avatar
1 vote
Accepted

How to make product gallery thumbs over the image in Magento 2? Like in this example

You can do this with position: absolute; - https://developer.mozilla.org/en-US/docs/Web/CSS/position Ensure there is a parent for both the gallery and the thumbnails Set the parent's position to ...
Ben Crook's user avatar
  • 15.7k
1 vote
Accepted

How to add multiple videos on fotorama gallery in Magento2?

I found the answer by myself. I added videos like this, and it is working fine.. fotorama.push({ thumb: 'http://127.0.0.1/Magentonew/pub/media/file-MrylO8jADD11.png', 'src': video1, type: 'iframe',...
Hima Mohan's user avatar
1 vote

Product image size issue - Fotorama - Magento EE 2.2.4

app/design/frontend/Custom/mytheme/Magento_Catalog/templates/product/view/gallery.phtml add "maxheight": "550", // Add your value here <script type="text/x-magento-init"> { "[data-...
Savan Patel's user avatar
  • 2,348
1 vote

Set the default image zoom for full screen in magento 2.x

In your theme's /etc/view.xml file try the following settings: <var name="magnifier"> <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> </var&...
mlunt's user avatar
  • 575
1 vote

magento 2 change the slider

vendor\magento\module-catalog\view\frontend\templates\product\view\gallery.phtml Override this file in your theme with respective path. Change mage/gallery/gallery to your slider and update ...
Kanhaiya lal's user avatar
  • 1,548
1 vote

Magento 2 products image

Go to below path: Your_Theme/etc/view.xml Add transparency to false. <?xml version="1.0"?> <view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:...
anonymous's user avatar
  • 3,722

Only top scored, non community-wiki answers of a minimum length are eligible