I need to add one image (the same image) at the end of the gallery images for all products, in file fotorama.js. How can i do that? I know there are other ways to do that , but it is important that I do that with fotorama.js (preference or plugin) Does anyone knows that how to solve it? Thanks in advance.

1 Answer 1


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


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);
                .toggleClass(arrDisabledClass, disablePrev)
                .attr(disableAttr(disablePrev, false));
                .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;
                .toggleClass(arrDisabledClass, isLeftDisable)
                .attr(disableAttr(isLeftDisable, true));
                .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.

Hope it helps!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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