Magento 2 Gallery.js fotorama js

Question

there is a function returnCurrentImages in gallery.js file

 returnCurrentImages: function () {
                        var images = [];
                        _.each(this.fotorama.data, function (item) {
                            images.push(_.omit(item, "$navThumbFrame", "$navDotFrame", "$stageFrame", "labelledby"));
                        });
                        return images;
                    },

My question is this.fotorama.data object has items data, from where items has set in this.fotorama.data object ?

Answer 1

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-catalog/view/frontend/templates/product/view/gallery.phtml

In this gallery.phtml file you can see the below script

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?= /* @noEscape */ $block->getMagnifier() ?>,
            "data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,
            "options": <?= /* @noEscape */ $block->getGalleryOptions()->getOptionsJson() ?>,
            "fullscreen": <?= /* @noEscape */ $block->getGalleryOptions()->getFSOptionsJson() ?>,
             "breakpoints": <?= /* @noEscape */ $block->getBreakpoints() ?>
        }
    }
}

The gallery element data's are set from this script only.

The this.fotorama.data data was updated in below mentioned line in that script:

"data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>,

The actual image Json data's are got from getGalleryImagesJson() function, as you can see this function definition in below path:

vendor/magento/module-catalog/Block/Product/View/Gallery.php

Answer 2

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 gallarey.php (Magento\Catalog\Block\Product\View\Gallery.php::getGalleryImagesJson) file.

Get better idea from below files.

=> this.fotorama.data from gallary.js ( vendor\magento\magento2-base\lib\web\mage\gallery\gallery.js) load from fotorama/fotorama.

=> fotorama/fotorama.js file (vendor\magento\magento2-base\lib\web\fotorama\fotorama)

$.fn.fotorama = function (opts) { console.log(opts)

=> opts.data are loaded from Gallery.php file (Magento\Catalog\Block\Product\View\Gallery.php)

Magento\Catalog\Block\Product\View\Gallery.php::getGalleryImagesJson();

=> passing php data to js from gallery.phtml (vendor\magento\module-catalog\view\frontend\templates\product\view\gallery.phtml) file.

 `"data": <?= /* @noEscape */ $block->getGalleryImagesJson() ?>` 

configurable image gallery data are loaded from

vendor\magento\module-configurale-product\Block\Product\View\Type\Confirable.php::getOptionImages()