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

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.