Fading gallery?

Hi there!

I was just wondering how you do this or if there's a tutorial out there? I looked at the source, but I'm not quite getting it. I think this is PHP, no?

http://www.iconoclasticplastic.com/

// Steph

 

hi

this is not PHP, its JavaScript

see this code

      	      <div id="blackBoxHolder" style="position:relative;height:208px;" >
      		<div id="pinkbox">
<li style="display:none;"><img src="/blogphotos/ttcm-002b.jpg" alt="" width="498" height="208" /></li>
<li style="display:none;"><img src="/blogphotos/ttcm-001b.jpg" alt="" width="498" height="208" /></li>
<li style="display:none;"><img src="/blogphotos/ttcm-003b.jpg" alt="" width="498" height="208" /></li>
<li style="display:none;"><img src="/blogphotos/ttcm-004b.jpg" alt="" width="498" height="208" /></li>
				
		</div>
      	      </div>

Code (markup):

and this one also

      		<ul id="photoItemsUl">
      		          <li id="photoTitle"><span>Originality Out. Sequels, Prequels & Remakes in.:</span></li>
			        		          <li><a href="javascript:runFader(0);">1</a></li>
			        		          <li><a href="javascript:runFader(1);">2</a></li>
			        		          <li><a href="javascript:runFader(2);">3</a></li>
			        		          <li><a href="javascript:runFader(3);">4</a></li>
			  
      		          </ul>

Code (markup):

then look here they have an included JS which has this function runFader

<script type="text/javascript" src="/includes/crossfade/crossfade.js"></script>

Code (markup):

also considering the <div id="pinkbox"> lets look for CSS

WOW, kaboom,

<link rel="stylesheet" href="/includes/css/lightbox.css" type="text/css" media="screen" />

Code (markup):

they have on the HEADLINE NEWS

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

Code (markup):

Good Luck