Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help with my slideshow code

    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>
    Last edited by VIPStephan; 02-19-2012 at 03:08 PM. Reason: wrapped code BB tags

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    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.

  • #3
    New Coder
    Join Date
    May 2008
    Location
    Europe
    Posts
    29
    Thanks
    0
    Thanked 0 Times in 0 Posts

    JavaScript Slideshow

    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
    Magic Toolbox - spice up your website


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •