Magento 2 : How to override fotorama.js in magento custom theme

Question

I need to show gallery arrow always visible on product gallery page.

I tried in gallery.phtml variable arrows="always", but its not working.

I want to show both arrow always visible on product gallery.

I need to know that How to overide fotorama.js in a custom theme.

Path of fotorama lib/web/fotorama

Answer 1

I got the solution after some R&D on fotorama.js I override the file of fotorama.js in My_Theme.

app/design/[My]/[Theme]/web/fotorama/fotorama.js

I want to Enable both gallery nav arrow and don't want to hide nav arrow when slider goes up and down in vertical way arrow. Also i want to enable that arrow only if image is more than 4.

Lets see in fotorama.js for enabling both arrow.

line no 22.

//wrapToggleArrowsClass = wrapClass + '--toggle-arrows',
  wrapToggleArrowsClass = wrapClass + '',

line no 33.

//arrDisabledClass = arrClass + '--disabled',

  arrDisabledClass = arrClass + '',

From Line no 2635 to 2664

function arrsUpdate() {
            /* var disablePrev = disableDirrection(0),
                disableNext = disableDirrection(1);
            $arrPrev
                .toggleClass(arrDisabledClass, disablePrev)
                .attr(disableAttr(disablePrev, false));
            $arrNext
                .toggleClass(arrDisabledClass, disableNext)
                .attr(disableAttr(disableNext, false));
        */}

        function thumbArrUpdate() {
            /*var isLeftDisable = false,
                isRightDisable = false;
            if (opts.navtype === 'thumbs' && !opts.loop) {
                (activeIndex == 0) ? isLeftDisable = true : isLeftDisable = false;
                (activeIndex == opts.data.length - 1) ? isRightDisable = true : isRightDisable = false;
            }
            if (opts.navtype === 'slides') {
                var pos = readPosition($navShaft, opts.navdir);
                pos >= navShaftTouchTail.max ? isLeftDisable = true : isLeftDisable = false;
                pos <= navShaftTouchTail.min ? isRightDisable = true : isRightDisable = false;
            }
            $thumbArrLeft
                .toggleClass(arrDisabledClass, isLeftDisable)
                .attr(disableAttr(isLeftDisable, true));
            $thumbArrRight
                .toggleClass(arrDisabledClass, isRightDisable)
                .attr(disableAttr(isRightDisable, true));
        */}

Comment out these two functions, after this your gallery arrow will not hide.

For the enabling nav arrow when image is more than 4.

"navarrows": <?php /* @escapeNotVerified */  echo (($block->getVar("gallery/navarrows") == 'true') && ($block->getGalleryImages()->count() > 4)) ? 'true' : 'false'; ?>,

Arrow enable is more than 4 answer source. display arrow if image count is greater than 4

Now every thing is as per requirement.

Answer 2

Actually i was able to customize fotorama library downloaded from their official website because I found it difficult and nearly impossible to use Magento's fotorama library, below are the steps I have followed to use a custom library in magento 2.

In this library, I feed the gallery images in the JS file, by pushing the images to the fotorama function.

1. Download and place your Fotorama library in this location -

   app/code/Vendor/Module/view/frontend/web/js/fotorama.js

2.Create a new file called requirejs-config.js to intialise this library via jquery , using this code , in this location -

app/code/Vendor/Module/view/frontend/requirejs-config.js


var config = {
paths: {
    'fotoramajs': 'vendor_module/js/fotorama'
},
shim: {
    fotoramajs: {
        deps: [ 'jquery' ]
    }
},
};

1. In your template file or your phtml file, please connect the JS file in that, use this HTML structure, Note: This div block is not necessary, please customize according to your needs from the fotorama's official website.

   <div class="image-wrapper">
   <div class="fotorama" id="clone-image-field" data-nav="thumbs" data-click="true"
        data-arrows="always" data-width="100%" data-height="auto">
   </div>
   

2. In that phtml file, Please use this script snippet to connect your phtml file and JS file, note: I have just used this script as an example.

   <script type="text/javascript">
   
   require([
   "jquery"
   ],function($) {
   
   const fotoramaOptions = {
       "nav": "thumbs",
       "loop": true,
       "keyboard": true,
       "allowfullscreen": false,
       "showCaption": false,
       "thumbwidth": 88,
       "thumbheight": 110,
       "thumbmargin": 10,
       "thumbborderwidth": 5,
       "transitionduration": 500,
       "transition": "slide",
       "navarrows": true,
       "navtype": "slides",
       "navdir": "horizontal"
   };
   let $fotoramaDiv = $('.fotorama').fotorama(fotoramaOptions);
   let fotorama = $fotoramaDiv.data('fotorama');
   fotorama.push({img: 'https://imgpath.com', thumb: 
   'https://imgpath.com'});
   });
   

Answer 3

You will have to write custom js for it as fotorama by default don't provide functionality to always show arrrows

I tried in gallery.phtml variable arrows="always", but its not working.

arrows param in gallery.phtml corresponds to data-arrows for fotorama js, which takes only true and false value and tells if to render the arrows or not.

You can check it here - http://fotorama.io/customize/arrows-click-swipe/

All the options for fotorama can be checked here - http://fotorama.io/customize/

EDIT:

If you want to override fotorama js you should copy it from /lib/web/fotorama/fotorama.js to app/design/[Vendor]/[Theme]/web/fotorama/fotorama.js and modify it there.

Answer 4

So in order to have the arrows always active on main fotorama image, just edit the line 16 in app/design/{vendor}/{Theme}/web/fotorama/fotorama.js

//wrapNoControlsClass = wrapClass + '--no-controls',
wrapNoControlsClass = '',

this is actually the css class .fotorama__wrap--no-controls in-charge with the slide-in animation of the arrows on hover.