SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slideshow Javascript Troubleshooting

    I have implemented a script that successfully changes the image and is capable of changing the anchor tag, alt tag and title tag but I cannot get it to work successfully. Can anyone tell me why?

    Here is the script:
    Code:
    var p = Pic.length;
    var preLoad = new Array();
    for (i = 0; i < p; i++){
       preLoad[i] = new Image();
       preLoad[i].src = Pic[i];
    }
    
    var t;
    var arrIndex = 1;
    var changeImg = true;
    
    //change the opacity for different browsers
    function changeOpac(opacity, id) 
    {
        var object = document.getElementById(id).style;
        object.opacity = (opacity / 100);
        object.MozOpacity = (opacity / 100);
        object.KhtmlOpacity = (opacity / 100);
        object.filter = "alpha(opacity=" + opacity + ")";
    }
    
    function switchImage()
    {	
    	var speed = Math.round(millisec / 1000);
        var timer = 0;
    	if(changeImg)
    	{
    		document.getElementById('slideshow-img').src = Pic[arrIndex];
    		document.getElementById('slideshow-img').alt = Alt[arrIndex];		
    		document.getElementById('slideshow-link').href = Url[arrIndex];		
    		document.getElementById('slideshow-link').title = Alt[arrIndex];		
    		changeImg = false;
    		for(i = 0; i <= 100; i++)
    		{
    			setTimeout("changeOpac(" + i + ",'" + "slideshow-img" + "')",(timer * speed));
    			timer++;
    		}
    	}
    	else
    	{
    		document.getElementById('slideshow-div').style.backgroundImage = "url(" + Pic[arrIndex] + ")";
    		document.getElementById('slideshow-img').alt = Alt[arrIndex];		
    		document.getElementById('slideshow-link').href = Url[arrIndex];		
    		document.getElementById('slideshow-link').title = Alt[arrIndex];		
    		changeImg = true;
    		for(i = 100; i >= 0; i--) 
    		{
    			setTimeout("changeOpac(" + i + ",'" + "slideshow-img" + "')",(timer * speed));
    			timer++;
    		}
    	}
    	arrIndex++;
    	if(arrIndex == Pic.length) arrIndex = 0;
    	t = setTimeout("switchImage()", (millisec*2));
    }
    
    function runslideshow()
    {
    	
    	//Initialize slideshow with both images matching
    	document.getElementById('slideshow-div').style.backgroundImage = "url(" + Pic[0] + ")";
    	document.getElementById('slideshow-img').src = Pic[0];
    	document.getElementById('slideshow-img').alt = Alt[0];		
    	document.getElementById('slideshow-link').href = Url[0];		
    	document.getElementById('slideshow-link').title = Alt[0];		
    	
    	setTimeout("switchImage()", millisec);
    }

    And here is the settings file:
    Code:
    var Pic = new Array();
    
    Pic[0] = 'i/gfx_weekly-specials1.png';
    Pic[1] = 'i/gfx_weekly-specials2.png';
    
    var Alt = new Array();
    
    Alt[0] = 'Weekly Specials 123';
    Alt[1] = 'Weekly Specials 456';
    
    var Url = new Array();
    
    Url[0] = 'specials/';
    Url[1] = 'new-specials/';
    
    var millisec = 4000;
    And here it is within the HTML document:
    HTML 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>
    <title>Car Dealer</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" language="javascript" src="j/jquery-1.3.2.min.js" ></script>
    <script type="text/javascript" language="javascript" src="j/fader-settings.js"></script>
    <script type="text/javascript" language="javascript" src="j/global.js"></script>
    <link type="text/css" rel="stylesheet" href="c/style.css" />
    <!--[if IE]>
    <link type="text/css" rel="stylesheet" href="c/ie.css">
    <![endif]-->
    <!--[if lt IE 7.]>
    <script defer type="text/javascript" language="javascript" src="j/pngfix.js"></script>
    <![endif]-->
    </head>
    <body onLoad="runslideshow();">
    <div id="wrapper">
    
    .......................
    
        <div id="slideshow-div">
        	<a href="specials/" id="slideshow-link" name="slideshow-link" title="Weekly Specials"><img src="i/gfx_weekly-specials_bkg.png" id="slideshow-img" name="slideshow-img" width="305" height="273" alt="Weekly Specials" class="imageTrans" border="0" /></a>
        </div><!--end slideshow-div-->
        
    ......................

    And here is a link to the page in question:
    LINK-
    http://www.securehostserver.info/rvf/


    Thanks in advance!
    Todd
    Todd Temple > T2 Design

  2. #2
    SitePoint Addict Zarin Denatrose's Avatar
    Join Date
    Jan 2009
    Location
    Surrey BC, Canada
    Posts
    309
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code JavaScript:
    //Line 39 in global.js:
    document.getElementById('SlideShowImg').alt = Alt[arrIndex];
    //should read
    document.getElementById('slideshow-img').alt = Alt[arrIndex];		
     
    //You have similar errors in the two lines that follow:
    document.getElementById('SlideShowLink').href = Url[arrIndex];		
    document.getElementById('SlideShowLink').title = Alt[arrIndex];
     
    //Should be:
    document.getElementById('slideshow-link').href = Url[arrIndex];		
    document.getElementById('slideshow-link').title = Alt[arrIndex];

  3. #3
    SitePoint Guru Todd Temple's Avatar
    Join Date
    Mar 2005
    Location
    Tennessee
    Posts
    797
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Awesome! I really appreciate you finding these errors! You are a life saver!
    Todd Temple > T2 Design


Bookmarks

Posting Permissions

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