Fotorama plugin, opens fullscreen mode only once

Question

I'm using the jQuery plugin Fotorama for my image gallery.

When I click on a thumbnail to open the Fotorama gallery in fullscreen, then it will only open the first time (it will not reopen again after exiting the fullscreen and clicking the same thumbnail).

Here is my code jQuery code:

    $(".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 
        }); 

    });

Thumbnails

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

Main images

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

Sven van Zoelen · Accepted Answer · 2013-02-21T10:27:58.063

Never worked with Fotorama, but I noticed that you are hiding the #foto_gallery div after clicking the close button. But you are not showing it on the open event, so maybe the hide is the problem.

When you use the hide(); method, then jQuery sets the CSS of that object to display: none;, now if the plugin is animating the CSS property opacity to 1, then it will not be visible in the browser because of the display: none;.

Update

I looked at your code again and you initilize the FotoRama gallery on the .my-fotorama element every time the click event is triggered. Move the whole block code of $('.my-fotorama').fotorama({.. above the click function and use the plugins method for closing and opening the fullscreen mode. I updated your code to this:

// 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');
    });        
});

thanks Sven for your quick response, i made the change and now when i click on thumbnail it shows first time on full screen mode and when i click again it shows on page and not on fullscreen mode as it should — job kwemoi, Feb 21 '13 at 09:52
Now it works, goes directly to full screen mode even before when the page loads, I can live with that, all i did is to prepend the close button just after the function opens before calling fotorama. when i close and click to open again, it opens alright but floats to the left and big white space shows on the right, u can check it here http://97km.webstyle.ru/udachnii/album/list.php?bitrix_include_areas=Y&SECTION_ID=8 — job kwemoi, Feb 21 '13 at 12:37
Set the property `fullscreen` to `false` to disable the fullscreen on load. More info: http://fotoramajs.com/customize/. Also remove all properties that you don't use, it makes it way more easier to read and work with. The reason why the white space is showing is because the second time plugin sets the `width` to `100px`. I think you need to drop the `$('#foto_gallery, .my-fotorama').hide()` and `$('#foto_gallery, .my-fotorama').show()` parts and let the plugin do the work. — Sven van Zoelen, Feb 21 '13 at 13:01

Fotorama plugin, opens fullscreen mode only once

1 Answers1

Update