How to trigger self.openFullScreen() function into my custom jQuery in Product details page

Question

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.

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

Answer 1

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'
 ], function (,ドル fotorama) {
 '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);
 
 });
});

• Gezzasa: Do you know how I can check which is the current slide it's on? Yours will always open the first one as is.
• Yonn Trimoreau: You are recreating the fotorama instance by doing this. Magento looses it and cannot control it anymore after that.
• Dhaduk Mitesh: But close button can't display in fullscreen. Have an any idea?

Answer 2

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

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