Opening the source of your page I notice that you make some confusion. As galleries are opened via a click event on the button you really should not initialize them on document load; that's why you get an error: gallery is undefined.
Remove all the gallery initialization inside the script tag and everything should work.
where you have:
<script type="text/javascript">
$(function(){
//these are the default settings for the component
// you can redefine this defaults or change each parameter on the component call
$.fn.mbGallery.defaults={
containment:"body",
cssURL:"../mbgallery/css/",
skin:"black",
overlayBackground:"#333",
exifData:false, //todo
galleryTitle:"Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",
minWidth: 300,
minHeight: 200,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.5,
startFrom: 0,//"random"
fadeTime: 500,
slideTimer: 4000,
autoSlide: true,
onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}
};
});
//this is a direct call on document load
$('#acharmingworld').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#ale').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#analogico').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#inviaggio').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#lamusicanelcuore').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#myself').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#saporieprofumi').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#various').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
$('#fotobook').mbGallery({
overlayBackground:'#f0f0f0',
overlayOpacity:.8});
// this is a call attached to an event
$('#galleryOpener')
.bind("click", function(){
$('#acharmingworld').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#ale').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#analogico').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#inviaggio').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#lamusicanelcuore').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#myself').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#saporieprofumi').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#various').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
$('#fotobook').mbGallery({overlayBackground:'#f0f0f0', overlayOpacity:.8});
});
</script>
it should be:
<script type="text/javascript">
$(function(){
//these are the default settings for the component
// you can redefine this defaults or change each parameter on the component call
$.fn.mbGallery.defaults={
containment:"body",
cssURL:"../mbgallery/css/",
skin:"black",
overlayBackground:"#333",
exifData:false, //todo
galleryTitle:"Gallery",
imageSelector: ".imgFull",
thumbnailSelector: ".imgThumb",
titleSelector: ".imgTitle",
descSelector: ".imgDesc",
minWidth: 300,
minHeight: 200,
maxWidth: 0,
maxHeight: 0,
fullScreen:true,
addRaster:false,
overlayOpacity:.5,
startFrom: 0,//"random"
fadeTime: 500,
slideTimer: 4000,
autoSlide: true,
onOpen:function(){},
onBeforeClose:function(){},
onClose:function(){},
onChangePhoto:function(){}
};
});
</script>
Bye,
Matteo