Javascript Slideshow

  • malibu06

    (@malibu06)


    16 years, 4 months ago

    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

    <!--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

    (@songdogtech)

    16 years, 4 months ago

    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

    (@malibu06)

    16 years, 4 months ago

    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

    (@songdogtech)

    16 years, 4 months ago

    Try using Firebug with FireFox to check to see if all scripts and images are loading OK.

    Mark Ratledge

    (@songdogtech)

    16 years, 4 months ago

    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

    (@malibu06)

    16 years, 4 months ago

    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

    (@songdogtech)

    16 years, 4 months ago

    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

    (@malibu06)

    16 years, 4 months ago

    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

    (@songdogtech)

    16 years, 4 months ago

    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