#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2013
    Posts
    14
    Rep Power
    0

    Javascript slideshow help


    I am just trying to do a simple javascript slideshow. And I cant get it to work.

    Html page:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="js/jquery.cycle.all.js"></script>
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    $('#slideshow').cycle({ fx: 'fade'});
    }); 
    </script>
    </head>
    
    <body>
    <div id="slideshow"><img src="images/building.jpg" width="298" height="118" /><img src="images/image03.jpg" width="70" height="70" /><img src="images/image01.jpg" width="300" height="150" /></div>
    </body>
    </html>
    Javascript 1

    Javascript 2

    These are not my javascripts.
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,165
    Rep Power
    184
    Here's what you needed to do; to make this work:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#slideshow').cycle({
    		fx: 'fade'
    	});
    });
    </script>
    </head>
    
    <body>
    <div id="slideshow"><img src="images/building.jpg" width="298" height="118" /><img src="images/image03.jpg" width="70" height="70" /><img src="images/image01.jpg" width="300" height="150" /></div>
    </body>
    </html>
    Below are links to this plugin:

    jQuery Cycle Plugin - Basic Demo

    jQuery Cycle Plugin - Demo(s) & Documentation

IMN logo majestic logo threadwatch logo seochat tools logo