fadeslideshow + vbulletin Header

[beach987]

1) Script Title: fadeslideshow

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex14/fadeinslideshow.htm

3) Describe problem: I have a vbulletin site that has a static header as a single image with an image map for links. The header image is a png with transparency to allow the background color to come through. It is set within a table and the image dynamically sizes up or down to match the table width to account for different resolutions or using ctrl+ or ctrl- . This all works fine.

I want to replace the static header images with a fading slideshow but want to retain the transparency of the png to allow the background color to come through and I want it to dynamically resize, same as the static image.

I have gotten the slide show to load in lieu of the static image (or along with) outside of the table.

How would I do this? Thanks in advance for your help.

Here is my vBulletin header code. As it is written now, it will set the slide show with a black background over the top of the static header. I have also attached the fadeslideshow.js that has the array called out within.


<!-- logo -->
<a name="top"></a>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://986sig.pca.org/forum/js/fadeslideshow.js"></script>


<table border="0" width="$stylevar[outertablewidth]" cellpadding="0" cellspacing="0" align="center">
<tr>

<!div id="fadeshow1">
</div>


<td align="$stylevar[center]"><img src="http://986sig.pca.org/forum/images/header/header1.png" border="0" width="100%" align="center" alt="" usemap="#header_links" /></td>



<map name="header_links">
<area shape="circle" coords="81,130,40" href="http://www.pca.org" target= "_blank" title="Porsche Club of America"/>
<area shape="rect" coords="1094,56,1378,238" href="http://986sig.pca.org/forum/index.php" title="PCA Boxster Register"/>
<area shape="rect" coords="364,56,747,234" href="http://www.porsche.com/usa/models/boxster/" target= "_blank" title="Porsche USA - Boxster"/>
</map>

</tr>
</table>
<!-- /logo -->

<!-- content table -->
$spacer_open

$_phpinclude_output

$ad_location[ad_header_end]

[beach987]

I was able to make this work in the header of vBulletin. However, I had to set the background color of the slide images to match the color of the "Body" of vBulletin and set the background color in fadeslideshow.js to the same color. I also had to fix the size of Vbulletin rather than letting it shrink or grow depending on whether is is wide screen or resolution change.

It would be nice to have transparency in fadeslideshow to allow background color/images through and to allow dynamic resizing of the slide show.

However, until that is achieved, I have implemented fadeslideshow into the vBulletin header and it works nicely.

[mlangone]

If you go into the fadeslideshow.js and change background:'black' to background:'transparent' this will allow for the .pngs to show correctly.. tested in IE9,8,7 FF and Chrome

Cheers!