メイン画像をクリックしてfotoramaフルスクリーンモードを開くには？

Question

私は製品ギャラリーのfotorama jsプラグインを使用しています。 メイン画像（サムネイルではない）をクリックしたときにフルスクリーンモードをオンにする方法はありますか？ 右上隅にあるフルスクリーンアイコンの代わりに画像をクリックすると、全画面モードを開くことができます。

この答えは私のために働いていない：私は最終的にそれを見つけhttps://stackoverflow.com/a/19064471/4680550

Answer 1

解決策を探しての時間後。以下sippet上

.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

外観や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>

P.S.に、この例に見て：ただ完全な高さと全幅がメイン画像をカバーするために、フルスクリーンのアイコンを透明にしますあなたが幸せな@ドナルド - アヒル？