5

If we click on product image in the product details page, gallery full screen is coming to see the images in full screen.

I am trying to get the same functionality when click on my string Quick view in product details page added as an extension.

I have done so far:

I have added the below code in my template.

<span id="see_thumbnails" >Quick view</span>                      

<script type="text/javascript">
    require([
    'jquery',
    'mage/gallery/gallery'
], function ($, gallery) {
    'use strict';
        $("#see_thumbnails").on("click" ,function() {

            gallery.openFullScreen();

        });

    });
</script>

I am using openFullScreen because i found openFullScreen related code at vendor\magento\magento2-base\lib\web\mage\gallery\gallery.js

Can any one tell me where i am doing wrong.

Help would be appreciated.

  • may be you have to use this.openFullScreen() instead of gallery.openFullScreen(); – Rakesh Jesadiya Dec 22 '16 at 6:06
  • @Rakesh I am getting TypeError: this.openFullScreen is not a function – Krishna ijjada Dec 22 '16 at 6:22
  • try with this ,var self = this; self.openFullScreen(); – Rakesh Jesadiya Dec 22 '16 at 6:23
  • @Rakesh throwing same error, i am adding external string, 'self' may not help. – Krishna ijjada Dec 22 '16 at 6:27
6

After spending some time, i found the answer as mentioned below, hope this will help for someone.

    <script type="text/javascript">
        require([
        'jquery',
        'fotorama/fotorama',
        'underscore',
        'matchMedia',
        'mage/template',
        'text!mage/gallery/gallery.html',
        'uiClass',
        'mage/translate'
    ], function ($, fotorama, _, mediaCheck, template, galleryTpl, Class, $t) {
        'use strict';


            $("#see_thumbnails").on("click" ,function() {       


                 var fotorama = $('.fotorama').fotorama({allowfullscreen: true}).data('fotorama');
                 fotorama.requestFullScreen();
                 var $fotoramaDiv = $('.fotorama').fotorama();
                 $fotoramaDiv.data('fotorama').show(0);

            });
});
  • Do you know how I can check which is the current slide it's on? Yours will always open the first one as is. – Gezzasa Dec 4 '18 at 8:24
  • You are recreating the fotorama instance by doing this. Magento looses it and cannot control it anymore after that. – Yonn Trimoreau Mar 28 at 12:58
  • But close button can't display in fullscreen. Have an any idea? – Dhaduk Mitesh May 31 at 12:37
1

You can also do this and trigger Magento 2's native behavior:

$('.fotorama__stage__frame').trigger('mouseup');

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.