I'm attempting to make it so that if I click on one of the thumbnails in the carousel it opens the fullscreen mode rather than the customer having to click twice to first get the image onto the stage/previewed image.

I tried using the demo at http://artpolikarpov.github.io/fotorama/test/lightbox.html

I modified the code to run on my site like this:

$('[data-gallery-role="nav-frame"]').each(function () {
      var $thumbs = jQuery(this);
      var fotorama = jQuery("[data-gallery-role='gallery']").data('fotorama');

      // bind clicks
      $thumbs.on('click', 'a', function (e) {

        var $this = $(this);

        fotorama.show({index: $this.attr('href'), time: 0}).requestFullScreen();

      jQuery("[data-gallery-role='gallery']").on('fotorama:fullscreenexit', function () {
        jQuery("[data-gallery-role='gallery']").stop().fadeTo(0, 0);

Unfortunately, it still requires you to first click the thumbnail, then click on the larger preview window.

1 Answer 1


In the end this is what did it for me:

require(['jquery', 'mage/gallery/gallery'], function($, gallery)
    $('[data-gallery-role=gallery-placeholder]').on('gallery:loaded', function () {

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.