Overlap of images!

[GoogleCodeExporter]

Take the same sample & CSS provided by this site. I just modified the CSS &
Slideshow (built-in function) height & width to 500. This is:

--- CSS (/css/slideshow.css of Download Package) ---
.slideshow-images {
  height: 500px;
  width: 500px;
}       

.slideshow {
  height: 500px;
  margin: 0 auto;
  width: 500px;
}

--- HTML (index.html of Download Package) ---
<script type="text/javascript">     
  window.addEvent('domready', function(){
    var data = {
      '1.jpg': { caption: 'Volcano Asención in Ometepe, Nicaragua.' }, 
      '2.jpg': { caption: 'A Ceibu tree.' }, 
      '3.jpg': { caption: 'The view from Volcano Maderas.' }, 
      '4.jpg': { caption: 'Beer and ice cream.' }
    };
    var myShow = new Slideshow('show', data, {controller: true, height:
500, hu: 'images/', thumbnails: true, width: 500, resize: false});
  });
</script>

The output is this one: when 2.jpg appears, the borders (left and right) of
1.jpg still remain, and it dissapear when 3.jpg slides to front.

I just download the last version of SlideShow, and I'm using Mozilla
Firefox 3.6 on Windows XP SP3.

overlap: false doesn't do anything

Original issue reported on code.google.com by alan.kil...@gmail.com on 12 Feb 2010 at 10:19

Attachments:

• Solapadas!.JPG

[GoogleCodeExporter]

I would need to see a link. I'm not able to duplicate this with the same 
browser.

Original comment by aeron.gl...@gmail.com on 13 Feb 2010 at 3:21

[GoogleCodeExporter]

http://www.gethsemane.com.ar/sample/

Look how the last borders kept in the files... but just the last ones! There 
are no
more than 2 overlap images! Rare behavior...

var myShow = new Slideshow('show', data, {controller: true, height: 500, hu:
'images/', thumbnails: true, width: 500, overlap: false, resize: false});

.slideshow-images {
  height: 500px;
  width: 500px;
}       
.slideshow-images-visible { 
  opacity: 1;
}   
.slideshow-images-prev { 
  opacity: 1; 
}
.slideshow-images-next { 
  opacity: 1; 
}
.slideshow {
 height: 500px;
 margin: 0 auto;
 width: 500px;
}

Original comment by alan.kil...@gmail.com on 13 Feb 2010 at 5:46

[GoogleCodeExporter]

Thanks for your personal and interested response, and for giving solutions to 
all of us.
PS: Your script is awesome! :) Congratulations and thanks for sharing it!

Original comment by alan.kil...@gmail.com on 13 Feb 2010 at 6:17

[GoogleCodeExporter]

what was the solution here? I'm experiencing the same problem...

Aeron, if you can maybe take a look at www.babiesonline.co.za the images in the 
slideshow are transparent, they all overlap, and I can't seem to find the 
problem...I've tried various changes to the css, but still the images overlap.

Thanks

Original comment by adriaan....@gmail.com on 19 Nov 2010 at 7:09

[GoogleCodeExporter]

What is the URL to the slideshow on www.babiesonline.co.za ?

Original comment by aeron.gl...@gmail.com on 19 Nov 2010 at 2:57

[GoogleCodeExporter]

@alan.killerqueen

I believe the effect you are seeing is because of the "resize: false" option. 
You are telling Slideshow not to resize the images to fill the space of the 
Slideshow. In that case there will be empty space depending on the dimensions 
of the given images. See "resize" option:

http://code.google.com/p/slideshow/wiki/Slideshow

Original comment by aeron.gl...@gmail.com on 19 Nov 2010 at 3:03

• Changed state: Invalid

[GoogleCodeExporter]

But I don't want the images to resize and lost their original proportions.
Is there a way to load images with different proportions, and to avoid this 
issue?

Thank you, Aeron!
Alan.

Original comment by alan.kil...@gmail.com on 19 Nov 2010 at 3:17

[GoogleCodeExporter]

The proportions are maintained - it is the dimensions that are changed. If you 
don't want to resize dimensions at all - but will have images that do not fill 
the slideshow area completely - you can use the "overlap: false" option which 
will transition one image out before transitioning the next in.

Original comment by aeron.gl...@gmail.com on 19 Nov 2010 at 8:39