Magento 2 – How to Edit Gallery Images More View Slider in Product Page

magento2

My custom theme extend form magento-black. I had try edit gallery images slider in product page. but I can't change number items to show and slider working not correct with items carousel is normal.

I had found code in file

vendor/magento/module-catalog/view/frontend/templates/product/view/gallery.phtml

I saw code js 

<script type="text/x-magento-init">
{
    "[data-gallery-role=gallery-placeholder]": {
        "mage/gallery/gallery": {
            "mixins":["magnifier/magnify"],
            "magnifierOpts": <?php /* @escapeNotVerified */ echo $block->getMagnifier(); ?>,
            "data": <?php /* @escapeNotVerified */ echo $block->getGalleryImagesJson(); ?>,
            "options": {
                "nav": "<?php /* @escapeNotVerified */ echo $block->getVar("gallery/nav"); ?>",
                "loop": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/loop"); ?>,
                "keyboard": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/keyboard"); ?>,
                "arrows": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/arrows"); ?>,
                "allowfullscreen": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/allowfullscreen"); ?>,
                "showCaption": <?php /* @escapeNotVerified */ echo $block->getVar("gallery/caption"); ?>,
                "width": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                "thumbwidth": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                "thumbheight": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_small', 'height')
                    ?: $block->getImageAttribute('product_page_image_small', 'width'); ?>,
                "height": <?php /* @escapeNotVerified */ echo $block->getImageAttribute('product_page_image_medium', 'height')
                    ?: $block->getImageAttribute('product_page_image_medium', 'width'); ?>,
                "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/duration"); ?>,
                "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/transition/effect"); ?>",
                "navarrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/navarrows"); ?>,
                "navtype": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navtype"); ?>",
                "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/navdir"); ?>"
            },
            "fullscreen": {
                "nav": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/nav"); ?>",
                "loop": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/loop"); ?>,
                "navdir": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/navdir"); ?>",
                "arrows": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/arrows"); ?>,
                "showCaption": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/caption"); ?>,
                "transitionduration": <?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/duration"); ?>,
                "transition": "<?php /* @escapeNotVerified */  echo $block->getVar("gallery/fullscreen/transition/effect"); ?>"
            },
            "breakpoints": <?php /* @escapeNotVerified */ echo $block->getBreakpoints(); ?>
        }
    }
}

But I can't edit with our requirments
Below is design. Please help me change to correct design.
Thanks a lot.
enter image description here

Best Answer

I think you can't directly change it. Because in Magento 2, jQuery gallery fotorama (Fotorama 4.6.4) is used to create an image gallery.

If you need to change the design you must override the fotoram script (lib/web/fotorama/fotorama.js) or you can override the gallery.phtml on your theme. 

json_decode($block->getGalleryImagesJson());

will give all gallery images that you needed. you can use any other jQuery gallery or image slider on your theme

Related Topic