FeatureList.js – Kullanışlı bir manşet çalışması

Sitemizin en üst bölümüne ekleyebileceğimiz buna benzer bir sürü örnek var internet üzerinde. Ama hiç biri tam olarak istediğimiz  gibi olamıyor. FeatureList.js uygulaması gibi ücretsiz olarak dağıtılan benzer çalışmalar da görmeidm şu ana kadar. Muhtemelen ücretli yada ücretsiz olanları vardır ama daha bana denk gelmedi. Sol taraftaki başlıklara incelemek için tıkladığınızda sağ tarafta başlığın resmi çıkıyor ve konu başlığının arkaplanı siyah ok işareti gibi oluyor. Fotoğraflar arası geçiş fade efekti ile gerçekleşiyor. Kullanımı oldukça basit sadece aşağıdaki adımları izleyerek sitenize uyarlamanız mümkün.  Ayrıca otomatik geçiş özelliği de bulunuyor bu çalışmada. Bir açıdan baktığınızda slayt örneği gibi görülebilir olsa da tab olarak tasarlanmış. Örneğin üzerinde herhangi bir değişiklik yapmadan da kullanabilirsiniz. Olduğu gibi sitenize uyarlamanız en iyisidir bence.

Kullanım

• Head  etiketleri arasına eklenmesi gereken bölümler.

Js dosya  aresleri :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="jquery.featureList-1.0.0.js"></script>

<style type="text/css">

		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;
		}
	</style>

<script language="javascript">
	$(document).ready(function() {
		$.featureList(
			$("#tabs li a"),
			$("#output li"), {
				start_item	:	1
			}
		);
	});
</script>

•  Body  etiketleri arasına eklenmesi gereken bölüm.

<style type="text/css">
<div id="content">


		<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>
	</div>