Fotorama plugin, opens fullscreen mode only once - php

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>

Answer 1

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