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:287
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#'ta Hata Tespiti ve Kontrolü...
Her zaman programımızda nerede, ne zaman, ne gibi buglar(gelişitrme hataları) oluşacağını bilemeyiz.Bu hataları en az zararlarla atlatmak için bir çöz
Turkcell Api Çoklu SMS Gönderm...
Bu makalemizde Turkcell apilerini kullanarak bilgisayarımızdan belirlediğimiz numaralara nasıl mesaj gönderebileceğimizi inceleyeceğiz. Bunu bir çok T

Yazılım Uzmanları