SimpleImageViewer – Basit manşet sistemi

Herhangi bir uygulama ihtiyacı olmadan bir kaç basit adımda hazırlanmış bir tane çalışma.   Sol tarafta resimlerin küçük boyu görüntüleniyor ve bu küçük fotoğraflara tıkladığınızda sağ tarafta büyük hali çıkıyor.  Resimler arası geçiş işlemi slideUp  yani yukarıya doğru kayan olarak ayarlanmış. Bir öncekine geçtiğinizde aşağı doru ve sonrakine geçtiğinizde de yukarı doğru gidip kayboluyor değişen içerikler.
Web sitenizde kullanmak yada başka türlü tasarımlar hazırlamak açısından oldukça işinize yarayacak kısa kodlar var bu örnekte. Sadece manşet bölümlerinde kullanılabilir örnekler hazırlamak için geçerli bir çalışma değil. Kolayca özelleştirebilir ve dilerseniz sayfalar arası geçiş yapmak için de kullanabilirsiniz demo üzerinde değişiklikler yaparak.

Kullanım

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

Js ve stil dosyaları :  

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />

Css :

	<style>

		#gallery img {
			border: none;
		}

		#gallery_nav {
			float: left;
			width: 150px;
			text-align: center;
		}

		#gallery_output {
			float: left;
			width: 600px;
			height: 550px;
			overflow: hidden;
		}

		#gallery_output img {
			display: block;
			margin: 20px auto 0 auto;
		}

	</style>

JavaScript :

	<script language="javascript">

		$(document).ready(function() {
			$("#gallery_output img").not(":first").hide();

			$("#gallery a").click(function() {
				if ( $("#" + this.rel).is(":hidden") ) {
					$("#gallery_output img").slideUp();
					$("#" + this.rel).slideDown();
				}
			});
		});

	</script>

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

Html :

		<div id="gallery">
			<div id="gallery_nav">
				<a rel="img1" href="javascript:;"><img src="iphone_1.jpg" /></a>
				<a rel="img2" href="javascript:;"><img src="iphone_2.jpg" /></a>
				<a rel="img3" href="javascript:;"><img src="iphone_3.jpg" /></a>
				<a rel="img4" href="javascript:;"><img src="iphone_4.jpg" /></a>
			</div>

			<div id="gallery_output">
				<img id="img1" src="iphone_1b.jpg" />
				<img id="img2" src="iphone_2b.jpg" />
				<img id="img3" src="iphone_3b.jpg" />
				<img id="img4" src="iphone_4b.jpg" />
			</div>

			<div class="clear"></div>
		</div>
	</div>