Magento2.3.1 How to product detail page custom image gallery popup display?

Question

I have to used Magento2.3.1 and in detail page i need to product image click after display popup image look like this type.if anyone idea how to achieved this by default magento. below share link Go to product image click than show popup inside image and thumbnail image display same look like.

https://www.amazon.com/Prextex-100-Count-Clear-Christmas-Decorations/dp/B075LQ4WTF

Answer 1

You can follow the steps describe below .

I assume your are using a theme name "Company/mytheme".

step 1) Edit app/design/frontend/Company/mytheme/etc/view.xml and add/update followings section of the xml.

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<view xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/view.xsd">
     ----------------
     ----------------
    <vars module="Magento_Catalog">
         ----------------
         ----------------
        <!-- Gallery and magnifier theme settings. Start -->
        <var name="gallery">             
            <var name="fullscreen">
                <var name="nav">thumbs</var> <!-- Fullscreen navigation style (false/thumbs/dots) -->
                <var name="loop">true</var> <!-- Fullscreen navigation loop (true/false/null) -->
                <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview in fullscreen (true/false/null) -->
                <var name="caption">false</var> <!-- Display alt text as image title in fullscreen(true/false) -->
                <var name="navdir">vertical</var> <!--Sliding direction of thumbnails in fullscreen(horizontal/vertical)  -->
                <var name="navtype">thumbs</var> <!-- Sliding type of thumbnails (slides/thumbs) -->
                <var name="transition">
                    <var name="effect">dissolve</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->
                    <var name="duration">500</var> <!-- Sets transition duration in ms -->
                </var>
            </var>
        </var>
    ----------------
   ----------------
  </vars>
</view>

step 2) Create or edit the file app/design/frontend/Company/mytheme/web/css/source/_extend.less

.fotorama__nav-wrap--vertical {
    &.fotorama__nav-wrap {
        right: 0;
        left: inherit;
    }
}
.fotorama__stage {
    left: 0 !important;
}

step 3) Step run static content deploy command and refresh cache

Demo: