mehmetduran.com - Paylaşmak Güzeldir...
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ü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!
Mehmet Duran 21 Kasım Cuma 2008 8 26141 3,1
Javascript Web Tasarım jQuery Jquery Resim Fotoğraf Tasarım-Görsellik İndir
Bookmark and Share
Bu Yazıyı Değerlendirin.
Konuyla İlgili Olabilecek Diğer Yazılar Jquery ile Tooltip Uygulaması Emu 8086'da Hazırladığım Assembly Örnekler IP Kontrolü ile Oylama (Rating) Uygulaması Asp.net MVC Captcha Uygulamam Ajax 'Yükleniyor' Gifleri
Yorumlar
Yorum Yaz
RSS Yorum Takibi
hede 19 Aralık Cuma 2008 20:37 #1
klasorden resim cekmeyi de anlatirsaniz, hic bir yerde yok
Metin GÖKTAŞ 05 Mayıs Salı 2009 13:26 #2
Arkadaşım php bir siteye uyguladım şimdi mükemmel oldu çok teşekkür ederim eline, yüreğine zihnine sağlık...
Harun Saraç 30 Ekim Cuma 2009 17:23 #3
Şimdi ben de uygulayacağım ancak Close tuşu kayboluyor ilk resimden sonra. Bu bug'ı nasıl çözeriz? Tşk. ederim. İyi çalışmalar
Mehmet Duran 30 Ekim Cuma 2009 18:40 #4
Merhaba. Söz konusu bug sadece benim sitede olsa gerek. Uygulamada böyle bir bug söz konusu değil. Benim kullandığım css kodlardaki karışmalardan dolayı öyle bir sıkıntı olmuş olabilir. Ancak uygulamanın orjinalinde bug söz konusu değil.
Mehmet Ali 01 Temmuz Perşembe 2010 13:57 #5
lightBox ile jqury kullanıldığı takdirde ikisinin çakışmasından dolayı sinir krizleri geçirmemek elde değil, bu uygulama için size ne kadar teşekkür etsem azdır. Yalnız ufacık tefecik bir sorunum var. Sitedeki swf formatlı reklamlar ön planda gözükmeye devam ediyor. ve açılan resim 1019 x 1488 gibi bir büyüklükte olduğu için alt kısmı gözükmüyor. sizce ne yapmak gerek ?
Mehmet Duran 01 Temmuz Perşembe 2010 19:26 #6
Merhaba. Öncelikle birçok lightbox uygulaması var ve çoğu buradaki gibi jQuery kullanıyor. Eğer bunlardan birini kullanırsan bir sorun çıkmaz. Flash ile ilgili soruna gelince de çözüm yollarından biri lightbox açıldığı anda sayfadaki flash elementlerinin visible özelliklerini değiştirerek bu sorunu aşabilirsin. Birçok büyük sitede bu sorun bu şekilde çözülüyor. Bunu tavsiye ederim.
Sami 21 Ekim Perşembe 2010 14:09 #7
lightbox'ı veritabanına bağlayıp Yonetici panelinden güncellenebilir bi sistemde nasıl kullanabiliriz anlatabilir misin?
Mehmet Duran 22 Ekim Cuma 2010 08:57 #8
@Sami, lightbox'ı direk fotoğraf slaytı olarak kullanacaksan yapman gereken bir arayüz ile fotoğrafları sunucuya aktarmak ve bilgilerini bir yerde (veritabanı, vb.) tutmak. Dhaa sonra ise bu verilere göre bir sayfa hazırlayıp resimleri lightbox ile göstermek. Bu örnek sitemde mevcut. Ancak sadece fotoğraf değil de içerik yönetimi için bunu kullanacaksan modal popup tarzına dönüştürüp içerikleri bu kontrol üzerinde yönetebilirsin. Bunun da farklı yöntemleri mevcut. Direk olarak frame kullnaabilir veya Ajax ile içerikleri popup üzerinde görebilirsin.
İsim :
Site :
Yorum :

Buradan bu yazıya ait yorumları RSS olarak takip edebilirsiniz.

Bu servis ile yazılara eklenen yorumları RSS ile takip ederek konu ile ilgili başkaları tarafından yapılan yorumları veya konuyla ilgili sorduğunuz sorulara verilen cevapları görebilirsiniz.
Başarısızlıklarınız ile soylu bir şekilde yüzleşin, başarıdan farkı kalmayacaktır.
Bölümler
Yazılar
Arşiv
Arama
Linkler
Site İçi Arama
Son Zamanlarda Ne Yapıyorum ?
İstatistikler - Araçlar - Reklam
İstatistikler
Sayaç
Mehmet Duran | mehmetduran.com | Copyright © 2009