0

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

3

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.

1
  • Is this possible to create a mixin for the fotorama.js file? Aug 8 at 13:30
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'});
    });
    
1

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.

6
  • I done this task by modifying in fotorama.js in ProjectRoot/lib/web/fotorama/fotorama.js..... Only i need to know that how can overide this file in my theme and Done changes there..not in Lib. pls help
    – Deepak Rai
    Aug 29 '18 at 6:43
  • Please check edit. Aug 30 '18 at 15:22
  • Also please post your modifications so other users who come looking for this can see that as well, Aug 30 '18 at 15:23
  • please see the answer.
    – Deepak Rai
    Sep 1 '18 at 6:23
  • I doing same and works well in developer mode but not in production. Please guide me Sep 7 '18 at 5:36
1

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.

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.