Title: Javascript Slideshow
Last modified: August 19, 2016

---

# Javascript Slideshow

 *  [malibu06](https://wordpress.org/support/users/malibu06/)
 * (@malibu06)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/)
 * I have a simple slideshow that works great in basic HTML.
 * I’ve tried porting it over to my wordpress theme, but cannot get it to work. 
   I believe the problem lies in the fact that image url for the slideshow is embedded
   in my CSS file like so:
    `#header_img{height:501px;background:transparent url(
   topsection1a.png) no-repeat scroll 0% 0%;}`
 * I’ve placed the Javascript code in my header.php file as below. The other js 
   files are on the server where they should be.
 * Is there a way to get this slideshow to function while maintaining the integrity
   of my CSS? Thanks!!
 * the dev site is at [http://www.babybottlebuddy.com](http://www.babybottlebuddy.com)
 *     ```
       <!--BEGIN JAVASCRIPT SLIDESHOW CODE -->
   
       <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
       <script type="text/javascript" src="rotate.js"></script>
       <script type="text/javascript" src="transition.js"></script>
       <script type="text/javascript">
       <!--
       var image1=new Image()
       image1.src="topsection1a.png"
       var image2=new Image()
       image2.src="topsection1b.png"
       var image3=new Image()
       image3.src="topsection1c.png"
       var image4=new Image()
       image4.src="topsection1d.png"
       //-->
       </script>
   
       <link href="jquery-1.3.2.min.js.css" rel="stylesheet" type="text/css">
       <link href="rotate.js.css" rel="stylesheet" type="text/css">
       <link href="transition.js.css" rel="stylesheet" type="text/css">
   
       <!-- SECOND SET JAVASCRIPT SLIDESHOW CODE -->
   
       <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<4)
       step++
       else
       step=1
       //call function "slideit()" every 2.5 seconds
       setTimeout("slideit()",4500)
       }
       slideit()
   
       //-->
       </script>
       ```
   

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * (@songdogtech)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272300)
 * You’re missing all the required directory paths in both the javascript and the
   CSS. I.e. `image1.src="topsection1a.png"` isn’t going to work; it needs to be
   something like image1.src=”../wp-content/themes/actor/images/topsection1a.png”
   or where ever the images are located.
 * And you’re probably running into a jQuery conflict as you’re loading jQuery twice.
 *  Thread Starter [malibu06](https://wordpress.org/support/users/malibu06/)
 * (@malibu06)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272316)
 * Hi Songdog,
    not sure, but all of the files (javascript, jquery, and image files
   for this script) are all in the same folder —>
 * ../wp-content/themes/actor
 * so I’m thinking it is something else.
 * It ran perfectly on my test html file…
 * any other ideas? my thought is that the problem is with the CSS background image
   url not being able to “play” the script the way it is set up…
    `#header_img{height:
   501px;background:transparent url(topsection1a.png) no-repeat scroll 0% 0%;}`
 *  [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * (@songdogtech)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272339)
 * Try using [Firebug](http://getfirebug.com/) with FireFox to check to see if all
   scripts and images are loading OK.
 *  [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * (@songdogtech)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272421)
 * And realize you’re probably running into a jQuery conflict as you’re loading 
   jQuery twice, once for the slideshow and once by WordPress.
 *  Thread Starter [malibu06](https://wordpress.org/support/users/malibu06/)
 * (@malibu06)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272454)
 * Thanks for all your help songdog.
 * I’ve got another solution worked out I believe — still using jquery… I’ve put
   the code as follows in my header file:
 *     ```
       <?php wp_head(); ?>
   
       <!--BEGIN JAVASCRIPT SLIDESHOW CODE -->
       <script type="text/javascript" src="http://babybottlebuddy.com/wp-content/themes/actor/actor/jquery-1.3.2.min.js"></script>
       <script type="text/javascript">
       <!--
       var bgArr = ["topsection1a.png", "topsection1b.png", "topsection1c.png", "topsection1d.png" ];
       var i=0;
   
       // Start the slide show
       var interval = self.setInterval("swapBkgnd()", 4000)  
   
       function swapBkgnd() {
        if (i>(bgArr.length-1) ) {
         i=0
         $("#flash").css("background-image", "url("+bgArr[i]+")");
        }
        else {
         $("#flash").css("background-image", "url("+bgArr[i]+")");
        }
        i++;
       };
       //-->
       </script>
   
       </head>
       ```
   
 * My Div that displays the images is #flash.
 * This seems to _WANT_ to work. The first image in the array displays, and then
   cycles away from it, but then no other images load leaving a transparent div.
 * Getting closer here…
 *  [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * (@songdogtech)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272465)
 * Firebug shows the images not loading, so try full paths on the images, i.e. `
   http://babybottlebuddy.com/wp-content/themes/actor/actor/topsection1b.png` Sometimes
   WP requires this due to URL rewriting.
 * If that works, then also delete the jQuery load at the top of the script `<script
   type="text/javascript" src="http://babybottlebuddy.com/wp-content/themes/actor/
   actor/jquery-1.3.2.min.js"></script>` becuase you’re loading it twice and see
   if it still works OK.
 *  Thread Starter [malibu06](https://wordpress.org/support/users/malibu06/)
 * (@malibu06)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272467)
 * Hi Songdog,
    That worked!!
 * Thanks so much!!!!
 * Last thing I need to do is add some code to preload all the images before it 
   starts to loop…
 * Too bad there is not a way to add “rep” or “cred” points on this board!
    Thanks
   again!!
 *  [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * (@songdogtech)
 * [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272468)
 * Glad that worked…. This is enough “cred” for WordPress folks.
 * Might not ahve to preload the images if you reduce their size. Right now they’re
   around 400-500K, so save them at a slightly lower quality in Photoshop and you
   can get their memory size down quite a bit.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Javascript Slideshow’ is closed to new replies.

## Tags

 * [css](https://wordpress.org/support/topic-tag/css/)

 * 8 replies
 * 2 participants
 * Last reply from: [Mark Ratledge](https://wordpress.org/support/users/songdogtech/)
 * Last activity: [16 years, 4 months ago](https://wordpress.org/support/topic/javascript-slideshow/#post-1272468)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics