www.webdeveloper.com
Results 1 to 5 of 5

Thread: Carousel help - Unique content in each slide

  1. #1
    Join Date
    Oct 2011
    Posts
    42

    Carousel help - Unique content in each slide

    Hi there,
    I put together this carousel using javascript from an old file I had, and I it works as should: When the carousel loads, it goes through each slide, and then lands back on the first slide. The user can then click the buttons to navigate to each slide. The problem is, with my setup, I am unable to put unique HTML within each slide. Everytime I put in HTML code for each slide, the content doesn't show, and the carousel stops working. For example, I want to put another image and unique copy into each slide. Does anyone know how this can work?
    As is, I can only put unformatted text into each slide (shown in the code below).

    See code below:

    Code:
    <style type="text/css">
    .sports-carousel {
    	background-image: url(carousel_bkgd.jpg);
    	height: 458px;
    	width: 980px;
    }
    #slides {
    	height: 415px;
    	width: 736px;
    	margin-top: 20px;
    	float: left;
    	position:relative;
    }
    #thumbnail1 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail2 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail3 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail4 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    	
    }
    #thumbnail5 {
    	height: 74px;
    	width: 192px;
    }
    #thumbnails {
    	height: 411px;
    	width: 192px;
    	margin-top: 20px;
    	margin-left: 20px;
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 20px;
    	cursor: pointer;
    }
    .slide {
    	position:absolute;
    	left:0px;
    	top:0px;
    	height: 415px;
    	width: 736px;
    	float: left;
    }
    #slide-1 {
    	height:415px;
    	width: 736px;
    	background-image:url(sports-nfl.jpg);
    }
    #slide-2 {
    	height:415px;
    	width: 736px;
    	background-image:url(sports-nhl.jpg);
    }
    #slide-3 {
    	height:415px;
    	width: 736px;
    	background-image:url(sports-mlb.jpg);
    
    }
    #slide-4 {
    	height:415px;
    	width: 736px;
    	background-image:url(sports-nba.jpg);
    }
    #slide-5 {
    	height:415px;
    	width: 736px;
    	background-image:url(sports-ncaa.jpg);
    
    }
    #thumbnails IMG{
    	cursor: pointer;
    }
    .default {
    	background-image: url(default.jpg);
    }
    
    .active {
    	background-image: url(active.jpg);
    }
    .hover {
    	background-image: url(hover.jpg);
    }
    </style>
    <script type="text/javascript">
    
    function zxcFade(o){
     var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
     if (obj&&!oop){
      divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
      for (var z0=lgth;z0>=0;z0--){
       divs[z0].style.zIndex=z0<lgth?'0':'1';
       zxcOpacity(divs[z0],z0<lgth?0:100);
       img=tn[z0];
       ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
      }
      for (var z1=0;z1<tn.length;z1++){
       if (tn[z1].nodeType==1){
        tary.push([tn[z1],tn[z1].className+' ']);
        if (tary.length==1){
         tn[z1].className=tn[z1].className+' '+cls;
        }
       }
      }
      zxcFade['zxc'+id]={
       id:id,
       ary:ary,
       tary:tary,
       cls:cls,
       lgth:ary.length-1,
       cnt:0,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2
      }
      zxcAuto(id,o.hold);
     }
    }
    
    function zxcAuto(id,ms){
     var o=zxcFade['zxc'+id];
     if (o){
      o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
     }
    }
    
    function zxcGoTo(id,nu,auto){
     var o=zxcFade['zxc'+id];
     if (o&&o.ary[nu]){
      clearTimeout(o.dly);
      o.auto=auto===true;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1];
      }
      ary[o.cnt][0].style.zIndex='0';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
      o.cnt=nu;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
      }
      ary[o.cnt][0].style.zIndex='1';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
     }
    }
    
    function animate(o,ary,f,t,srt,mS,auto){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      zxcOpacity(ary[0],now);
      ary[1]=now;
     }
     if (ms<mS){
      o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
     }
     else {
      zxcOpacity(ary[0],t);
      ary[1]=t;
      if (o.auto&&t==100){
       if (o.cnt==o.lgth){
        o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
       }
       else {
        zxcAuto(o.id,o.hold);
       }
      }
     }
    }
    </script>
    <script type="text/javascript">
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    window.onload=function(){
    
    zxcFade({
     SlideID:'slides',
     FadeDuration:1000,
     AutoHold:1000,
     ThumbnailID:'thumbnails',
     ActiveClass:'active'
    });
    
    }
    </script>
    <script type="text/javascript">
    function showPopup(url) {
    newwindow=window.open(url,'name','height=445,width=697,top=200,left=300,resizable');
    newwindow.focus();
    }
    </script>
    <div class="sports-carousel">
    <div id="thumbnails">
    	<div id="thumbnail1" class="default"><img src="nfl.png" width="183" height="70" onmouseup="zxcGoTo('slides',0);"></div>
        <div id="thumbnail2" class="default"><img src="nhl.png" width="183" height="70" onmouseup="zxcGoTo('slides',1);"></div>
        <div id="thumbnail3" class="default"><img src="baseball.png" width="183" height="70" onmouseup="zxcGoTo('slides',2);"></div>
        <div id="thumbnail4" class="default"><img src="nba.png" width="183" height="70" onmouseup="zxcGoTo('slides',3);"></div>
        <div id="thumbnail5" class="default"><img src="ncaa.png" width="183" height="70" onmouseup="zxcGoTo('slides',4);"></div>
    </div>
    
    	 <div id="slides">
         <div id="slide-5" class="slide">
    <map name="slide5">slide 5<area shape="rect" coords="88,77,151,130" href="123.jpg" onclick="showPopup(this.href);return(false);"></map></div>
        	
            <div id="slide-4" class="slide">slide 4<map name="slide4"><area shape="rect" coords="88,77,151,130" href="#" onclick="showPopup(this.href);return(false);"></map>
    		</div>
        	<div id="slide-3" class="slide">slide 3<map name="slide3"><area shape="rect" coords="195,161,318,196" href="#" target="_blank" /></map>
            </div>
        	<div id="slide-2" class="slide">slide 2<map name="slide2"><area shape="rect" coords="24,188,146,220" href="#" onclick="showPopup(this.href);return(false);"></map>
    		</div>
        <div id="slide-1" class="slide">slide 1<map name="slide1"><area shape="rect" coords="17,188,111,212" href="#"></map>
         </div>
        </div>
    Thanks so much.

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    .sports-carousel {
    	background-image: url(carousel_bkgd.jpg);
    	height: 458px;
    	width: 980px;
    }
    #slides {
    	height: 415px;
    	width: 736px;
    	margin-top: 20px;
    	float: left;
    	position:relative;
    }
    #thumbnail1 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail2 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail3 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail4 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    
    }
    #thumbnail5 {
    	height: 74px;
    	width: 192px;
    }
    #thumbnails {
    	height: 411px;
    	width: 192px;
    	margin-top: 20px;
    	margin-left: 20px;
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 20px;
    	cursor: pointer;
    }
    .slide {
    	position:absolute;
    	left:0px;
    	top:0px;
    	height: 415px;
    	width: 736px;
    	float: left;
    }
    #slide-1 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/1.gif);
    }
    #slide-2 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
    }
    #slide-3 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
    
    }
    #slide-4 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
    }
    #slide-5 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/5.gif);
    
    }
    #thumbnails IMG{
    	cursor: pointer;
    }
    .default {
    	background-image: url(default.jpg);
    }
    
    .active {
    	background-image: url(active.jpg);
    }
    .hover {
    	background-image: url(hover.jpg);
    }
    </style>
    <script type="text/javascript">
    
    function zxcFade(o){
     var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
     if (obj&&!oop){
      divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
      for (var z0=lgth;z0>=0;z0--){
       divs[z0].style.zIndex=z0<lgth?'0':'1';
       zxcOpacity(divs[z0],z0<lgth?0:100);
       img=tn[z0];
       ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
      }
      for (var z1=0;z1<tn.length;z1++){
       if (tn[z1].nodeType==1){
        tary.push([tn[z1],tn[z1].className+' ']);
        if (tary.length==1){
         tn[z1].className=tn[z1].className+' '+cls;
        }
       }
      }
      zxcFade['zxc'+id]={
       id:id,
       ary:ary,
       tary:tary,
       cls:cls,
       lgth:ary.length-1,
       cnt:0,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2
      }
      zxcAuto(id,o.hold);
     }
    }
    
    function zxcAuto(id,ms){
     var o=zxcFade['zxc'+id];
     if (o){
      o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
     }
    }
    
    function zxcGoTo(id,nu,auto){
     var o=zxcFade['zxc'+id];
     if (o&&o.ary[nu]){
      clearTimeout(o.dly);
      o.auto=auto===true;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1];
      }
      ary[o.cnt][0].style.zIndex='0';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
      o.cnt=nu;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
      }
      ary[o.cnt][0].style.zIndex='1';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
     }
    }
    
    function animate(o,ary,f,t,srt,mS,auto){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      zxcOpacity(ary[0],now);
      ary[1]=now;
     }
     if (ms<mS){
      o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
     }
     else {
      zxcOpacity(ary[0],t);
      ary[1]=t;
      if (o.auto&&t==100){
       if (o.cnt==o.lgth){
        o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
       }
       else {
        zxcAuto(o.id,o.hold);
       }
      }
     }
    }
    </script>
    <script type="text/javascript">
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    window.onload=function(){
    
    zxcFade({
     SlideID:'slides',
     FadeDuration:1000,
     AutoHold:1000,
     ThumbnailID:'thumbnails',
     ActiveClass:'active'
    });
    
    }
    </script>
    </head>
    
    <body>
    <div class="sports-carousel">
    <div id="thumbnails">
    	<div id="thumbnail1" class="default"><img src="nfl.png" width="183" height="70" onmouseup="zxcGoTo('slides',0);"></div>
        <div id="thumbnail2" class="default"><img src="nhl.png" width="183" height="70" onmouseup="zxcGoTo('slides',1);"></div>
        <div id="thumbnail3" class="default"><img src="baseball.png" width="183" height="70" onmouseup="zxcGoTo('slides',2);"></div>
        <div id="thumbnail4" class="default"><img src="nba.png" width="183" height="70" onmouseup="zxcGoTo('slides',3);"></div>
        <div id="thumbnail5" class="default"><img src="ncaa.png" width="183" height="70" onmouseup="zxcGoTo('slides',4);"></div>
    </div>
    
    	 <div id="slides">
           <div id="slide-5" class="slide">
            <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" /></div>
    
            <div id="slide-4" class="slide"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" />
    		</div>
        	<div id="slide-3" class="slide"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" />
            </div>
        	<div id="slide-2" class="slide"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt8.jpg" />
    		</div>
        <div id="slide-1" class="slide"><img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt9.jpg" />
         </div>
        </div>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Oct 2011
    Posts
    42
    Thank you so much Vic! This looks (and works) great with the unique images you put into place.
    But I was really looking for being able to add unique HTML into each slide.
    When I add the unique HTML for each slide, it doesn't seem to work.

    So for example:

    Code:
    <div class="sports-carousel">
    <div id="thumbnails">
    	<div id="thumbnail1" class="default"><img src="nfl.png" width="183" height="70" onmouseup="zxcGoTo('slides',0);"></div>
        <div id="thumbnail2" class="default"><img src="nhl.png" width="183" height="70" onmouseup="zxcGoTo('slides',1);"></div>
        <div id="thumbnail3" class="default"><img src="baseball.png" width="183" height="70" onmouseup="zxcGoTo('slides',2);"></div>
        <div id="thumbnail4" class="default"><img src="nba.png" width="183" height="70" onmouseup="zxcGoTo('slides',3);"></div>
        <div id="thumbnail5" class="default"><img src="ncaa.png" width="183" height="70" onmouseup="zxcGoTo('slides',4);"></div>
    </div>
    
    	 <div id="slides">
           <div id="slide-5" class="slide">
          
          <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NFL Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NFL Channel:</strong> Includes up to 150 live NFL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NFL: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NFL</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
    
            <div id="slide-4" class="slide">
            
            <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NHL Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NHL Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NHL: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NHL Ice</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
        	<div id="slide-3" class="slide">
            
            <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>MLB Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>MLB Channel:</strong> Includes up to 150 live MLB games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>MLB: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>MLB</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	   </div>
           </div>
        
        	<div id="slide-2" class="slide">
            
          <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NBA Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NBA Channel:</strong> Includes up to 150 live NBA games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NBA: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NBA Ice</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
     
          
        	<div id="slide-1" class="slide">
            
    <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NCAA Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NCAA Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NCAA: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NCAA</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
        
        </div>
    </body>
    
    </html>
    Thanks so much for your help!

  4. #4
    Join Date
    Oct 2011
    Posts
    42
    whoops, I didn't post the entire code in the above.
    Here it is:

    Code:
    <style type="text/css">
    .sports-carousel {
    	background-image: url(carousel_bkgd.jpg);
    	height: 458px;
    	width: 980px;
    }
    #slides {
    	height: 415px;
    	width: 736px;
    	margin-top: 20px;
    	float: left;
    	position:relative;
    }
    #thumbnail1 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail2 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail3 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    }
    #thumbnail4 {
    	height: 74px;
    	width: 192px;
    	margin-bottom: 10px;
    
    }
    #thumbnail5 {
    	height: 74px;
    	width: 192px;
    }
    #thumbnails {
    	height: 411px;
    	width: 192px;
    	margin-top: 20px;
    	margin-left: 20px;
    	float: left;
    	margin-right: 10px;
    	margin-bottom: 20px;
    	cursor: pointer;
    }
    .slide {
    	position:absolute;
    	left:0px;
    	top:0px;
    	height: 415px;
    	width: 736px;
    	float: left;
    }
    #slide-1 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/1.gif);
    }
    #slide-2 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
    }
    #slide-3 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
    
    }
    #slide-4 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
    }
    #slide-5 {
    	height:415px;
    	width: 736px;
    	background-image:url(http://www.vicsjavascripts.org.uk/StdImages/5.gif);
    
    }
    #thumbnails IMG{
    	cursor: pointer;
    }
    .default {
    	background-image: url(default.jpg);
    }
    
    .active {
    	background-image: url(active.jpg);
    }
    .hover {
    	background-image: url(hover.jpg);
    }
    
    /* Slide description */
    .slide-desc {
    	z-index: 20;
    	display: block;
    	background-image: url(bg-slide-description.png);
    	width: 245px;
    	height: 344px;
    	position: absolute;
    	top: -1px;
    	right: 0;
    	color: #fff;
    	padding: 40px 30px 30px 30px;
    }
    #main-content .slide-content-wrapper h3,
    #main-content .slide-content-wrapper p {
    	font-size: 15px;
    	text-shadow: none;
    	font-weight: normal;
    	margin: 0 0 30px 0;
    	color: #fff;
    	text-align: left;
    }
    
    #main-content .slide-content-wrapper h3 {
    	margin: 0 0 10px 0;
    }
    
    #main-content .slide-content p {
    	font-size: 13px;
    	margin: 0px;
    }
    
    .slide-content-wrapper {
    	border-bottom: 1px solid #666;
    }
    
    .slide-content {
    	margin: 0 0 10px 0;
    }
    
    .slide-content p ,
    .slide-content img {
    	float: left;
    }
    
    .slide-content p {
    	width: 165px;
    	line-height: 18px;
    	text-align: left;
    	padding: 0 0 0 5px;
    }
    
    .watch-preview {
    	display: block;
    	height: 33px;
    	width: 201px;
    	padding: 0 0 10px 39px;
    	color: #fff;
    	margin: 10px 0;
    	font-weight: normal!important;
    	line-height: 15px;
    	text-align: left;
    	background-position: left -252px;
    	border-bottom: 1px solid #666666;
    	
    }
    
    .watch-preview em {
    	font-style: italic;
    }
    
    .add-channel-btn {
    	display: block;
    	width: 238px;
    	height: 47px;
    	margin-top: 20px;
    	
    	line-height: 46px;
    	color: #3b3b3b;
    	background-position: left -174px;
    }
    </style>
    <script type="text/javascript">
    
    function zxcFade(o){
     var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
     if (obj&&!oop){
      divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
      for (var z0=lgth;z0>=0;z0--){
       divs[z0].style.zIndex=z0<lgth?'0':'1';
       zxcOpacity(divs[z0],z0<lgth?0:100);
       img=tn[z0];
       ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
      }
      for (var z1=0;z1<tn.length;z1++){
       if (tn[z1].nodeType==1){
        tary.push([tn[z1],tn[z1].className+' ']);
        if (tary.length==1){
         tn[z1].className=tn[z1].className+' '+cls;
        }
       }
      }
      zxcFade['zxc'+id]={
       id:id,
       ary:ary,
       tary:tary,
       cls:cls,
       lgth:ary.length-1,
       cnt:0,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2
      }
      zxcAuto(id,o.hold);
     }
    }
    
    function zxcAuto(id,ms){
     var o=zxcFade['zxc'+id];
     if (o){
      o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
     }
    }
    
    function zxcGoTo(id,nu,auto){
     var o=zxcFade['zxc'+id];
     if (o&&o.ary[nu]){
      clearTimeout(o.dly);
      o.auto=auto===true;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1];
      }
      ary[o.cnt][0].style.zIndex='0';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
      o.cnt=nu;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
      }
      ary[o.cnt][0].style.zIndex='1';
      clearTimeout(o[o.ary[o.cnt][2]]);
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
     }
    }
    
    function animate(o,ary,f,t,srt,mS,auto){
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      zxcOpacity(ary[0],now);
      ary[1]=now;
     }
     if (ms<mS){
      o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
     }
     else {
      zxcOpacity(ary[0],t);
      ary[1]=t;
      if (o.auto&&t==100){
       if (o.cnt==o.lgth){
        o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
       }
       else {
        zxcAuto(o.id,o.hold);
       }
      }
     }
    }
    </script>
    <script type="text/javascript">
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    window.onload=function(){
    
    zxcFade({
     SlideID:'slides',
     FadeDuration:1000,
     AutoHold:1000,
     ThumbnailID:'thumbnails',
     ActiveClass:'active'
    });
    
    }
    </script>
    <div class="sports-carousel">
    <div id="thumbnails">
    	<div id="thumbnail1" class="default"><img src="nfl.png" width="183" height="70" onmouseup="zxcGoTo('slides',0);"></div>
        <div id="thumbnail2" class="default"><img src="nhl.png" width="183" height="70" onmouseup="zxcGoTo('slides',1);"></div>
        <div id="thumbnail3" class="default"><img src="baseball.png" width="183" height="70" onmouseup="zxcGoTo('slides',2);"></div>
        <div id="thumbnail4" class="default"><img src="nba.png" width="183" height="70" onmouseup="zxcGoTo('slides',3);"></div>
        <div id="thumbnail5" class="default"><img src="ncaa.png" width="183" height="70" onmouseup="zxcGoTo('slides',4);"></div>
    </div>
    	 <div id="slides">
           <div id="slide-5" class="slide">
          
          <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NFL Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NFL Channel:</strong> Includes up to 150 live NFL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NFL: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NFL</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
            <div id="slide-4" class="slide">
            <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NHL Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NHL Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NHL: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NHL Ice</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
        	<div id="slide-3" class="slide">
            <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>MLB Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>MLB Channel:</strong> Includes up to 150 live MLB games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>MLB: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>MLB</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	   </div>
           </div>
        	<div id="slide-2" class="slide">
          <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NBA Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NBA Channel:</strong> Includes up to 150 live NBA games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NBA: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NBA Ice</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
        	<div id="slide-1" class="slide">    
    <div class="slide-desc">
    		<div class="slide-content-wrapper">
    		<h3>NCAA Programming Options</h3>											
    		<div class="slide-content">
    		<img src="slide-content-logo-nhlny.gif" alt="" />
    		<p><strong>NCAA Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
    		</div>								
    	  <div class="slide-content">
    		<img src="slide-content-logo-centerice.gif" alt="" />
    		<p><strong>NCAA: </strong> Up to 40 out-of-market games each week.</p>
    	  </div>
    	</div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NCAA</em></a>
    	    <a class="add-channel-btn" href="">Add</a>
    	</div>
        </div>
        </div>

  5. #5
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    </head>
    
    <body>
    <style type="text/css">
    .sports-carousel {
    background-image: url(carousel_bkgd.jpg);
    height: 458px;
    width: 980px;
    }
    #slides {
    height: 415px;
    width: 736px;
    margin-top: 20px;
    float: left;
    position:relative;
    }
    #thumbnail1 {
    height: 74px;
    width: 192px;
    margin-bottom: 10px;
    }
    #thumbnail2 {
    height: 74px;
    width: 192px;
    margin-bottom: 10px;
    }
    #thumbnail3 {
    height: 74px;
    width: 192px;
    margin-bottom: 10px;
    }
    #thumbnail4 {
    height: 74px;
    width: 192px;
    margin-bottom: 10px;
    
    }
    #thumbnail5 {
    height: 74px;
    width: 192px;
    }
    #thumbnails {
    height: 411px;
    width: 192px;
    margin-top: 20px;
    margin-left: 20px;
    float: left;
    margin-right: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    }
    .slide {
    position:absolute;
    left:0px;
    top:0px;
    height: 415px;
    width: 736px;
    float: left;
    }
    #slide-1 {
    height:415px;
    width: 736px;
    background-image:url(http://www.vicsjavascripts.org.uk/StdImages/1.gif);
    }
    #slide-2 {
    height:415px;
    width: 736px;
    background-image:url(http://www.vicsjavascripts.org.uk/StdImages/2.gif);
    }
    #slide-3 {
    height:415px;
    width: 736px;
    background-image:url(http://www.vicsjavascripts.org.uk/StdImages/3.gif);
    
    }
    #slide-4 {
    height:415px;
    width: 736px;
    background-image:url(http://www.vicsjavascripts.org.uk/StdImages/4.gif);
    }
    #slide-5 {
    height:415px;
    width: 736px;
    background-image:url(http://www.vicsjavascripts.org.uk/StdImages/5.gif);
    
    }
    #thumbnails IMG{
    cursor: pointer;
    }
    .default {
    background-image: url(default.jpg);
    }
    
    .active {
    background-image: url(active.jpg);
    }
    .hover {
    background-image: url(hover.jpg);
    }
    
    /* Slide description */
    .slide-desc {
    z-index: 20;
    display: block;
    background-image: url(bg-slide-description.png);
    width: 245px;
    height: 344px;
    position: absolute;
    top: -1px;
    right: 0;
    color: #fff;
    padding: 40px 30px 30px 30px;
    }
    #main-content .slide-content-wrapper h3,
    #main-content .slide-content-wrapper p {
    font-size: 15px;
    text-shadow: none;
    font-weight: normal;
    margin: 0 0 30px 0;
    color: #fff;
    text-align: left;
    }
    
    #main-content .slide-content-wrapper h3 {
    margin: 0 0 10px 0;
    }
    
    #main-content .slide-content p {
    font-size: 13px;
    margin: 0px;
    }
    
    .slide-content-wrapper {
    border-bottom: 1px solid #666;
    }
    
    .slide-content {
    margin: 0 0 10px 0;
    }
    
    .slide-content p ,
    .slide-content img {
    float: left;
    }
    
    .slide-content p {
    width: 165px;
    line-height: 18px;
    text-align: left;
    padding: 0 0 0 5px;
    }
    
    .watch-preview {
    display: block;
    height: 33px;
    width: 201px;
    padding: 0 0 10px 39px;
    color: #fff;
    margin: 10px 0;
    font-weight: normal!important;
    line-height: 15px;
    text-align: left;
    background-position: left -252px;
    border-bottom: 1px solid #666666;
    
    }
    
    .watch-preview em {
    font-style: italic;
    }
    
    .add-channel-btn {
    display: block;
    width: 238px;
    height: 47px;
    margin-top: 20px;
    
    line-height: 46px;
    color: #3b3b3b;
    background-position: left -174px;
    }
    </style>
    <script type="text/javascript">
    
    function zxcFade(o){
     var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
     if (obj&&!oop){
      divs=obj.childNodes,lgth=divs.length-1,ary=[];
      for (var z0=lgth;z0>=0;z0--){
       if (divs[z0].nodeType==1){
        divs[z0].style.zIndex=ary.length>0?'0':'1';
        zxcOpacity(divs[z0],ary.length>0?0:100);
        ary.push([divs[z0],ary.length>0?0:100,'dly'+z0]);
       }
      }
      for (var z1=0;z1<tn.length;z1++){
       if (tn[z1].nodeType==1){
        tary.push([tn[z1],tn[z1].className+' ']);
        if (tary.length==1){
         tn[z1].className=tn[z1].className+' '+cls;
        }
       }
      }
      zxcFade['zxc'+id]={
       id:id,
       ary:ary,
       tary:tary,
       cls:cls,
       lgth:ary.length-1,
       cnt:0,
       ms:ms,
       hold:typeof(hold)=='number'?hold:ms*2
      }
      zxcAuto(id,o.hold);
     }
    }
    
    function zxcAuto(id,ms){
     var o=zxcFade['zxc'+id];
     if (o){
      o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
     }
    }
    
    function zxcGoTo(id,nu,auto){
     var o=zxcFade['zxc'+id];
     if (o&&o.ary[nu]){
      clearTimeout(o.dly);
      o.auto=auto===true;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1];
      }
      ary[o.cnt][0].style.zIndex='0';
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
      o.cnt=nu;
      if (o.tary[o.cnt][0]){
       o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
      }
      ary[o.cnt][0].style.zIndex='1';
      this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
     }
    }
    
    function animate(o,ary,f,t,srt,mS,auto){
     clearTimeout(ary[2]);
     var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
     if (isFinite(now)){
      zxcOpacity(ary[0],now);
      ary[1]=now;
     }
     if (ms<mS){
      ary[2]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
     }
     else {
      zxcOpacity(ary[0],t);
      ary[1]=t;
      if (o.auto&&t==100){
       if (o.cnt==o.lgth){
        o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
       }
       else {
        zxcAuto(o.id,o.hold);
       }
      }
     }
    }
    </script>
    <script type="text/javascript">
    function zxcOpacity(obj,opc){
     obj.style.filter='alpha(opacity='+opc+')';
     obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
    }
    
    window.onload=function(){
    
    zxcFade({
     SlideID:'slides',
     FadeDuration:1000,
     AutoHold:1000,
     ThumbnailID:'thumbnails',
     ActiveClass:'active'
    });
    
    }
    </script>
    <div class="sports-carousel">
    <div id="thumbnails">
    <div id="thumbnail1" class="default"><img src="nfl.png" width="183" height="70" onmouseup="zxcGoTo('slides',0);"></div>
        <div id="thumbnail2" class="default"><img src="nhl.png" width="183" height="70" onmouseup="zxcGoTo('slides',1);"></div>
        <div id="thumbnail3" class="default"><img src="baseball.png" width="183" height="70" onmouseup="zxcGoTo('slides',2);"></div>
        <div id="thumbnail4" class="default"><img src="nba.png" width="183" height="70" onmouseup="zxcGoTo('slides',3);"></div>
        <div id="thumbnail5" class="default"><img src="ncaa.png" width="183" height="70" onmouseup="zxcGoTo('slides',4);"></div>
    </div>
     <div id="slides">
           <div id="slide-5" class="slide">
          <div class="slide-desc">
    <div class="slide-content-wrapper">
    <h3>NFL Programming Options</h3>
    <div class="slide-content">
    <img src="slide-content-logo-nhlny.gif" alt="" />
    <p><strong>NFL Channel:</strong> Includes up to 150 live NFL games in HD.  </p>
    </div>
      <div class="slide-content">
    <img src="slide-content-logo-centerice.gif" alt="" />
    <p><strong>NFL: </strong> Up to 40 out-of-market games each week.</p>
      </div>
    </div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NFL</em></a>
        <a class="add-channel-btn" href="">Add</a>
    </div>
    </div>
            <div id="slide-4" class="slide">
            <div class="slide-desc">
    <div class="slide-content-wrapper">
    <h3>NHL Programming Options</h3>
    <div class="slide-content">
    <img src="slide-content-logo-nhlny.gif" alt="" />
    <p><strong>NHL Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
    </div>
      <div class="slide-content">
    <img src="slide-content-logo-centerice.gif" alt="" />
    <p><strong>NHL: </strong> Up to 40 out-of-market games each week.</p>
      </div>
    </div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NHL Ice</em></a>
        <a class="add-channel-btn" href="">Add</a>
    </div>
        </div>
    
        <div id="slide-3" class="slide">
            <div class="slide-desc">
    <div class="slide-content-wrapper">
    <h3>MLB Programming Options</h3>
    <div class="slide-content">
    <img src="slide-content-logo-nhlny.gif" alt="" />
    <p><strong>MLB Channel:</strong> Includes up to 150 live MLB games in HD.  </p>
    </div>
      <div class="slide-content">
    <img src="slide-content-logo-centerice.gif" alt="" />
    <p><strong>MLB: </strong> Up to 40 out-of-market games each week.</p>
      </div>
    </div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>MLB</em></a>
        <a class="add-channel-btn" href="">Add</a>
       </div>
    
           </div>
    
           <div id="slide-2" class="slide">
    
              <div class="slide-desc">
       <div class="slide-content-wrapper">
        <h3>NBA Programming Options</h3>
        <div class="slide-content">
          <img src="slide-content-logo-nhlny.gif" alt="" />
         <p><strong>NBA Channel:</strong> Includes up to 150 live NBA games in HD.  </p>
        </div>
            <div class="slide-content">
         <img src="slide-content-logo-centerice.gif" alt="" />
         <p><strong>NBA: </strong> Up to 40 out-of-market games each week.</p>
            </div>
           </div>
               <a class="watch-preview" href="#">Watch a preview of <br/><em>NBA Ice</em></a>
           <a class="add-channel-btn" href="">Add</a>
           </div>
    
           </div>
    
           <div id="slide-1" class="slide">
    
             <div class="slide-desc">
          <div class="slide-content-wrapper">
           <h3>NCAA Programming Options</h3>
           <div class="slide-content">
        <img src="slide-content-logo-nhlny.gif" alt="" />
        <p><strong>NCAA Channel:</strong> Includes up to 150 live NHL games in HD.  </p>
      </div>
          <div class="slide-content">
       <img src="slide-content-logo-centerice.gif" alt="" />
           <p><strong>NCAA: </strong> Up to 40 out-of-market games each week.</p>
             </div>
         </div>
            <a class="watch-preview" href="#">Watch a preview of <br/><em>NCAA</em></a>
        <a class="add-channel-btn" href="">Add</a>
       </div>
       </div>
    
      </div>
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles