How to Set Image Gallery Fotorama Thumbnail as Vertical View in Magento 2

6 Comments

• 

  Mike

  September 20, 2022 at 1:18 pm

  Reply

  Do you know how to adjust the number of thumbnails / thumbs count for fotorama gallery slider in Magento?

  • 

    Sanjay Jethva

    September 26, 2022 at 11:24 am

    Reply

    Hello Mike,
    No such thing is possible with the default code of Magento. So, you’ll need to customize the code.
    Thank You

• 

  ebrevinil

  August 24, 2021 at 12:44 pm

  Reply

  I like what I see so I just follow you.
  Look forward to going through your website again.

  • 

    Sanjay Jethva

    August 24, 2021 at 3:55 pm

    Reply

    Hello Ebrevinil,
    Thank you so much for the appreciation and following us!
    Thanks.

• 

  Moazzam Ali

  June 21, 2021 at 3:49 pm

  Reply

  how we can show addtinal images as a thumbail
  no slider no navigation like that link https://www.casando.de/domizil-glasschiebetuer-opal-8-mm-esg-floatglas-exclusiv-komplettset-10030021019-produkt/

  • 

    Sanjay Jethva

    June 21, 2021 at 4:59 pm

    Reply

    Hello Moazzam,
    Please add the below code in the view.xml file at app\design\frontend\Themes\Yourtheme\etc\

    <vars module="Magento_Catalog"> <var name="gallery"> <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) --> <var name="loop">true</var> <!-- Gallery navigation loop (true/false) --> <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) --> <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false) --> <var name="caption">false</var> <!-- Display alt text as image title (true/false) --> <var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) --> <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) --> <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) --> <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) --> <var name="transition"> <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) --> <var name="duration">500</var> <!-- Sets transition duration in ms --> </var> </var> <var name="magnifier"> <var name="fullscreenzoom">5</var> <!-- Zoom for fullscreen (integer)--> <var name="top"></var> <!-- Top position of magnifier --> <var name="left"></var> <!-- Left position of magnifier --> <var name="width"></var> <!-- Width of magnifier block --> <var name="height"></var> <!-- Height of magnifier block --> <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) --> <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) --> </var> </var>

    1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

    <vars module="Magento_Catalog">         <var name="gallery">             <var name="nav">thumbs</var> <!-- Gallery navigation style (false/thumbs/dots) -->             <var name="loop">true</var> <!-- Gallery navigation loop (true/false) -->             <var name="keyboard">true</var> <!-- Turn on/off keyboard arrows navigation (true/false) -->             <var name="arrows">false</var> <!-- Turn on/off arrows on the sides preview (true/false) -->             <var name="caption">false</var> <!-- Display alt text as image title (true/false) -->             <var name="allowfullscreen">false</var> <!-- Turn on/off fullscreen (true/false) -->             <var name="navdir">vertical</var> <!-- Sliding direction of thumbnails (horizontal/vertical) -->             <var name="navarrows">true</var> <!-- Turn on/off on the thumbs navigation sides (true/false) -->             <var name="navtype">slides</var> <!-- Sliding type of thumbnails (slides/thumbs) -->             <var name="transition">                 <var name="effect">slide</var> <!-- Sets transition effect for slides changing (slide/crossfade/dissolve) -->                 <var name="duration">500</var> <!-- Sets transition duration in ms -->             </var>         </var> <var name="magnifier">             <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->             <var name="top"></var> <!-- Top position of magnifier -->             <var name="left"></var> <!-- Left position of magnifier -->             <var name="width"></var> <!-- Width of magnifier block -->             <var name="height"></var> <!-- Height of magnifier block -->             <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->             <var name="enabled">false</var> <!-- Turn on/off magnifier (true/false) -->         </var>   </var>

    Thank You.