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
    Jan 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Adding a slideshow in HTML

    Hi,

    I need help please.
    I'm new to web design and I've been trying all day to add a simple slide show to my site.
    I want the slide show to appear next to my company logo and one at a time fade in and out.
    What am I doing worng?
    One image appears the other two I want is not.

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>

    <title>Jozi Model Management: Modelling, promotional & casting agency</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=960, user-scalable=yes"/><title>Index</title>
    <link rel="stylesheet" href="common.css?version=15" type="text/css" />
    <link rel="stylesheet" href="Index.css?version=15" type="text/css" />
    <style type="text/css">
    body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: medium;
    color: #D4AF37;
    }
    body {
    background-color: #000;
    }
    </style>

    </head>
    <body>

    <img id="Image_1" src="Images/JoziModelManagementLogo.jpg" />

    <ul id="navbar_25">
    <li><a href="Index.html">Home</a></li>
    <li><a href="Page 1 Models.html">Models</a>
    <ul>
    <li><a href="Page 1.1 Models males.html">Males</a></li>
    <li><a href="Page 1.2 Models females.html">Females</a></li>
    <li><a href="Page 1.3 Models kids.html">Kids</a></li>
    </ul>
    </li>
    <li><a href="Page 2 Characters.html">Characters</a>
    <ul>
    <li><a href="Page 1.1 Models males.html">Males</a></li>
    <li><a href="Page 1.2 Models females.html">Females</a></li>
    <li><a href="Page 1.3 Models kids.html">Kids</a></li>
    </ul>
    </li>
    <li><a href="Become a Model.html">Become a Model</a></li>
    <li><a href="Booking Form.html">Booking Form</a></li>
    <li><a href="News and Events.html">News and Events</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>

    <SCRIPT LANGUAGE="JavaScript">
    <!--

    /*
    Script by FPMC at http://jsarchive.8m.com
    Submitted to JavaScript Kit (http://javascriptkit.com)
    For this and 400+ free scripts, visit http://javascriptkit.com
    */

    //set image paths
    src = ["IMG_3037900.jpg", "IMG_0172_900.jpg", "_DSC0965v11"]


    //set corresponding urls
    url = ["Images/slideshow/IMG_3037900.jpg", "Images/slideshow/IMG_0172_900.jpg", "Images/slideshow/_DSC0965v11"]

    //set duration for each image
    duration = 4;

    //Please do not edit below
    ads=[]; ct=0;
    function switchAd() {
    var n=(ct+1)%src.length;
    if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
    document["Ad_Image"].src = ads[ct=n].src;
    }
    ads[n=(ct+1)%src.length] = new Image;
    ads[n].src = src[n];
    setTimeout("switchAd()",duration*1000);
    }
    function doLink(){
    location.href = url[ct];
    } onload = function(){
    if (document.images)
    switchAd();
    }
    //-->
    </SCRIPT>

    <A HREF="Images/slideshow/IMG_3037900.jpg" onMouseOver="status=url[ct];return true;"
    onMouseOut="status=''">
    <IMG SRC="Images/slideshow/IMG_0172_900.jpg" NAME="Ad_Image" width="240" height="360" BORDER=0 align="right">
    </A>

    thank you in advance

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,635 Times in 4,597 Posts
    Ummm...that code is *ANCIENT*. You need to find some more modern code.

    In any case, that code makes NO ATTEMPT AT ALL to "fade in" the images. It will only do a WHAM! change the image instantly.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,694
    Thanks
    25
    Thanked 657 Times in 656 Posts
    Things are easier to read and copy if placed in the {code} tags generated by the # located above you in the Message box. This is how the code looks with your logo on top and to the left and a place for a slide show next to it. I left your code for the menu and js alone. Get a slide show that fades in and out here http://www.flabell.com/flash/Fade-In...-Slideshow-282

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    <title>Jozi Model Management: Modelling, promotional & casting agency</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=960, user-scalable=yes"><title>Index</title>
    <link rel="stylesheet" href="common.css?version=15" type="text/css">
    <link rel="stylesheet" href="Index.css?version=15" type="text/css">
    <style type="text/css">
    body,td,th {
    font-family: "Arial Black", Gadget, sans-serif;
    font-size: medium;
    color: #D4AF37;
    }
    body {
    background-color: #000;
    }
    </style>
    
    </head>
    <body>
    
    <div>
      <img id="Image_1" src="Images/JoziModelManagementLogo.jpg" width="240px" height="360px" style="float:left;">
    
      <a href="images/slideshow/img_3037900.jpg" onmouseover="status=url[ct];return true;" onmouseout="status=''">
      <img src="Images/slideshow/IMG_0172_900.jpg" id="ad_image" width="240" height="360" style="float:left;">
      </a>
    </div>
    
    <div style="clear:both;" >
    <ul id="navbar_25">
    	<li><a href="Index.html">Home</a></li>
    	<li><a href="Page 1 Models.html">Models</a>
    	<ul>
    		<li><a href="Page 1.1 Models males.html">Males</a></li>
    		<li><a href="Page 1.2 Models females.html">Females</a></li>
    		<li><a href="Page 1.3 Models kids.html">Kids</a></li>
    	</ul>
    	</li>
    	<li><a href="Page 2 Characters.html">Characters</a>
    	<ul>
    		<li><a href="Page 1.1 Models males.html">Males</a></li>
    		<li><a href="Page 1.2 Models females.html">Females</a></li>
    		<li><a href="Page 1.3 Models kids.html">Kids</a></li>
    	</ul>
    	</li>
    	<li><a href="Become a Model.html">Become a Model</a></li>
    	<li><a href="Booking Form.html">Booking Form</a></li>
    	<li><a href="News and Events.html">News and Events</a></li>
    	<li><a href="#">Contact Us</a></li>
    </ul>
    </div>
    
    <script>
    /*
    Script by FPMC at http://jsarchive.8m.com
    Submitted to JavaScript Kit (http://javascriptkit.com)
    For this and 400+ free scripts, visit http://javascriptkit.com
    */
    src = ["IMG_3037900.jpg", "IMG_0172_900.jpg", "_DSC0965v11"]
    url = ["Images/slideshow/IMG_3037900.jpg", "Images/slideshow/IMG_0172_900.jpg", "Images/slideshow/_DSC0965v11"]
    duration = 4;
    
    //Please do not edit below
    ads=[]; ct=0;
    function switchAd()
    {
    	var n=(ct+1)%src.length;
    	if (ads[n] && (ads[n].complete || ads[n].complete==null))
    	{
    		document["Ad_Image"].src = ads[ct=n].src;
    	}
    	ads[n=(ct+1)%src.length] = new Image;
    	ads[n].src = src[n];
    	setTimeout("switchAd()",duration*1000);
    }
    function doLink()
    {
    	location.href = url[ct];
    }
    onload = function()
    {
    	if (document.images)
    		switchAd();
    }
    </script>
    </body>
    </html>
    And the bullets are showing. Please do not double post http://www.codingforums.com/showthread.php?t=285453 You get too many answers that don't make sense.
    Last edited by sunfighter; 01-08-2013 at 08:27 PM.


  •  

    Posting Permissions

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