Comment ouvrir le mode plein écran de fotorama en cliquant sur l'image principale?

Question

J'utilise fotorama js plugin pour la galerie de produits. Comment activer le mode plein écran en cliquant sur l'image principale (pas les vignettes)? Je veux permettre à l'utilisateur d'ouvrir le mode plein écran en cliquant sur l'image au lieu de l'icône plein écran dans le coin supérieur droit.

Cette réponse ne fonctionne pas pour moi: https://stackoverflow.com/a/19064471/4680550

Answer 1

Après des heures de recherche de solution, je l'ai enfin trouvé. Il suffit de faire l'icône en plein écran transparent, pleine hauteur et pleine largeur pour couvrir l'image principale:

.fotorama__fullscreen-icon { 
    background: url('../img/bg.png') no-repeat scroll 0 0 rgba(0, 0, 0, 0) !important; 
    width: 100% !important; 
    height: 100% !important; 
    right: 0 !important; 
    top: 0 !important; 
    z-index: 10 !important; 
} 

Answer 2

regard sur mouillette ci-dessous ou consulter cet exemple sur http://jsfiddle.net/slovnet/gk9998ct/

var $fotoramaDiv = jQuery('.fotorama_custom').fotorama({ 
 
    click:false, 
 
    allowfullscreen:true, 
 
}); 
 

 
    // 2. Get the API object. 
 
    var fotorama = $fotoramaDiv.data('fotorama'); 
 

 
// if you want add handler on one left click 
 
jQuery('.fotorama').click(function(){ 
 
    fotorama.requestFullScreen();  
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> 
 
<!-- Fotorama --> 
 
<div class="fotorama_custom" data-width="700" data-ratio="700/467" data-max-width="100%"> 
 
    <img src="http://lorempixel.com/250/200/sports"> 
 
    <img src="http://lorempixel.com/250/200/animals"> 
 
    <img src="http://lorempixel.com/250/200/city"> 
 
    <img src="http://lorempixel.com/250/200/people"> 
 
    <img src="http://lorempixel.com/250/200/transport"> 
 
</div>

post-scriptum @ Donald-Duck vous heureux?