Jump to content

JavaScript in Custom Store Copy


James

Recommended Posts

I hope this is the right spot for this...

 

I am putting a JavaScript Slideshow on our home page and am running into a problem. I assume that the JavaScript isn't loading correctly because the images aren't "sliding".

 

Being that I'm a JS novice, I assume that I've done something wrong.

 

Here's my code:

 <div id="slideshow">
  <div>
    <img src="http://www.pennylanepublishing.com/wp-content/uploads/2012/12/PERS_COW197.jpg">
  </div>
  <div>
    <img src="http://www.pennylanepublishing.com/wp-content/uploads/2012/12/PERS_Cust_Canvas.jpg">
  </div>
</div>

<style type="text/css">

#slideshow { 
   margin: 50px auto; 
   position: relative; 
   width: 584px; 
   height: 312px; 
   padding: 10px; 
   box-shadow: 0 0 20px rgba(0,0,0,0.4); 
}

#slideshow > div { 
   position: absolute; 
   top: 10px; 
   left: 10px; 
   right: 10px; 
   bottom: 10px; 
}
</style>


<script type="text/javascript">
$("#slideshow > div:gt(0)").hide();

setInterval(function() { 
 $('#slideshow > div:first')
   .fadeOut(1000)
   .next()
   .fadeIn(1000)
   .end()
   .appendTo('#slideshow');
},  3000);

</script>

 

Here's a link to the site:

http://marcomcentral.app.pti.com/pennylane/pennylanepersonalized/home.aspx?uigroup_id=16079

Link to comment
Share on other sites

  • 2 months later...
  • 1 year later...
×
×
  • Create New...