jQuery ve Css ile kendi lightbox uygulamamızı yazalım

Merhaba, bir projede kullanmak için lightbox ararken tutsplus’ın şuradaki yazısını gördüm ve çok beğendim. Bende türkçeleştirerek blogumda yazmak istedim. Hemen hemen bütün hazır pluginler kullanılması kolay olsada dosya boyutları oldukça büyük ve basit bir projede kullanacağım için gereksiz fazla özellikle donatılmış. Bana süper basit bir lightbox gerekiyordu ve kafa patlatmadan bu makale sayesinde yaptım.

Bu makalemizi adım adım örneklendirerek jsFiddle bağlantılarınıda paylaşacağım.

1-) HTML sayfasımızı oluşturalım

Süper Basit Lightbox

 

Farkettiğiniz gibi a elementlerine “lightbox_trigger” classını ekledik. Bunu daha sonra javascript bölümünde tetikleyici olarak kullanacağız.

JSFiddle için buraya tıklayınız.

2-) HTML sayfamıza şekil verelim.

Buradaki amacımız Lightboxımızı daha rahat görerek basit bir sayfada nasıl görüneceğini bakabilmemiz. Bunun için aşağıda bulunan css kodumuzu kullanıyoruz.

Süper Basit Lightbox 2

JSFiddle için buraya tıklayınız.

3-) Lightbox penceresini oluşturalım

Şimdi geldik resmimizin açılacağı lightbox penceremizi oluşturmaya.

– HTML –

Aslında bunu jQuery ile otomatik oluşturabileceğiz. Ancak işin mantığını anlayabilmeniz açısından burada css ile beraber anlatacağız.

Farkettiyseniz img tagında herhangi bir resim urlsi bulunmuyor. Bunu ilk adımda oluşturduğumuz a elementlerinin href=”” bölümünden çekeceğimiz için şuanda boş duruyor.

– CSS –

Css kodumuz ile gerçek bir lightbox görüntüsünü aldı. Burada bazı sorularınız olduğuna eminim ? Muhtemelen soru ve sorunları yazacağım. Yine takıldığınız bir bölüm olur ise yorum ile sorabilirsiniz.

– Neden position: fixed; kullandık?

Bunu kullanmamızın sebebi eğer oyuncu mouse ile sayfayı aşağı yukarı kaydırır ise resimde sayfayı takip ederek koskoca siyah bir ekran görünmemesi için yaptık.

– overlay.png nedir?

Aslında arkaplanı siyah yapıp transparan yapmak en kolayıydı ancak bildiğiniz gibi her tarayıcı birbiriyle uyumlu değil. Özellikle Internet Explorer bu konuda ciddi derecede bizi zorluyor. Bizde arkaplanı css ile karartmak yerine Photoshop’da bir belge açıyoruz. Arkaplanı tamamen siyah yaparak %75 transparan haline getiriyoruz. Sonra bu arkaplanın sadece 1×1 kısmını alarak overlay.png’yi oluşturduk.

Yinede ben çok üşengeç bir adamım. Uğraştırmayın beni diyorsanız. Buradan indirebilirsiniz.

Şimdi lightbox açıkken acaba sayfamız nasıl duruyor ona bakalım;

Süper Basit Lightbox

JSFiddle için buraya tıklayınız.

4-) Resmimize şekil verelim

Lightbox’da göstereceğimiz resmimize CSS3 efektlerinden biraz gölge vererek daha şık bir hale getirelim.

Max-width vermemizin sebebi büyük resimlerde ekran kaymalarına sebep olmasın diye ekledik.

Süper Basit Lightbox

Gördüğünüz gibi resmimiz görüntülenirken arkasında bir gölge çıkartıyoruz.

JSFiddle için buraya tıklayın

5-) Sistemi anlamak

Javascript kodlarımıza geçmeden önce size sistemin işleyiş mantığını anlatmak istiyorum. Bu önemli çünkü yazılımcı olarak yaptığımız sistemi adımlandırmalı ve anlamalıyız.

Sitemize giren kullanıcıların linke tıkladığı zaman ortada resmimizin büyük bir şekilde görünmesini istiyoruz.

  • Kullanıcı “lightbox_trigger” classına sahip linkle tıkladığında
    • Tarayıcının linki takip etmesini engellemeliyiz. (bknz: return false)
    • Oluşturduğumuz #lightbox div’inin varolduğunu kontrol etmek.
      • Eğer varsa:
        • #content div’inin içindeki img tagını bul ($(‘div#content’).find(‘img’) yada $(‘div#content img’))
        • Tıklanan linkin href değerini al ve img tagının src değeri ile değiştir
      • Eğer yoksa:
        • #lightbox div’ini body tagına ekle (prepend)
        • Eğer varsa işleminin adımlarını uygula
  • Kullanıcı herhangi bir yere tıkladığında #lightbox div’ini sil (remove) yada görünmez (hide) yap.

6-) jQuery kütüphanesini dahil etmek

jQuery kütüphanesini aşağıdaki şekilde <head> taglarımız arasına dahil ediyoruz.

jQuery ile ilgili çok daha geniş bilgi almak için jQuery nedir ? Nasıl Kullanılır ? isimli makaleme göz atabilirsiniz.

7-) lightox_trigger classını aktif etmek

Şimdi sıra geldi en can alıcı maddeyi yapmaya. Öncelikle yazımın başında belirttiğim makalede click() fonksiyonu kullanılmış olsada artık pek tavsiye edilmiyor. Biz bunun yerine on() fonksiyonu ile yapacağım. Daha sağlıklı ve performanslı.

jQuery(document).ready hakkında daha fazla bilgi almak için $(document).ready() nedir? makalemi okuyabilirsiniz.

Evet artık lightbox_trigger classına sahip a taglarına tıklandığında işlem yaptırabiliriz.

İlk işimiz linke tıklandığında tarayıcının hiçbir işlem yapmamasını sağlamak. Bunun için return false yada preventDefault() fonksiyonunu kullanabiliriz.

preventDefault fonksiyonunu kullanmayı tercih ettik. İleriki zamanlarda return false ile preventDefault’un arasında ki farkları yazacağım. Şimdi son haliyle linklere tıkladığınızda hiçbirşeyin olmadığını farkedeceksiniz. JSFiddle örneği için buradan linki takip edebilirsiniz.

İkinci işlem olarak tıkladığımız linkin href değerini alıyoruz.

Kodumuzun şuanki hali şu şekilde olacak;

Şimdi önemli noktaya geldik. Kaynak kodumuzda #lightbox div’inin varlığını kontrol edeceğiz. Eğer var ise sadece img tagının src değerini değiştireceğiz. Eğer yoksa ise #lightbox div’ini kaynak kodumuza ekleyeceğiz.

length hakkında daha fazla bilgi almak için jquery docs‘a göz atabilirsiniz. Şimdi Sistemi anlamak adımına geri dönersek. Burada yapabileceğimiz 2 adet kod parçacığı var. Eğer var ise sadece img etiketinin src bölümünü değiştireceğiz. Eğer yok ise lightbox html markupunu ekleyeceğiz.

Şimdi kodumuzu toparlayacak olursak;

Kodumuzun canlı örneğini görmek için JSFiddle adresinden kontrol edebilirsiniz.

Şimdi linklerimizin href=”” bölümünde bulunan resimleri başarılı bir şekilde açtırdık. Şuanda tek yapmamız gereken resme yada herhangi bir yere tıklandığında açılan pencereyi kapatmak yada silmek.

Bu kodumuzu yazmadan önce size hide() ve remove() fonksiyonlarından bahsetmek istiyorum.

Hide fonksiyonu seçtiğiniz etiketi saklar. Yani kaynak kodda fazlalık yaratacaktır. Sadece görünürlüğü olmayacaktır.

Remove fonksiyonu ise seçtiğiniz etiketi tamamen kaynak koddan siler. Tekrar onun üstünde işlem yapmak için append, prepend gibi fonksiyonlar ile kaynak koda eklemek gerekir. Burada biz hide() fonksiyonunu kullanacağız. Bunun sebebi birden fazla resim koyulur ise sürekli “sil, ekle” işlemi olmaması için kullanıyoruz. Bir kere ekledikten sonra sadece img etiketinin srcsini değiştirmemiz yeterli oluyor.

Burada eğer #lightbox div’ine tıklanırsa #lightbox div’ini saklamasını söyledik. Hadi bu kodumuzuda son haliyle ekleyelim.

Evet artık elinizde Süper Basit Lightbo mevcut. Daha fazla geliştirmek size kalmış. JSFiddle’da son halini görmek için tıklayınız.

Başka bir makalede görüşmek üzere.

3 yorum

  1. teşekkürler , her yerde hazır var , mantık olmadıkça yaptığını bilmedikçe yazılımcımı olunur ya.. sahibi olmadığın birşey hükmedemezsiniz 😉

  2. Ben beğenmedim A href gibi tıklayınca direk oraya yönlendirdi. Ben site üzerinde pencere içinde görüntülesin istemiştim. Öyle olmuyor mu acaba?

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir