Blogger da lightbox kullanımı ( jquery )

jquery-lightboxLightboxlar ekranın kararması sonucu tüm ilgiyi açılan pencerelere çekebilmek için kullanılan uygulamalardır.

 

Blog’uğunuza eklediğiniz resimleri, videoları,HTML elemanlarını hatta web sayfalarını blog ziyaretçilerinize, blog’uğunuzu terk etmeden gösterebilirsiniz.

 

Hemen hemen aynı özellikleri vadeden bu uygulamaların en güzel taraflarından biride özelleştirilebilir olmaları.

 

Jquery serisinde bu uygulamalardan birini size tanıyor ve kendi blog’uğunuza ekleyebileceğiniz adımlarla paylaşıyoruz yöntemi bir defa öğrendiğinizde internette her hangi bir kaynaktan bulduğunuz değişik uygulamaları da aynı şekilde kendi blog’uğunuza ekleyebilir ve kullanabilirsiniz.

klonlanmış yüzlerce versiyonunu bulunan bu uygulamaların en ünlüleri bunlar.

 

 

Şimdi size tanıtacağım uygulamada yukarıda sıraladığım özelliklerin tümünü olmasada resimlerin büyütülmüş hallerini videoları ve web sayfalarını pop up pencerelerde açtırabilmenizi sağlayan bloguğunuzu fazla yavaşlatmayan bir uygulama.

 

uygulamayı bir önceki yazımızda tanıttığımız sliderı eklediğimiz test blog’uğumuza ekledik.

 

Yazıda bulunan resim ve linklere tıklayarak uygulamayı test edebilirsiniz kendi blog’uğunuzda kullanmak içinse aşağıdaki adımları takip etmeniz yeterli.

 

     2010-06-30_013807

 

Kumanda Paneli ➜ Tasarım ➜ HTML’yi Düzenle yolunu takip ederek blog’umuzun kodlarının açık halde bulunduğu modüle ulaşıyorum. burada klavyemin Ctrl ve F tuşuna aynı anda bastıktan sonra açılan formda </head>  ifadesini aratın.

 

</head> ifadesini bulduktan sonra hemen üstüne gelecek şekilde aşağıdaki CSS kodlarını ekleyin.

 

CSS Kodu

 

Css kodlarını ekledikten sonra yine bu sayfada </head> etiketini bulup, hemen üzerine gelecek şekilde aşağıda bulunan Javascript kodlarını da ekleyin.

 

Javascript  Kodu

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

    <script src='http://jquer-proje.googlecode.com/files/jquery.upbox.js' type='text/javascript'/>
    <script type='text/javascript'>
$(function() {
    $(&quot;a.nicebox&quot;).nicebox({ title: makeTitle });
});
function makeTitle(options) {
    return &#39;Function for title&#39;;
}
    </script>

 

 

Javascipt kodları içerisinde bulunan jquerynin ana kodunu(

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js' type='text/javascript'/>

) daha önce eklediyseniz tekrar eklemenize gerek yok.

 

Kodları ekledikten sonra rtık resimlerinizi videolarınızı vey web sayfalarınızı pop up pencerelere de açtırmak için linklerini blog’uğunuzun kodlarına veya yazılarınıza eklemeniz yeterli.

 

HTML Linkler Kodu

Diyelim ki yazınıza bir çok resim ekleyeceksiniz ama bu resmin küçük boyutlu ekledikten sonra resme tıklanıldığın da büyümesini istiyorsunuz.

Örnek

<a class="nicebox" href="http://3.bp.blogspot.com/-DHocSnSWp4U/TcljLCiRckI/AAAAAAAAEWY/Z0dekASMTaI/s1600/4.jpgg"  rel="Demo; width=420;height=220"> Örnek </a>

 

Link bu şekilde olacak buradaki  (width=420;height=220" ) width pencerenin genişliği height yüksekliği eklediğiniz resmin boyutlrına göre buradaki değerlerği yükseltebilir veya azaltabilirsiniz.

 

bloggera-müzik-yollamak 

 

Yukarıdaki işlemi video eklerkende web sayfaları içinde kullanabilirsiniz.

 

Lightbox’ı  özelleştirin.

 

 CSS Kodlarını değiştirin

#niceboxPopUp {
    display: block;
    position: fixed;
    background:#fff;
    z-index: 1001;
    overflow: hidden;
    padding:10px 4px 10px 4px;
    border-bottom:10px solid #fff;
    border-radius:4px;
}

 

pencerenin arka palanını farklı bir renk yapmak için değiştirmeniz gereken kod background:#fff;

 

daha fazla özelleştirme yapabilmeniz için biraz css ve javascript bilgisine sahip olmalısınız.

Paylaş !

21 yorum:

  1. ya ben bunu ikinci kez deniyorum yine olmadi yine olmadi ya uf

    YanıtlaSil
  2. Fransalı Gelin Kodları doğru bir şekilde eklemişsin bundan onra yapman gereken HTML Linkler yazan bölümdeki gibi bağlantılar oluşturmak..

    Yazı panelini HTML'yi düzenle moduna getirdikten sonra bizim örnekte verdiğimiz kodları test amaçlı kullan ..

    daha sonra tekrar silersin..

    YanıtlaSil
  3. paylaşım için çok teşekkürler ben denedim oldu ancak yükseklik ayarını değiştirebiliyorum ama genişlik ayarı olmuyor değiştirsemde sabit kalıyor önerilerinizi bekliyorum.

    YanıtlaSil
  4. eklediğin linklerdeki değerlerle oynayarak değiştirebiliyorsun ..

    width yazan böüm ama sanırım onlada anca 700 veya 800px le kadar yapabiliyorsun tam ekran yapılmıyor..

    YanıtlaSil
  5. sayfamda java olarak yahoo video player de var bir etkisi olur mu aceba???

    YanıtlaSil
  6. Yahoo media player yahoonun yui scriplerini kullanır bu jqueryle hazırlanmış basit bir uygulama etkisi olsaydı uygulamayı çalıştırmazdı zaten..

    birde position:fixed; yazıyor onu position:absolute; yap olmuyorsa buna benzer onlarca uygulama var onlardan birini dene .. zaten yazının amacıda bu uygulamaları blog'uğunuza nasıl adapte edip kullanacağınızı anlatmaktı..

    YanıtlaSil
  7. birde sen jquery translate diye hazırldığımız eklentiyi eklemişsin oda jqueryle hazırlandı ikisindede jquerynin ana kodu bulunuyor birini silebilirsin gereksiz ..


    birde o eklentide translate up yazan bağlantıyı kaldırmışsın bunun sana ne faydası oldu ?

    YanıtlaSil
  8. Hocam resimleri nizami bir şekilde nasıl dizeriz acaba? hepsi alt alta geliyor yan yana koyulmuyor.Mesela resimlerim şöyle görünüyor:
    http://f1204.hizliresim.com/w/d/4ccyq.jpg

    Ama ben böyle görünmesini ve tıklandığında lightboxun açılmasını istiyorum:
    http://f1204.hizliresim.com/w/d/4cd00.jpg

    YanıtlaSil
    Yanıtlar
    1. resimleri eklediğinde resimlerin üzerinde imlecini gezdir açılan küçük pencerede sola yasla dediğinde hepsi yayn yana gelir, olmuyorsa resimleri bir tablo içerisine al..

      Sil
    2. Olmuyor hocam,birini ikisini alıyorum üçüncüsü olmuyor hepsi birbirine giriyor.Tablo içerisine nasıl alırım acaba?

      Sil
    3. yazı panelini HTML moduna getirdikten sonra aşağıdaki kodları yapıştır ve resim url si yazan bölümlere resimlerin linkini yaz..


      <table border="0" cellspacing="0" cellpadding="2"><tbody>
      <tr>
      <td valign="top"><img style="display: inline" src="resmin url si"/></td>

      <td valign="top"><img style="display: inline" src="resmin url si"/></td>

      <td valign="top"><img style="display: inline" src="resmin url si"/></td>
      </tr>
      </tbody></table>

      Sil
    4. Düzene koymada işe yaradı ama resme tıklanınca lightboxda büyük hali açılmıyor..

      Sil
    5. bu görsele bakarak aşağıdaki adımları sırayla tekrarla..
      1 Yazı panelini HTML moduna getir
      2 Kodu yapıştır.
      3 bu bölümü(<img style="display: inline" src="resmin url si"/>) farenin imleci ile seçile hale getir
      4 resim yükleye tıkla ve resmi yükle bu işlemi sırayla tekrarla.

      Sil
    6. Tamamdır oldu, çok teşekkürler elinize sağlık.

      Sil
  9. Hocam bloğuma iki tane jQuery uygulaması ekledim kod çakışması oldu ve bir uygulamanın içine jQuery.noConflict(); kodunu ekledim ve sorun düzeldi.Şimdi yeni bir resim albümü ekdim (lightboxlightbox) yine daha önce eklemiş olduğum jQuery uygulaması çalışmasını durdurdu.daha önceki çözüm şuan kısmen işe yarıyor(resim yeni bir sayfada açılıyor)buda benim istediğim bi durum değil eklediğim kodun aynen çalışmasını istiyorum nasıl yapabilirim.Yardımlarınız için şimdiden çok tşk ederim.

    YanıtlaSil
    Yanıtlar
    1. çok fazla jquery uygulaması eklediğin zaman bir birleriyle çakışabiliyorlar bu sorunun en kolay çözümü j.conflict onuda kullanmışsın oda işe yaramıyorsa farklı bir lightbox uygulaması denyeceksin zaten bu tarz uygulamaların özellikleri de bir birine benzer oluyor..

      Sil
  10. Merhaba yaklaşık 3 aydır düzeltemediğim bu sorunu sizin sayenizde düzelttim çok teşekkür ederim.

    YanıtlaSil
  11. Merhaba. Ben burada anlatılanın tam aksini istiyorum ancak olmuyor. Anasayfada görünen yayınlarda yayına ait ilk resme tıklandığında yayının açılmasını istiyorum ama resim açılıyor. bu durumu nasıl düzeltebiliriz?

    YanıtlaSil
  12. Çok eski bir yazı ama yeni görenlere açıklayayım. Eğer bu Boyut ayarlama sıkıntısını yaşıyorsanız(genişliği):
    rel="Demo; width=420;height=220" kısmını;
    rel="width=420;height=220" olarak değiştirin artık genişlik ayarında da bir sıkıntı olmayacaktır.

    YanıtlaSil

Lütfen yazıyla ilgisiz yorum yapmayın sormak istediğiniz bir soru varsa sağda bulunan kotegorilerden sorunuza en uygun olan kategoriye tıklayıp, açılan sonuçlardan birisine yorum yapabilirsiniz, ayrıca sadece link bırakmak için yapılan spam yorumlar yayınlanmaz