JavaScript - Slideshow Problems

Hi,

I desperately need a javascript slideshow that does the following:

1--shows still images with thumbnails
2--can be played manually or automatically
3--can embed youtube videos
4--audio can accompany slideshows
5--powered by javascript, not Flash so it shows up on iPad

Does anyone know where I can get such a slideshow? Thanks

Hello. I was wondering where I can find something like this:



It's a slideshow. I need one for my site. Thank you.

Hello everybody!

first of all I must specify that I don't know almost anything about javascript... I'm trying to introduce a javascript slideshow (I found a free one) on our website and I have a problem:

As you can see here on the bottom of the page (http://www.comelity.com/en/pages/about-us.php), when the slideshow changes image, it puts a link over the image without any reason and if you click on the image it reloads the page... I would like to remove this link, but I'm not able... Does anyone know how to solve the problem? I can send the javascript slideshow if you want...

Thank you very much!

S.P.

This slideshow has a drop down menu that lets you go from one picture to another.

Can someone help me modify it so that instead of a dropdown menu i have a list of numbers (horizontally,not vertically)?

I know absolutley nothing about javascript. sorry.

Thanks programmers!

<!-- configurable script -->
<script type="text/javascript">
theimage = new Array();

theimage[0]=["url", "", "1"];
theimage[1]=["url", "", "2"];
theimage[2]=["url", "", "3"];

//###########################################
window.onload=function(){

//preload images into browser
preloadSlide();

//"jump to" box
for (y=0;y<theimage.length;y++) {
document.slideshow.imgComboBox[y]=new Option(theimage[y][2]);
}

//set the first slide
SetSlide(0);

}

//###########################################
function SetSlide(num) {
//too big
i=num%theimage.length;
//too small
if(i<0)i=theimage.length-1;

//switch the image
document.images.imgslide.src=theimage[i][0];

//if drop down box
if(document.slideshow.imgComboBox){
document.slideshow.imgComboBox.selectedIndex = i;
}

//if they want name of current slide
document.getElementById('slidebox').innerHTML=theimage[i][2];

}


//###########################################
function PlaySlide() {
if (!window.playing) {
PlayingSlide(i+1);
if(document.slideshow.play){
document.slideshow.play.value=" Stop ";
}
}
else {
playing=clearTimeout(playing);
if(document.slideshow.play){
document.slideshow.play.value=" Play ";
}
}
// if you have to change the image for the "playing" slide
if(document.images.imgPlay){
setTimeout('document.images.imgPlay.src="'+imgStop+'"',1);
imgStop=document.images.imgPlay.src
}
}


//###########################################
function PlayingSlide(num) {
playing=setTimeout('PlayingSlide(i+1);SetSlide(i+1);', playspeed);
}


//###########################################
function preloadSlide() {
for(k=0;k<theimage.length;k++) {
theimage[k][0]=new Image().src=theimage[k][0];
}
}


</script>


<!-- slide show HTML -->
<form name="slideshow">

<table border="1" cellpadding="2" cellspacing="0">
<tr>
<td align="center">
<a href="#" onmouseover="this.href=theimage[i][1];return false">
<script type="text/javascript">
document.write('<img name="imgslide" id="imgslide" src="'+theimage[0][0]+'" border="0">')
</script>
</a>
</td>
</tr>
<tr>
<td align="center"><div id="slidebox"></div></td>
</tr>
<tr>
<td align="center">
<select name="imgComboBox" onchange="SetSlide(document.slideshow.imgComboBox.selectedIndex);"></select>
</td>
</tr>
</table>

</form>
<!-- end of slide show HTML -->

Hey im looking to get 3 slide shows on 1 website (coded in php).

I need the slide shows to all show different images however all change images at the exact same time and have the exact same layout... how can i do this?

I am having a problem with my homework assignment and can not figure out the problem. Debug comes back clean and I am stumped on this project for several hours. I hate asking for help and like to figure it out on my own, but I can not seem to know what the problem is. I have done alerts in my blocks of code and everything is coming back.

Here is the book and the case problem I am on:
http://books.google.com/books?id=BeE...page&q&f=false

Basically the images is not loading up, or anything is happening.

//EDIT : I have the function setup() onLoad in the body ( body onload="setup()" )

Here is my code:

FileName: flibrary.js

Code:

function getStyle(object, styleName) {
   if (window.getComputedStyle) {
      return document.defaultView.getComputedStyle(object, null).getPropertyValue(styleName);
   } else if (object.currentStyle) {
      return object.currentStyle[styleName]
   }
}

// step 3
function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
            object.addEventListener(evName, fnName, cap);
}
//step 4
function addEvent(object, evName, fnName, cap) {
   if (object.detachEvent)
       object.detachEvent("on" + evName, fnName);
   else if (object.removeEventListener)
            object.removeEventListener(evName, fnName, cap);
}

FileName: slideshows.js
Code:

/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 6
   Case Problem 2

   Author:  
   Date:    

   Filename: slideshow.js


   Global Variables:
  
   scrollButton
      References the scrolling button in the slide show

   diffX
      Stores the horizontal distance in pixels between the
      mouse pointer when the scrolling button is clicked
      and the left edge of the scrolling button.

   Functions List:

   setup()
      Initializes the contents of the Web page. Creates
      event handlers for the mouse and keyboard events

   grabIt(e)
      "Grabs" the scrolling button to set up the
       horizontal scrolling of the slide show

   moveIt(e)
      Moves the scrolling button horizontally through
      the scrollbar

   showSlide(x)
      Shows the image corresponding the to the x coordinate
      on the scrollbar

   dropIt(e)
      Drops the scrolling button after the user releases the
      mouse button

   keyShow(e)
      Uses the left and right arrow keys to move the scrolling
      button through the scrollbar

*/

var scrollButton;
var diffX;
// step 7
function setup(){
	scrollButton = document.getElementById("button");
	scrollButton.style.top = getStyle(scrollButton,"top");
	scrollButton.style.left = getStyle(scrollButton,"left");
	scrollButton.style.cursor = "pointer";
	addEvent(scrollButton, "mousedown", grabIt, false);
	addEvent(document, "keydown", keyShow, false);
}	
// step 8
function grabIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	diffX = parseInt(scrollButton.style.left)- mouseX;
	addEvent(scrollButton, "mousemove", moveIt, false);
	addEvent(scrollButton, "mouseup", dropIt, false);
}
// step 9
function moveIt(e){
	var evt = e || window.event;
	var mouseX = evt.clientX;
	var buttonPosX = mouseX - diffX;
	showSlide();
}
// step 10
function showSlide(x){
	if(x<20){
		x = 20;
	}
	if(x>299){
		x = 299;
	}
	scrollButton.style.left = x;
	var i = Math.floor((x-20)/31);
	document.getElementById("photo").src = image[i];
}
// step 11
function dropIt(e){
	removeEvent(scrollButton, "mousemove", moveIt, false);
}
// step 12
function keyShow(e){
	var evt = e || window.event;
	var key = event.keyCode;
	var buttonPosX = scrollButton.style.left;
	if(key == 37) buttonPosX -= 31;
	if(key == 39) buttonPosX += 31;
	showSlide(buttonPosX);
}

I created a slideshow that displays the 5 images randomly. It is for a college project for a class I am in. Here is the HTML for the area that holds the images

Code:

<div id="imageBox">

                <!-- Random Images -->

                <img src="images/image1.jpg" width="200" height="200" alt="School Images" id="randImage" />

                        </div>

and here is the external .js file for it

Code:

window.onload = pics;

var thisPic = 0;

 

        var schoolImages = new Array("images/image1.jpg", "images/image2.jpg", "images/image3.jpg", "images/image4.jpg", "images/image5.jpg");

 

function pics(){

 

       

        thisPic = Math.floor((Math.random() * schoolImages.length));

       

        document.getElementById('randImage').src = schoolImages[thisPic];      

       

        cycle();

       

       

}

 

function cycle(){

       

        thisPic++;

       

        if(thisPic == schoolImages.length){

                thisPic = 0;

        }

       

        document.getElementById('randImage').src = schoolImages[thisPic];

       

        setTimeout(cycle, 3 * 1000);
               
     
}

I had the slideshow working completely fine... then when i finished the rest of the site and added more pages, it is now not working for me. It just sits at the original image that is loaded when they site loads. Does anyone see any issues to what is making this not work correctly now?

hi evey one
I need a slideshow like this website .

zbiddy.com

as you can see , in the top of the page is a slide show . I just need a slideshow that change the content of each slide .

I've made my content for each slide and just need a script that change these content

I need your help very much
Thanks

Hi, i am currently using the below slideshow javascript on one location on a webpage.
http://www.javascriptkit.com/howto/show2.shtml

I have another image on the same webpage, that i would like to turn into a slideshow as well.

My problem is, that as soon as i put the "head" code for the second group of images, none of the slideshows work..

Basically, how can i get two slideshows on one page, using the same script?
If anyone can help me i would really appreciate

Thanks!
srhlb

Hi there,

I have a slideshow that gathers images from a database. I've been trying to set it up to where it extracts the IMG SRC accordingly so when I click on the image, the lightbox shows the corresponding image. But no luck thus far.

Here's what I mean:
Code:

<SCRIPT TYPE="text/javascript">
<!--
SLIDES = new slideshow("SLIDES");

<?php do { ?>
s = new slide();
s.src = '<?php echo $row_paintings['painting']; ?>';
s.text = '<b><?php echo $row_paintings['title']; ?></b><br /><span style="font-size:10px;"><?php echo $row_paintings['material']; ?><br /><?php echo $row_paintings['size']; ?><br /><?php echo $row_paintings['date_created']; ?></span>';
SLIDES.add_slide(s);
<?php
} while ($row_paintings = mysql_fetch_assoc($paintings)); ?>
//-->
</script>

How can I extract the current "s.src" parameter and use it on the "img src" tag to display the image accordingly?

Any help would be much appreciated.

Thanks!

I found the code for how to create a basic slideshow on javascript kit. It tells you the code for 3 images. I am adding more images to my slide show, but when I go to preview it, it loops through the first 3 pictures only. Is there something else I need to change in order to get it to loop through all my pictures?

Here is the code I got from the site:
<html>
<head>
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="firstcar.gif"
var image2=new Image()
image2.src="secondcar"
var image3=new Image()
image3.src="thirdcar.gif"
//-->
</script>
</head>
<body>
<img src="firstcar.gif" name="slide" width="100" height="56" />
<script>
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 2.5 seconds
setTimeout("slideit()",2500)
}
slideit()
//-->
</script>
</body>
</html>

My code looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
<!--
var image1=new Image()
image1.src="Model01.jpg"
var image2=new Image()
image2.src="Model02.jpg"
var image3=new Image()
image3.src="Model03.jpg"
var image4=new Image()
image4.src="Model04.jpg"
var image5=new Image()
image5.src="Model05.jpg"
var image6=new Image()
image6.src="Model06.jpg"
var image7=new Image()
image7.src="Model07.jpg"
var image8=new Image()
image8.src="Model08.jpg"
var image9=new Image()
image9.src="Model09.jpg"
var image10=new Image()
image10.src="Model10.jpg"
var image11=new Image()
image11.src="Model11.jpg"
var image12=new Image()
image12.src="Model12.jpg"
var image13=new Image()
image13.src="Model13.jpg"
var image14=new Image()
image14.src="Model14.jpg"
var image15=new Image()
image15.src="Model15.jpg"
var image16=new Image()
image16.src="Model16.jpg"
var image17=new Image()
image17.src="Model17.jpg"
var image18=new Image()
image18.src="Model18.jpg"
var image19=new Image()
image19.src="Model19.jpg"
var image20=new Image()
image20.src="Model20.jpg"
//-->
</script>

<title>Untitled Document</title>
</head>

<body>
<img src="file:///K|/Michaels Homes Web/Images/Model01.jpg" name="slide" width=500 height=375>
<script type="text/javascript">
<!--
//variable that will increment through the images
var step=1
function slideit(){
//if browser does not support the image object, exit.
if (!document.images)
return
document.images.slide.src=eval("image"+step+".src")
if (step<3)
step++
else
step=1
//call function "slideit()" every 3.0 seconds
setTimeout("slideit()",3000)
}
slideit()
//-->
</script>
</body>
</html>

This is just the code for the slideshow, not any of the code from the rest of my website. It does the same thing when I test it either the code only or the whole webpage.

If I am missing something in the steps, please let me know.
Thanks

Hi,

I need some help with a slideshow script. I have a client who wants a slideshow script similar to BR's site (http://bananarepublic.gap.com/ ). See the part where the big picture is that has the little gray box on the side with the date? My customer wants that to be a slideshow (where the picture is - so multiple pictures fading in/out) with that gray spot over it with the date on it (staying on the slideshow as the pictures move behind it). How would I go about doing this?

I am not an expert in writing Javascript, but I can edit javascript once it's written. If anyone has any tips or can help at all, it'd be much appreciated!

Thanks!

I moved a snippet of my slideshow script to the bottom of the page and the pictures wasn't in a slide anymore, they was in a vertical. I did have three images in the slide, but when that happened I coundnt remember where I got the bit of code from, so I took two images out. This is the whole code for my index.html page.

can someone help me please and tell me what bit of code I take from the bottom, and where it goes with the start of its code at the top. This site was build in 2008 so it's not a template or Wordpress.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Specialist Car Valeting Surrey | Mobile Detailing London Empire</title>
                          <!--Meta Tags-->
<meta name="keywords" content="Empire Mobile Valeting Services, Car Valeting, Car Valeters, Mobile Detailing, Mobile Car Detailers, Car Care Services, Surrey, Specialist Mobile Valeters, Paint Correction, Supercar Detailing, Car Valeters Surrey, Valeters London, Classic Cars, Car Valeting Services, Car Protection, Glass Coating, Valeting Service, Detailers London, Mobile Valeting, Car, London, Valeting, Detailing, Detailers, Services, Mobile, Specialists " >
<meta name="description" content="Empire Mobile Valeting Services Specialist Mobile Car Valeting, Car Detailing Car Valeters are Mobile cover London and Surrey" >
<meta name="robots" content="all" >
<meta name="revisit-after" content="30 days">
<meta name="author" content="Empire Mobile Valeting Services">
<meta http-equiv="Content-Language" content="en-uk">
<meta name="google-site-verification" content="YtyUZbTKSXgXjOOiGbU7g23KkZFrLLo-tMRK6JZOMa8">
<meta name="msvalidate.01" content="541C618D4A943E7767E5B0D92B7FAE2F">
<meta name="viewport" content="width=device-width">
<link rel="apple-touch-icon" href="/filename.png" >
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<link href="style.css" rel="stylesheet" type="text/css" >
<script type="text/javascript">


  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-26041196-1']);
  _gaq.push(['_trackPageview']);


  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
//-->
</script>
<script src='http://fs0.joosee.com/f/js/redirection-mobile.js'></script>
<script>
  SA.redirection_mobile ({
    mobile_scheme: 'http',
    mobile_url : "empiredetailingvaleting1.joosee.com/"
  });
</script>
</head>
<body>
<body onLoad="MM_preloadImages('images/navov_03.gif','images/navov_04.gif','images/navov_05.gif','images/faq0v.gif')">
<div align="center">
  <table width="1000" border="0" align="center" cellpadding="0" cellspacing="0">       
     <tr>
         <td valign="top"><img src="http://codingforums.com/images/car_wash_valeting_01.gif" width="1000" height="163" alt="Car Valeting" title="Car Valeting"></td>
           </tr>
    <tr>
   <td valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr valign="top"> 


        <td><img src="http://codingforums.com/images/car_wash_valeting_02.gif" width="500" height="43" alt="Car Valeting Surrey"></td>
       <td><a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/navov_03.gif',1)"><img src="http://codingforums.com/images/car_wash_valeting_03.gif" alt="Mobile Valeting Services" name="Image5" width="115" height="43" border="0" title="Car Valeters"></a></td>
    <td><a href="services.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/navov_04.gif',1)"><img src="http://codingforums.com/images/car_wash_valeting_04.gif" alt="Detailing Services" name="Image6" width="115" height="43" border="0" title="Car Valeters London"></a></td>
    <td><a href="faqs.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','images/faq0v.gif',1)"><img src="http://codingforums.com/images/faq.gif" alt="Car Detailing London" name="Image8" width="115" height="43" border="0" title="Car Valeting Service"></a></td>
    <td><a href="contact.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','images/navov_05.gif',1)"><img src="http://codingforums.com/images/car_wash_valeting_05.gif" alt="Car Valeting Surrey" name="Image7" width="115" height="43" border="0"></a></td> 
    <td><img src="http://codingforums.com/images/car_wash_valeting_06.gif" width="40" height="43" alt="Car Detailing Surrey" title="Car Valeting Service London"></td>
  </tr>
</table>
</td></tr>
<tr>
      <td valign="top" background="http://codingforums.com/images/mainbg.gif">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr> 
            <td rowspan="2" valign="top"><img src="http://codingforums.com/images/car_wash_valeting_07.gif" width="39" height="390" alt="Mobile Valeting Service"></td>
            <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
                <tr valign="top"> 
                  <td width="41%">
        <div class="slideshow">
        <a href="http://www.empirevaletingservices.co.uk/index.html"><img src="http://codingforums.com/images/sports-car-speeding-6029038.jpg" width="332" height="408" alt="Car Valeters Service" title="Car Valeters Service"></a>    <first image for ref> 
        </div><script type="text/javascript" src="ieupdate.js"></script></td>
                  <td width="59%" background="http://codingforums.com/images/welcome_bg.gif"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr> 
                        <td height="50"><img src="http://codingforums.com/images/car_wash_valeting_09.gif" width="590" height="50" alt="Car Valet Service" title="Car Detailing London"></td>
                      </tr>
                      <tr> 
                        <td><table width="100%" border="0" align="center" cellpadding="10" cellspacing="0">
                            <tr> 
                              <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                  <tr> 
                                   <td width="72%" valign="top" align="left"><h1><font color="99CCFF"><i><b>Specialist Car Valeting</b> &amp;  <b>Detailing in London </b>&amp;<b> Surrey Empire</b></i> </font></h1><p><span class="titles"><font size= 2><a href="http://www.empirevaletingservices.co.uk/services.html">Empire Mobile Valeting Services</a></font></span><font color="#FFFFFF"><strong> delivers the ultimate in <b>car care</b> at affordable prices, from <b>car valeting services</b> through to <b>detailing services</b> in <b>London</b> and <b>Surrey</b>. Whether you need a outside wash to a full <b>paint correction</b>, We are specialists in <b>car valeting</b> and <b>car detailing</b> and all our <b>car valeters</b>  will surpass your expectations and go the extra mile to make your<b> vehicle</b> look its best by using the latest products and techniques. As a <b>mobile valeting</b> and <b>detailing company</b> <b>Empire</b> brings a wide range of <b>car care services</b> to your home or place of work. All our <b>valets</b> and <b>details</b> can be designed for your needs. All <b>vehicles</b> are catered for from your family <b>vehicle</b> upto <b>exotic supercars</b> and <b>classic cars</b>. For  full comprehensive <b>details</b> of our <b>detailing services</b> please give us a call or email and we will be happy to help.<br><br> We cover <b>London</b> and <b>Surrey</b>,  supply all the water, electricity and the latest <b>products</b>. More importantly we have over 35 years experience in  <b>car valeting and detailing</b> and are highly respected in our field. <br><br>As you would expect from a <b>premier company</b> we are fully insured and all <b>car valeters</b> and <b>detailers</b> are fully trained. Our prices reflect the superb <b>service</b> that our <b>London</b> and <b>Surrey</b> based <b>valeters</b> and <b>detailers</b> deliver. We do not allot a time slot to your <b>vehicle</b> our <b>valeters</b> and <b>detailers</b> will work on your <b>car</b> until it looks it's best. All <b>valets</b> and <b>details</b> are to the highest of standards. If you choose <b>Empire</b> for your <b>car care</b> needs you won't be dissapointed. We now accept credit / debit cards via chip and pin machine or over the phone.<br><br><strong>Please visit our <a href="http://carvaletingservice.wordpress.com/226-2/"target="_blank">comments</a> and our <a href="http://carvaletingservice.wordpress.com/gallery/"target="_blank">gallery</a> page.<p><strong><strong><strong>Office  – 0203 689 1825  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Mobile – 07790 937 233 &nbsp;&nbsp;&nbsp; We work 7 days a week!</strong></font>
                                 </tr>
                                </table></td>
                            </tr>
                          </table></td>
                      </tr>
                    </table> </td>
                </tr>
              </table> </td>
            <td rowspan="2" valign="top"><img src="http://codingforums.com/images/car_wash_valeting_10.gif" width="39" height="390" alt="Specialist Mobile Car Valeting" title="Specialist Mobile Car Valeting"></td> 
          </tr>
          <tr valign="top">
            <td height="73" valign="top" background="http://codingforums.com/images/car_wash_valeting_12.gif"><table width="96%" border="0" align="center" cellpadding="9" cellspacing="0">
                <tr> 
                  <td width="41%"><font color="#FFFFFF">&copy;2008 &#8211 Present empirevaletingservices.co.uk. 
                    All rights reserved.</font></td>
                  <td width="59%"><div align="right"><img src="http://codingforums.com/images/tel.gif" width="11" height="8" alt="Specialist Car Valeters"> 
                      <font color="#FFFFFF"><strong>Phone:  0203 689 1825</strong></font>&nbsp;&nbsp;<img src="http://codingforums.com/images/mail.gif" width="11" height="8" alt="Car Valeters">                       
                    <font color="#FFFFFF"><strong>Email:</strong></font> <a href="mailto:info@empirevaletingservices.co.uk" class="white">info@empirevaletingservices.co.uk</a> 
                  </div></td>
                </tr>
                <tr> 
                  <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                      <tr> 
                         <td width="50%"><a href="http://www.facebook.com/Empiremobilevaleting"target="_blank"><b><u>Join us on Facebook</u></b></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <a href="http://carvaletingservice.wordpress.com/"target="_blank"><b><u>Read Our Blog</u></b></a>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  <a href="https://plus.google.com/105765629834503876756/about/"target="_blank"><b><u>Google +</u></b></a></td>
             <td width="16%">
            <a href="http://www.empirevaletingservices.co.uk/contact.html"target="_blank">Car Valeting Services</a> <font color="#999999">: <a href="http://www.empirevaletingservices.co.uk/services.html"target="_blank">Car Detailing</a></font></td>
                      </tr>
                    </table></td>
                </tr>
              </table> 
            </td>
          </tr>
        </table></td>
    </tr>
    <tr>
      <td valign="top"><img src="http://codingforums.com/images/car_wash_valeting_13.gif" width="1000" height="134" alt="Car valeting in London" title="Car valeting in London"></td>
    </tr>
  </table>
</div>
<style type="text/css">
.slideshow { height: 340px; width: 331px; margin: auto }
.slideshow img { padding: 0px; border: 0px solid #ccc; background-color: #eee; }
</style>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js">
</script>
<script type="text/javascript">
     $(document).ready(function() {
    $('.slideshow').cycle({


                                 fx: "fade" // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>


<script language="JavaScript" type="text/JavaScript">


function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}


function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}


function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


</script>


<!-- Go to www.addthis.com/dashboard to customize your tools -->
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5351509a69039d52" async="async"></script>
</body>
</html>

thank you for your help!!!!

I want to repeat the same slideshow next to my working one, and have copied and pasted the same code, but for some reason which I don't understand it is appearing as a still image with no movement, or the 'back' and 'forward' arrows?

Heres my website in testing to show what I mean: http://whnpf.perdu.servertrust.com/

The code is:

Code:

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

</div>
</div>

 <-! ##### SECOND SLIDESHOW NOT WORKING ###### !-> 

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js"></script>

<script type="text/javascript" src="/v/vspfiles/assets/images/stepcarousel.js">

</script>

<style type="text/css">

.stepcarousel{
position: relative; /*leave this value alone*/
float:left;
border: 1px solid GREY;
overflow: scroll; /*leave this value alone*/
width: 313px; /*Width of Carousel Viewer itself*/
height: 262px; /*Height should enough to fit largest content's height*/
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: absolute; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 0px; /*margin around each panel*/
width: 313px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}

</style>



<script type="text/javascript">

stepcarousel.setup({
	galleryid: 'mygallery', //id of carousel DIV
	beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
	panelclass: 'panel', //class of panel DIVs each holding content
	autostep: {enable:true, moveby:1, pause:3000},
	panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
	defaultbuttons: {enable: true, moveby: 1, leftnav: ['/v/vspfiles/assets/images/backward.jpg', 80, 215], rightnav: ['/v/vspfiles/assets/images/forward.jpg', -135, 215]},
	statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
	contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})

</script>


<div id="mygallery" class="stepcarousel">
<div class="belt">

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/POPULAR.jpg" />
</div>

<div class="panel">
<img src="/v/vspfiles/assets/images/HOTDEALS.jpg" />
</div>
[/B]
</div>
</div>

Any help would greatly be appreciated, thanks!

my website is at eduk8africa.org and on the slideshow i need to add arrows to be able to go to the next image. any help code is here : http://pastebin.com/mWNmydQD

this needs to be done QUICK!