2017-02-27 9 views
1

제품 갤러리에 fotorama js plugin을 사용하고 있습니다. 주 이미지 (축소 이미지가 아님)를 클릭 할 때 전체 화면 모드를 켜는 방법은 무엇입니까? 오른쪽 상단 모서리에 전체 이미지 아이콘 대신 이미지를 클릭하여 전체 화면 모드를 열 수있게하려고합니다.기본 이미지를 클릭하여 fotorama 전체 화면 모드를 여는 방법은 무엇입니까?

이 대답은 나를 위해 작동하지 않습니다 : 나는 마침내 그것을 발견 https://stackoverflow.com/a/19064471/4680550

답변

3

솔루션을 찾고 시간 후. 아래의 빵 조각에

.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; 
} 
-1

모양 또는 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.에이 예에서 볼 : 그냥 전체 높이 및 전체 폭이 메인 이미지를 충당하기 위해, 전체 화면 아이콘 투명하게 @ donald-duck 당신이 행복하니?