how do i add fading images to main index

[rommany]

Hello,

 

I have seen a few site here use fading images on the main page, i have the program but when i have tried to add it, it keeps messing up my site, i would like to wrap the main page words around it, but am totally lost how i go about doing this.

 

if anyone has done this before and can give me a hand i would be most grateful

 

King regards

[Guest]

There are some nice javascripts at dynamicdrives.com. They are free! The instructions are simple but adding them to your site can mess up the php and/or the tables. Hre's mine:

This is in the head of index.php:

<script language="JavaScript1.1">
<!--

//*****************************************
// Blending Image Slide Show Script- 
// ? Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//*****************************************

//specify interval between slide (in mili seconds)
var slidespeed=3000

//specify images
var slideimages=new Array("images/clematis_purpurea_plena_elegans.jpg","images/rosa_josephs_coat.jpg","images/clematis_montana_grandiflora.jpg","images/lonicera_periclymenum_belgica.jpg","images/rosa_america.jpg","images/akebia_quinata.jpg","images/aster_carolinianus.jpg","images/rosa_flutterbye.jpg")

//specify corresponding links
var slidelinks=new Array("http://www.gardenvines.com/catalog/product_info.php?products_id=46","http://www.gardenvines.com/catalog/product_info.php?cPath=24&products_id=141","http://www.gardenvines.com/catalog/product_info.php?cPath=21_28&products_id=42","http://www.gardenvines.com/catalog/product_info.php?cPath=22&products_id=111","http://www.gardenvines.com/catalog/product_info.php?cPath=24&products_id=131","http://www.gardenvines.com/catalog/product_info.php?cPath=25&products_id=206","http://www.gardenvines.com/catalog/product_info.php?cPath=26&products_id=153","http://www.gardenvines.com/catalog/product_info.php?cPath=24&products_id=137")

var newwindow=0 //open links in new window? 1=yes, 0=no

var imageholder=new Array()
var ie=document.all
for (i=0;i<slideimages.length;i++){
imageholder[i]=new Image()
imageholder[i].src=slideimages[i]
}

function gotoshow(){
if (newwindow)
window.open(slidelinks[whichlink])
else
window.location=slidelinks[whichlink]
}

//-->
</script>

And this is in the body:

      <td align="center">
   <td height="335" width="335"><a href="javascript:gotoshow()"><img src="images/clematis_purpurea_plena_elegans.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=335 height=335></a>

<script language="JavaScript1.1">
<!--

var whichlink=0
var whichimage=0
var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0
function slideit(){
if (!document.images) return
if (ie) document.images.slide.filters[0].apply()
document.images.slide.src=imageholder[whichimage].src
if (ie) document.images.slide.filters[0].play()
whichlink=whichimage
whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0
setTimeout("slideit()",slidespeed+blenddelay)
}
slideit()

//-->
</script>
     
     

               </td>

Now, i can't tell you exactly where to put it but you need to place it in such a way that it doesn't break tables (I think I added the table dividers) or php calls. Also, change the images and links or you'll be sending folks to my site.

Then again... :lol:

Good luck!

[rommany]

Hi,

 

My store is live but at the moment it looks rubbish due to this fading image, i have put the coding in cactalog/index.php but can not get the image where i would like it plus the image is on all pages and all i really wanted was to have it on the main page.

 

i would like to put the image something like this

 

 

welcome to jellybabys image

xxxxxxxxxxxxxxx

xxxxxxxxxxxxxxx

we sell blar blar blar blar xxxxxxxxxxxxxxx

blar blar blar blar balr and xxxxxxxxxxxxxxx

blar blar blar blar balr and xxxxxxxxxxxxxxx

blar blar blar blar balr and

blar blar blar blar balr andblar blar blar blar balr and

blar blar blar blar balr andblar blar blar blar balr and

blar blar blar blar balr andblar blar blar blar balr and

 

and so on but as i said my one looks totally differant than above

 

this is my code in index.php

 

<!-- body //-->

<table border="0" width="100%" cellspacing="3" cellpadding="3">

<tr>

<td width="<?php echo BOX_WIDTH; ?>" valign="top"><table border="0" width="<?php echo BOX_WIDTH; ?>" cellspacing="0" cellpadding="2">

<!-- left_navigation //-->

<td align="center">

<td height="335" width="335"><a href="java script:gotoshow()"><img src="images/clematis_purpurea_plena_elegans.jpg" name="slide" border=0 style="filter:blendTrans(duration=3)" width=133 height=100></a>

 

<script language="JavaScript1.1">

<!--

 

var whichlink=0

var whichimage=0

var blenddelay=(ie)? document.images.slide.filters[0].duration*1000 : 0

function slideit(){

if (!document.images) return

if (ie) document.images.slide.filters[0].apply()

document.images.slide.src=imageholder[whichimage].src

if (ie) document.images.slide.filters[0].play()

whichlink=whichimage

whichimage=(whichimage<slideimages.length-1)? whichimage+1 : 0

setTimeout("slideit()",slidespeed+blenddelay)

}

slideit()

 

//-->

</script>

<?php require(DIR_WS_INCLUDES . 'column_left.php'); ?>

<!-- left_navigation_eof //-->

</table></td>

<!-- body_text //-->

 

If anyone could point me in the right direction i would be so grateful

 

Many thanks

 

Jellybabys.co.uk

[rommany]

sorry the above was meant to look like

 

xxxxxxxxxxxxxxxxxxxxxx image

xxxxxxxxxxxxxxxxxxxxxx image

xxxxxxxxxxxxxxxxxxxxxx image

xxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx

xxxxxxxxxxxxxxxxxxxxxxxxxxxxx