Question

我正在使用jQuery插件Fotorama作为我的图片库。

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

这是我的代码 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 
        }); 

    });

缩略图

<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>

Answer 1

从未使用过Fotorama，但我发现你在点击关闭按钮后隐藏了#foto_gallery div。但是你没有在公开赛上展示它，所以也许隐藏是问题所在。

当你使用hide();方法时，jQuery会将该对象的CSS设置为display: none;，现在如果插件将CSS属性opacity设置为1，那么它就不会因display: none;而在浏览器中可见。

更新

我再次查看了您的代码，每次触发点击事件时，您都会在.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');
    });        
});

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

1 个答案:

更新