<a href="inner#test" rel="clearbox">inner content</a>

<a href="htmlcontent" rel="clearbox[html=<strong>This is a bold text</strong>]">my webpage</a>

<a href="http://www.mywebpage.com" rel="clearbox">my webpage</a>

<a href="http://www.youtube.com/v/mymovieid" rel="clearbox">my youtube video</a>

<a href="movie.wmv" rel="clearbox">my movie</a>

<a href="music.wav" rel="clearbox">my music</a>

    <script type="text/javascript">
      $(document).ready(function () {
        commonTestData = [
          [1000, {label: 'A'}],
          [1300, {label: 'B'}],
          [3600, {label: 'C'}],
          [4000, {label: 'D'}],
          [5200, {label: 'E'}],
          [7000, {label: 'F', color: '#FFBE33'}],
          [0,    {label: 'G'}]
        ]
        $('#defaults-graph').tufteBar({
          data: commonTestData 
        });
    </script>

    <div class='test-case'>
      <h3>Default</h3>
      <div id='defaults-graph' class='graph' style='width:200px; height: 150px'></div>
    </div>

$.featureList(
	$("#tabs li a"),
	$("#output li"), {
		start_item : 1
	}
);
 
// Alternative
 
$('#tabs li a').featureList({
	output		: '#output li',
	start_item	: 1
});

		<h1>Feature List</h1>
		<p>This is a demo page. You can view the supporting article <a href="http://jqueryglobe.com/article/feature-list">here</a></p>
		<hr />
		<div id="feature_list">
			<ul id="tabs">
				<li>
					<a href="javascript:;">
						<img src="services.png" />
						<h3>Services</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="programming.png" />
						<h3>Programming</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<img src="applications.png" />
						<h3>Applications</h3>
						<span>Lorem ipsum dolor sit amet consect</span>
					</a>
				</li>
			</ul>
			<ul id="output">
				<li>
					<img src="sample1.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample2.jpg" />
					<a href="#">See project details</a>
				</li>
				<li>
					<img src="sample3.jpg" />
					<a href="#">See project details</a>
				</li>
			</ul>
		</div>

		h3 {
			margin: 0;	
			padding: 7px 0 0 0;
			font-size: 16px;
			text-transform: uppercase;
		}
		div#feature_list {
			width: 750px;
			height: 240px;
			overflow: hidden;
			position: relative;
		}
		div#feature_list ul {
			position: absolute;
			top: 0;
			list-style: none;	
			padding: 0;
			margin: 0;
		}
		ul#tabs {
			left: 0;
			z-index: 2;
			width: 320px;
		}
		ul#tabs li {
			font-size: 12px;
			font-family: Arial;
		}
		ul#tabs li img {
			padding: 5px;
			border: none;
			float: left;
			margin: 10px 10px 0 0;
		}
		ul#tabs li a {
			color: #222;
			text-decoration: none;	
			display: block;
			padding: 10px;
			height: 60px;
			outline: none;
		}
		ul#tabs li a:hover {
			text-decoration: underline;
		}
		ul#tabs li a.current {
			background:  url('feature-tab-current.png');
			color: #FFF;
		}
		ul#tabs li a.current:hover {
			text-decoration: none;
			cursor: default;
		}
		ul#output {
			right: 0;
			width: 463px;
			height: 240px;
			position: relative;
		}
		ul#output li {
			position: absolute;
			width: 463px;
			height: 240px;
		}
		ul#output li a {
			position: absolute;
			bottom: 10px;
			right: 10px;
			padding: 8px 12px;
			text-decoration: none;
			font-size: 11px;
			color: #FFF;
			background: #000;
			-moz-border-radius: 5px;
		}
		ul#output li a:hover {
			background: #D33431;
		}