View Full Version : Add a fade effect transition to a slideshow

09-21-2012, 09:14 AM
Hi Folks,
I pretty know anything about coding, I'm doing my website with Golive, and basically I have managed to create a slideshow that start automatically when the page is loading. My problem is that the slideshow golive provide me with has no fade transition between the slides making it a bit old fashion.
So I was wondering if there would be someone out there that could help me out and add to my code the necessary lines in order to get the fade effect.
Here is my code below (as I first told you I know anything about coding, so if you could just tell what to add and where, I would be grateful)
A big thanks to all.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
<meta name="generator" content="Adobe GoLive">
<title>Untitled Page</title>
<csactionitem name="58CC2BF5"></csactionitem>
<csscriptdict import>
<script type="text/javascript" src="file:///C:/Users/Fran%e7ois/AppData/Roaming/Adobe/Adobe%20GoLive/Settings7/JScripts/GlobalScripts/CSScriptLib.js"></script>
<script type="text/javascript"><!--
var preloadFlag = false;
function preloadImages() {
if (document.images) {
pre_portfolio_s = newImage('../images/boutons/portfolio_s.gif');
pre_contact_s = newImage('../images/boutons/contact_s.gif');
pre_lagence_s = newImage('../images/boutons/lagence_s.gif');
preloadFlag = true;
CSInit[CSInit.length] = new Array(CSSlideShowAuto,/*CMP*/ 'diapo001',12,4,true);

// --></script>
<csaction name="58CC2BF5" class="SlideShowAuto" type="onload" val0="diapo001" val1="12" val2="4" val3="true"></csaction>

<body onload="CSScriptInit();preloadImages();" background="../images/image_de_fond/image_fond.gif" bgcolor="#ffffff" leftmargin="0" marginheight="0" marginwidth="0" topmargin="0">
<table width="1000" border="0" cellspacing="0" cellpadding="0" align="center" cool gridx="2" gridy="2" height="1000" showgridx showgridy usegridx usegridy>
<tr height="6">
<td width="125" height="60" rowspan="2"></td>
<td width="874" height="6" colspan="3"></td>
<td width="1" height="6"><spacer type="block" width="1" height="6"></td>
<tr height="54">
<td width="874" height="54" colspan="3" valign="top" align="left" xpos="125"><img src="../images/boutons/atelier_rav_arch_design.gif" alt="" height="40" width="400" border="0"></td>
<td width="1" height="54"><spacer type="block" width="1" height="54"></td>
<tr height="425">
<td width="999" height="425" colspan="4" valign="top" align="left" xpos="0"><img src="../images/pageaccueil/diapo001.gif" alt="" name="diapo001" height="414" width="999" border="0"></td>
<td width="1" height="425"><spacer type="block" width="1" height="425"></td>
<tr height="1">
<td width="192" height="514" colspan="2" rowspan="5"></td>
<td width="119" height="1"></td>
<td width="688" height="514" rowspan="5" valign="top" align="left" xpos="311"><img src="../images/boutons/barreverti.gif" alt="" height="125" width="4" border="0"></td>
<td width="1" height="1"><spacer type="block" width="1" height="1"></td>
<tr height="26">
<td width="119" height="26" valign="top" align="left" xpos="192"><img src="../images/boutons/accueil_ss.gif" alt="" height="20" width="110" border="0"></td>
<td width="1" height="26"><spacer type="block" width="1" height="26"></td>
<tr height="26">
<td width="119" height="26" valign="top" align="left" xpos="192"><a onmouseover="changeImages('lagence','../images/boutons/lagence_s.gif');return true" onmouseout="changeImages('lagence','../images/boutons/lagence.gif');return true" href="page_lagence_presa.html"><img id="lagence" src="../images/boutons/lagence.gif" alt="" name="lagence" height="20" width="110" border="0"></a></td>
<td width="1" height="26"><spacer type="block" width="1" height="26"></td>
<tr height="26">
<td width="119" height="26" valign="top" align="left" xpos="192"><a onmouseover="changeImages('portfolio','../images/boutons/portfolio_s.gif');return true" onmouseout="changeImages('portfolio','../images/boutons/portfolio.gif');return true" href="#"><img id="portfolio" src="../images/boutons/portfolio.gif" alt="" name="portfolio" height="20" width="110" border="0"></a></td>
<td width="1" height="26"><spacer type="block" width="1" height="26"></td>
<tr height="435">
<td width="119" height="435" valign="top" align="left" xpos="192"><a onmouseover="changeImages('contact','../images/boutons/contact_s.gif');return true" onmouseout="changeImages('contact','../images/boutons/contact.gif');return true" href="#"><img id="contact" src="../images/boutons/contact.gif" alt="" name="contact" height="20" width="110" border="0"></a></td>
<td width="1" height="435"><spacer type="block" width="1" height="435"></td>
<tr height="1" cntrlrow>
<td width="125" height="1"><spacer type="block" width="125" height="1"></td>
<td width="67" height="1"><spacer type="block" width="67" height="1"></td>
<td width="119" height="1"><spacer type="block" width="119" height="1"></td>
<td width="688" height="1"><spacer type="block" width="688" height="1"></td>
<td width="1" height="1"></td>


09-21-2012, 01:34 PM
I'm not trying to be obnoxious, but you've posted your question in the wrong forum. This is for offering completed and fully functional scripts to others. Read the sticky at the top. A moderator will eventually move this thread to where it should be. Just a heads-up.

Also, please encapsulate your code in code tags. You can highlight all the code and then click the "#" button at the top of the edit window to do this. Makes things much easier to read.