Ultimate Fade-In Slideshow not dissolving properly using transparent Gif's

**vegeman** · 07-21-2012, 04:57 PM

Script Title: Ultimate Fade-In Slideshow (v1.51)

Script URL (on DD): http://www.dynamicdrive.com/dynamici...nslideshow.htm (newer version v 2.4)

I'm using an older version of the Ultimate Fade-in Slideshow (v1.51) which works fine with jpegs. Recently I've tried using it with gif's that have a transparent background. When the slideshow runs, the gif's overlap each other normally during the dissolve, but when they finish dissolving into each other you can see two images, one in back of the other.

See my webpage here: http://boulderdrumstudio.com/omonoia/index.htm

I'd like to keep using this version if possible. Is there an opacity or z-index value I can change to allow the images to dissolve correctly?

Thanks in advance !!!

**jscheuer1** · 07-21-2012, 06:02 PM

Add this highlighted stylesheet to the head of the page as shown:

Code:

<html>
<head>
<title>Omonoia Greek Bakery - Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#master0 div { 
	background: url("http://boulderdrumstudio.com/omonoia/images/bkgd.jpg") -8px -8px;
	background-color: #ffcc99 !important;
}
.AWMSTCBG0 {
	z-index: 10000 !important;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
/***********************************************
* Ultimate Fade-In Slideshow (v1.51): © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay int . . .

Add the highlighted id and code to the body as shown:

Code:

<table id="slideshowtable" width="960" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td width="208" valign="top"> 
      <div align="left">
	  
	  <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 188, 155, 0, 3000, 0)
fadeimages.bgposition = function(){
	document.getElementById('canvas0_0').style.backgroundPosition = document.getElementById('canvas0_1').style.backgroundPosition =
	'-' + document.getElementById('slideshowtable').offsetLeft + 'px -8px';
}
fadeimages.bgposition();
document.onreadystatechange = fadeimages.bgposition;
window.onresize = fadeimages.bgposition;
</script>
	  
	  </div>
    </td>
    <td width="579" valign="top"><a hr . . .

**vegeman** · 07-21-2012, 07:04 PM

Hi John,

Thanks, that got me a little closer, however the flower background is now off a bit. In the CSS you provided, I tried adjusting the value of background: url("http://boulderdrumstudio.com/omonoia/images/bkgd.jpg") -8px -8px;

I played with the first "-8px" until I got it to line up correctly, but whenever I changed the resolution of the screen, the flower background then changed.

See: http://boulderdrumstudio.com/omonoia/index.htm

Is there a way to show the background relative to the image no matter what screen size resolution I use?

Thanks.

Larry

**jscheuer1** · 07-21-2012, 07:39 PM

You forgot to add the id:

Code:

<table id="slideshowtable" width="960" border="0" cellspacing="0" cellpadding="0" align="center">
  <tr> 
    <td width="208" valign="top"> 
      <div align="left">
	  
	  <script type="text/javascript">
//new fadeshow(IMAGES_ARRAY_NAME, slideshow_width, slideshow_height, borderwidth, delay, pause (0=no, 1=yes), optionalRandomOrder)
new fadeshow(fadeimages, 188, 155, 0, 3000, 0)
fadeimages.bgposition = function(){
	document.getElementById('canvas0_0').style.backgroundPosition = document.getElementById('canvas0_1').style.backgroundPosition =
	'-' + document.getElementById('slideshowtable').offsetLeft + 'px -8px';
}
fadeimages.bgposition();
document.onreadystatechange = fadeimages.bgposition;
window.onresize = fadeimages.bgposition;
</script>
	  
	  </div>
    </td>
    <td width="579" valign="top"><a hr . . .

If you add that, the added script code will calculate that value (the first -8px, which is just a placeholder) for you, both as the page renders and if the window is resized.

**vegeman** · 07-21-2012, 09:25 PM

That worked perfectly. I don't know how I missed seeing that!

Regardless, you're a genius John. Thanks again for all your help.

I'll be making a donation soon !!!

Have a great weekend...

Larry

Thread: Ultimate Fade-In Slideshow not dissolving properly using transparent Gif's

Thread Tools

Search Thread

Ultimate Fade-In Slideshow not dissolving properly using transparent Gif's

Bookmarks

Bookmarks

Posting Permissions