Jquery ile LightBox Slayt Uygulaması

 
Son günlerde sitemi yenilerken fotoğraf galerisi bölümünü yenilememiştim. LightBox Slayt sistemini kullanıyordum ancak orada prototype javascript kütü
 

Son günlerde sitemi yenilerken fotoğraf galerisi bölümünü yenilememiştim. LightBox Slayt sistemini kullanıyordum ancak orada prototype javascript kütüphanesi ve ekstra javascript dosyalar kullanılıyordu ve yüklenmesi geç sürüyordu. Bu sepeble araştırdım ve LightBox olayının jquery ile de yapıldığını gördüm ve hemen Galerim bölümüne entegre ettim. Kullanışı diğer lightbox slaytı ile aynı ama boyut ve dosya olarak küçük bir uygulama olmuş. Bu uygulamayı nasıl kullanacağımıza bakalım.

Öncelikle yaptığım örneği buradan test edebilir ve dosyaları (sayfa dahil) buradan indirebilirsiniz.

Kodlarımız şöyle olacak:

<head>
	<title>Jquery ile LightBox Fotoğraf Slaytı</title>
	<link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
	<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
	<script>
		$(document).ready(function(){
			$("a[rel^='slayt']").prettyPhoto({
				animationSpeed: 'normal',
				padding: 40,
				opacity: 0.5,
				showTitle: false,
				allowresize: true,
				counter_separator_label: '-'
			});
		});
	</script>
</head>
<body>
	<a rel="slayt[1]" href="slayt/1.png">
		<img src="slayt/1.png" border="0" />
	</a>
	<a rel="slayt[1]" href="slayt/2.png"></a>
	<a rel="slayt[1]" href="slayt/3.png"></a>
	
<a rel="slayt[2]" href="slayt/4.png"> <img src="slayt/4.png" border="0" /> </a> <a rel="slayt[2]" href="slayt/5.png"></a> <a rel="slayt[2]" href="slayt/6.png"></a> <a rel="slayt[2]" href="slayt/7.png"></a>
<a rel="slayt[3]" href="slayt/8.png"> <img src="slayt/8.png" border="0" /> </a> <a rel="slayt[3]" href="slayt/9.png"></a> <a rel="slayt[3]" href="slayt/10.png"></a> </body>

 

Görüldüğü gibi diğer lightbox uygulaması ile aynı. rel="slayt[1]" gibi ifade ile fotoğraflar arasında gruplandırma yapıyoruz. Yani farklı slaytlara bölmüş oluyoruz. Ancak bunu yapmayarak sadece rel="slayt" diyip gruplandırma yapmayıp bu rel ifadesini alan tüm fotoğraf veya resimleri tek slayt olarak gösterebiliriz.

Uygulamayı buradan test edebilir ve dosyaları (sayfa dahil) buradan indirebilirsiniz.
Ayrıca kendi sitemdeki Galerim bölümünde de bu uygulamayı kullandım.

İyi Çalışmalar!

 
 

Makale Hakkında

Makale Sahibi :Mehmet Duran
Makale Kategori :JAVASCRIPT & JQUERY
Etiketler:JQueryResim
Resim GaleriSlaytResim Galerisi
Ekleme Tarihi :11.05.2011 02:51
Görüntülenme:123
Toplam Puan:1
Toplam Oy Sayısı :0
Toplam Oy Ortalaması :1

Yorum Ekle

Başlık.
Makale hakkındaki görüşleriniz.
hata
24.05.2011 00:47
 
merhaba paylaşım için sağol öncelikle bende yaptım fakat index değilde kendi yarattığım sayfada gözükmüyor hata veriyor onun için ne yapmam lazım?

En Çok Okunan Makaleler

C# ta FTP işlemleri (Download,...
Delphi makalesini gördüm esinlendim, 3 günümü harcadım ama sonunda başardım.
C# Operatörler
Bu makalemizde C# programlama dilinde kullanabileceğimiz 5 tür operatörü gözden geçireceğiz.Bunlar sırasıyla : Aritmetik, aktarma, mantıksal, karşılaş
C# TA DİZİLER
C# TA DİZİLER

Yazılım Uzmanları