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