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ü
- Yazılım Uzmanları
- 14 Mayıs 2018
- 886 kez görüntülendi.
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.
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.
İyi Çalışmalar!
Bu yazıya 0 yorum yapılmış.