Ask questions and get good answers on jQuery

Hi, i've got a problem whit the mbgallery in IE9,in Chrome and Safari, it works good on FF7. this is the link where i've installed the gallery: http://www.fluvio.altervista.org/fluvio2.1/ita/fotografia.html

the problem is that when i open a gallery a part of the image is cutted, on the right and on the bottom. Thank you for any helps and suggestions!!!

asked Dec 02 '11 at 13:18

fulvio300's gravatar image

fulvio300
1


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

answered Dec 02 '11 at 16:48

Matteo%20Bicocchi's gravatar image

Matteo Bicocchi ♦♦
1776129

Hi Matteo, thanks for your help! i've done the correction you've said (i've understood my mistake and i solved another problem) but the cut still remain in IE and Chrome.

answered Dec 02 '11 at 18:17

fulvio300's gravatar image

fulvio300
1

If i set the min width and eight the images are not cutted, but not every images are orizontal, so if i set the minWidth: 692, minHeight: 472, the vertical one will be on ane side and the rest of the box is black.

answered Dec 03 '11 at 03:28

fulvio300's gravatar image

fulvio300
1

This position is made by the praise that extends from the bottom up extrunder. so you do not have the problem of collapse wow gold extrunder yours? Everything working all right? btw: i know that is a strange use, but otherwise i dont know wow gold kaufen.

Have a nice day and thx for your reply

answered Jan 11 at 01:54

Margaret's gravatar image

Margaret
1

Your answer
toggle preview

Follow this question

By Email:

Once you sign in you will be able to subscribe for any updates here

By RSS:

Answers

Answers and Comments

Tags:

×6

Asked: Dec 02 '11 at 13:18

Seen: 132 times

Last updated: Jan 11 at 01:54

jQuery main site - Matteo Bicocchi