SimpleImageViewer – Basit manşet sistemi

SimpleImageViewer 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="http://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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-01 tarihinde yayınlandı,Toplam 1912 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...