Php Fotorama插件，只打开一次全屏模式

我正在为我的图像库使用jQuery插件Fotorama

当我点击缩略图全屏打开Fotorama gallery时，它只会第一次打开（退出全屏并点击相同的缩略图后，它不会再次打开）

这是我的密码 jQuery代码：

    $(".open_gallery").click(function (){
        $('body').prepend('<div class="close_gallery"> <img src="/images/round_delete.png" width="32" height="32" alt="close"/></div>');
        $('.close_gallery').click(function(){
            $('.my-fotorama').trigger('fullscreenclose');
            $('#foto_gallery').hide();

            //window.location.reload();//reload the page
        });
        $('.my-fotorama').show();
        $('.my-fotorama').fotorama({
            width: '100%',
            height: 'auto',
            aspectRatio: 1.4989293362, // =700/467

            minWidth: null,
            maxWidth: null,
            minHeight: null,
            maxHeight: null,

            transition: 'slide', // or 'fade'
            click: true,
            loop: false, // or true

            autoplay: false,
            stopAutoplayOnAction: true,

            transitionDuration: 333,

            background: '#111',
            // 'black', '#b10000', or url(bg.png)
            margin: 4,
            minPadding: 8,
            alwaysPadding: false,
            zoomToFit: true,
            cropToFit: false,
            cropToFitIfFullscreen: false,

            flexible: false,
            fitToWindowHeight: false,
            fitToWindowHeightMargin: 20,

            fullscreen: true,
            fullscreenIcon: false,

            vertical: false,

            arrows: true,
            arrowsColor: null,
            arrowPrev: null,
            arrowNext: null,

            spinnerColor: '#808080',

            nav: 'thumbs', // or 'dots', or 'none'
            navPosition: 'auto',
            // 'top' | 'right' | 'bottom' || 'left'   
            navBackground: null,
            dotColor: null,
            thumbSize: null, // 36 or 51, whatever :-)
            thumbMargin: 4,
            thumbBorderWidth: 2,
            thumbBorderColor: null,
            // 'white', '#ff9', or even '#00ff84 #00eb89 #00b66f'
            thumbsCentered: true,
            hideNavIfFullscreen: false,

            caption: 'overlay', // 'simple', or 'none'

            preload: 3,
            preloader: 'dark', // or 'white'

            shadows: true,

            data: null,
            // e.g. [{img: 'http://fotoramajs.com/;-)/03.jpg'}, {img: 'broken.jpg'}, {img: 'http://fotoramajs.com/;-)/13.jpg'}]

            html: null,

            hash: false,
            startImg: 0,

            cssTransitions: true,

            onShowImg: null,
            // function(data){alert('Photo #'+(data.index+1)+' is coming!')},
            onClick: null,
            onFullscreenOpen: null,
            onFullscreenClose: function(data){
                $('#foto_gallery').hide();      
                $('.close_gallery').hide(); 
            },
            onTransitionStop: null 
        }); 

    });         

$（“.open_gallery”）。单击（函数（）{
$（'body'）。前缀（“”）；
$（'.close_gallery'）。单击（函数（）{
$（'my fotorama'）.trigger（'fullscreenclose'）；
$（'foto_gallery'）。隐藏（）；
//window.location.reload（）；//重新加载页面
});
$（'.my fotorama'）.show（）；
$（'.my fotorama'）。fotorama({
宽度：“100%”，
高度：“自动”，
方面：1.4989293362，//=700/467
minWidth:null，
maxWidth:null，
最小高度：空，
maxHeight:null，
过渡：“幻灯片”、//或“淡入淡出”
点击：对，
循环：false、//或true
自动播放：错误，
StopAutoPlayNaction:正确，
过渡期：333，
背景：“#111”，
//“黑色”、“#b10000”或url（bg.png）
差额：4，
性别:8,，
总是说：错，
zoomToFit：是的，
克罗普托菲特：错，
cropToFitIfFullscreen:错误，
灵活：错，
菲托维特：错，
FittowinTowheightMargin:20，
全屏：对，
全屏图标：错误，
垂直：假，
箭头：是的，
箭头颜色：空，
arrowPrev:null，
arrowNext:null，
喷丝头颜色：'#808080'，
导航：“拇指”、“圆点”或“无”
导航位置：“自动”，
//“顶部”|“右侧”|“底部”|“左侧”
navBackground:null，
dotColor:null，
thumbSize:null，//36或51，任意值：-）
拇指边距：4，
指边宽度：2，
thumbBorderColor:null，
//“白色”、“ff9”甚至“00ff84”、“00eb89”、“00b66f”
真的，
hideNavIfFullscreen:错误，
标题：“覆盖”、“简单”或“无”
预载：3，
预加载程序：'暗'、//或'白'
阴影：是的，
数据：空，
//例如.{img:'http://fotoramajs.com/；-）/03.jpg'}，{img:'breake.jpg'}，{img:'http://fotoramajs.com/；-）/13.jpg'}]
html:null，
哈什：错，
起始时间：0，
C：是的，
onShowImg:null，
//函数（数据）{alert（'Photo#'+（data.index+1）+'即将到来！'}，
onClick:null，
onFullscreenOpen:空，
onFullscreenClose:函数（数据）{
$（'foto_gallery'）。隐藏（）；
$（'.close_gallery'）.hide（）；
},
onTransitionStop:null
}); 
});         

缩略图

<div class="photo-section">
<table>
    <td>
        <a class="open_gallery" href="#"> <img border="0" src="<?=$arItem["PICTURE"]["SRC"]?>" width="140px" height="110px" alt="<?=$arItem["NAME"]?>" title="<?=$arItem["NAME"]?>" />
        </a>
    </td>

</table>

主要图像

<div id="foto_gallery">
<div class="my-fotorama">           
    <img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>">
</div>

">

---

从未使用过Fotorama，但我注意到您在单击“关闭”按钮后隐藏了

#foto_gallery

div。但您没有在打开事件中显示它，因此可能是隐藏问题

当您使用

hide（）；

方法时，jQuery会将该对象的CSS设置为

display:none；

，现在如果插件将CSS属性

opacity

设置为1，那么它在浏览器中将不可见，因为

display:none；

更新 我再次查看了您的代码，每次触发click事件时，您都会初始化

.my FotoRama

元素上的FotoRama库。移动

$（'.my FotoRama'）的整个块代码。FotoRama({..

单击函数上方，并使用插件方法关闭和打开全屏模式。我将您的代码更新为：

// triggers when the DOM is loaded
$(function() {
    $('.my-fotorama').fotorama({
        width: '100%',
        height: 'auto',
        aspectRatio: 1.4989293362, // =700/467

        minWidth: null,
        maxWidth: null,
        minHeight: null,
        maxHeight: null,

        transition: 'slide', // or 'fade'
        click: true,
        loop: false, // or true

        autoplay: false,
        stopAutoplayOnAction: true,

        transitionDuration: 333,

        background: '#111',
        // 'black', '#b10000', or url(bg.png)
        margin: 4,
        minPadding: 8,
        alwaysPadding: false,
        zoomToFit: true,
        cropToFit: false,
        cropToFitIfFullscreen: false,

        flexible: false,
        fitToWindowHeight: false,
        fitToWindowHeightMargin: 20,

        fullscreen: true,
        fullscreenIcon: false,

        vertical: false,

        arrows: true,
        arrowsColor: null,
        arrowPrev: null,
        arrowNext: null,

        spinnerColor: '#808080',

        nav: 'thumbs', // or 'dots', or 'none'
        navPosition: 'auto',
        // 'top' | 'right' | 'bottom' || 'left'   
        navBackground: null,
        dotColor: null,
        thumbSize: null, // 36 or 51, whatever :-)
        thumbMargin: 4,
        thumbBorderWidth: 2,
        thumbBorderColor: null,
        // 'white', '#ff9', or even '#00ff84 #00eb89 #00b66f'
        thumbsCentered: true,
        hideNavIfFullscreen: false,

        caption: 'overlay', // 'simple', or 'none'

        preload: 3,
        preloader: 'dark', // or 'white'

        shadows: true,

        data: null,
        html: null,

        hash: false,
        startImg: 0,

        cssTransitions: true,

        onShowImg: null,
        onClick: null,
        onFullscreenOpen: function() {
            $('#foto_gallery, .my-fotorama').show();
        },
        onFullscreenClose: function(data){
            $('#foto_gallery, .my-fotorama').hide(); 
            $('.close_gallery').remove(); // you need to remove the close element, otherwise it will add and add one every time the click event is triggered.
        },
        onTransitionStop: null 
    }); 

    // add the click event to all open_gallery classes in the DOM
    $(".open_gallery").click(function () {
        $('body').prepend('<div class="close_gallery"> <img src="/images/round_delete.png" width="32" height="32" alt="close"/></div>');

        $('.close_gallery').click(function() {
            $('.my-fotorama').trigger('fullscreenclose');
        });     

        $('.my-fotorama').trigger('fullscreenopen');
    });        
});

//加载DOM时触发
$（函数（）{
$（'.my fotorama'）。fotorama({
宽度：“100%”，
高度：“自动”，
方面：1.4989293362，//=700/467
minWidth:null，
maxWidth:null，
最小高度：空，
maxHeight:null，
过渡：“幻灯片”、//或“淡入淡出”
点击：对，
循环：false、//或true
自动播放：错误，
StopAutoPlayNaction:正确，
过渡期：333，
背景：“#111”，
//“黑色”、“#b10000”或url（bg.png）
差额：4，
性别:8,，
总是说：错，
zoomToFit：是的，
克罗普托菲特：错，
cropToFitIfFullscreen:错误，
灵活：错，
菲托维特：错，
FittowinTowheightMargin:20，
全屏：对，
全屏图标：错误，
垂直：假，
箭头：是的，
箭头颜色：空，
arrowPrev:null，
arrowNext:null，
喷丝头颜色：'#808080'，
导航：“拇指”、“圆点”或“无”
导航位置：“自动”，
//“顶部”|“右侧”|“底部”|“左侧”
navBackground:null，
dotColor:null，
thumbSize:null，//36或51，任意值：-）
拇指边距：4，
指边宽度：2，
thumbBorderColor:null，
//“白色”、“ff9”甚至“00ff84”、“00eb89”、“00b66f”
真的，
hideNavIfFullscreen:错误，
标题：“覆盖”、“简单”或“无”
预载：3，
预加载程序：'暗'、//或'白'
阴影：是的，
数据：空，
html:null，
哈什：错，
起始时间：0，
C：是的，
onShowImg:null，
onClick:null，
onFullscreenOpen:函数（）{
$（'foto_画廊，.my fotorama'）.show（）；
},
onFullscreenClose:函数（数据）{
$（'#foto_画廊。