Need help with my slideshow code

mpirie · 02-19-2012, 01:22 AM

I am trying to put a slideshow into a website I am making for a school assignment, but it's not quite working out. The buttons don't do anything when I click them. I'm just wondering what I'm doing wrong.

Here is my code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
   <title></title>
   <link href="reset-lab5.css" rel="stylesheet" type="text/css" />
   <link href="base-lab5.css" rel="stylesheet" type="text/css" />
   <link href="portstyles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#slideshow-area, #slideshow-scroller {
  width: 600px;
  height: 466px;
  position: relative;
  overflow: hidden;
  margin: 0 auto;
}
#slideshow-area {
  border: 1px solid #000;
}
#slideshow-holder 
{
    height: 600px;
}

#slideshow-previous, #slideshow-next {
        width: 50px;
        height: 50px;
        position: absolute;
        top: 225px;
        display: none;
        cursor: pointer;
        cursor: hand;
        background-image: url(images/arrow_right.png);
        background-color: transparent;
        background-repeat: no-repeat;
        background-position: 50% 50%;
}

#slideshow-next {
        display: block;
        top: 156px;
        right:1px;
        background-color: transparent;
        background-image: url(images/arrow_right.png);
        background-repeat: no-repeat;
        background-position: 50% 50%;
}

.slideshow-content 
{
	width:600px;
    float: left;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<script type="text/javascript">
    var totalSlides = 3;
    var currentSlide = 1;
    var contentSlides = "";

    $(document).ready(function() {

        var totalWidth = 600px;
        contentSlides = $(".slideshow-content");
        window.setInterval('autoScroll()', 4000);

    });

    function autoScroll() {
        //currentSlide--;
        if (currentSlide < 2) {
           currentSlide++;
           updateContentHolder();
           updateButtons();
       }
       else if (currentSlide == 2) {
           currentSlide = 1;
           updateContentHolder();
           updateButtons();

       }
   }

   function showPreviousSlide() {
       currentSlide--;
       updateContentHolder();
       updateButtons();
   }

   function showNextSlide() {
       currentSlide++;
       updateContentHolder();
       updateButtons();
   }

   function updateContentHolder() {
       var scrollAmount = 0;
       contentSlides.each(function(i) {
           if (currentSlide - 1 > i) {
                scrollAmount += this.clientWidth;
            }
        });
        $("#slideshow-scroller").animate({ scrollLeft: scrollAmount }, 1000);
    }

    function updateButtons() {
        if (currentSlide < totalSlides) {
           $("#slideshow-next").show();
       } else {
           $("#slideshow-next").hide();
       }
       if (currentSlide > 1) {
            $("#slideshow-previous").show();
        } else {
            $("#slideshow-previous").hide();
        }
    }
</script>
</head>
<body>
<div id="container">	
	<div id="banner">
	 <img src="images/academyawards-header.jpg" width="960" height="200" alt="academy_awards_logo" />
	</div>		
<div id="innerwrap">
<div id="main">
<div id="slideshow-area">
  <div id="slideshow-scroller">
    <div id="slideshow-holder">
      <div class="slideshow-content">
        <img src="images/img01.jpg" />
      </div>
      <div class="slideshow-content">
        <img src="images/img02.jpg" />
      </div>
      <div class="slideshow-content">
        <img src="images/img03.jpg" />
      </div>
    </div>
  </div>
  <div id="slideshow-previous"></div>
  <div id="slideshow-next"></div>
</div>
</div>		
</div>
<div id="footer">
<p></p>
</div>
</div>
</body>
</html>

devnull69 · 02-19-2012, 08:36 AM

For a start: To use jQuery UI you must also include jQuery. Also the order is important (first jQuery then jQuery UI). And: jQuery UI will most probably need its CSS file, too.

Magic Toolbox · 02-20-2012, 01:03 AM

Or use a slideshow that does not require any other scripts, for example Magic Slideshow.

http://www.magictoolbox.com/magicslideshow/integration/

Easy to install and the free license for school projects is here:

http://www.magictoolbox.com/license/#free