0

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
1
  • Hi, Have you got any solution for this? Nov 6 '20 at 16:26
0

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:

enter image description here

1
  • Thanks for reply but i need vertical thumbnail showing just like amazon link product wise with product name please check my question link
    – Rv Singh
    Dec 23 '19 at 14:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.