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. #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    29,698
    Thanks
    93
    Thanked 4,947 Times in 4,908 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.
    Be yourself. No one else is as qualified.

  3. #3
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    6,097
    Thanks
    30
    Thanked 837 Times in 835 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 Bullets not showing and incomplete slideshow 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
  •