Fotorama:如何通过单击图像外部取消全屏?
Fotorama: How to cancel fullscreen by click outside of image?
我想通过单击图像外部来取消 Fotorama'a 全屏显示。 Fotorama 仅允许单击 fotorama__fullscreen-icon 按钮退出全屏。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
fotoramaDefaults = {
maxwidth: '100%',
allowfullscreen: true,
nav: 'thumbs',
thumbwidth: '100',
thumbheight: '100',
thumbborderwidth: 0,
thumbmargin: 3,
click: false,
swipe: false,
};
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<div class="fotorama">
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
</div>
$('.fotorama').on('click', function (e, fotorama) {
if ($(e.target).hasClass("fotorama__stage__frame")) {
$('.fotorama').data('fotorama').cancelFullScreen();
}
});
我想通过单击图像外部来取消 Fotorama'a 全屏显示。 Fotorama 仅允许单击 fotorama__fullscreen-icon 按钮退出全屏。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
fotoramaDefaults = {
maxwidth: '100%',
allowfullscreen: true,
nav: 'thumbs',
thumbwidth: '100',
thumbheight: '100',
thumbborderwidth: 0,
thumbmargin: 3,
click: false,
swipe: false,
};
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<div class="fotorama">
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
<a href="http://s.fotorama.io/1.jpg" data-thumb="http://s.fotorama.io/1.jpg"></a>
</div>
$('.fotorama').on('click', function (e, fotorama) {
if ($(e.target).hasClass("fotorama__stage__frame")) {
$('.fotorama').data('fotorama').cancelFullScreen();
}
});