lightbox js v2 04 blogger entegrasyonu

Gönderen TeknoMobi

[Cuma, Ekim 31, 2008 | 10 yorum ]

Blogger için LightBox kurulumunu sizler için çok kolay hale getirdim diyebilirim. Javascript dosyaları ile herhangi bir düzenleme yapmanıza gerek kalmadan LightBox'u blogunuzda kullanabileceksiniz. Daha önce bazı arkadaşlar bloglarında anlatmışlardı. Fakat bu anlatımda LightBox'un en yeni versiyonu kullanıldı. Ayrıca Prototype.js dosyasının içindeki gereksiz yerler çıkartılarak boyutu biraz daha düşürüldü.

LightBox için gerekli olan düzenlemeleri ve js dosyalarını sizler için yükledim. Öncelikle LightBox uygulamasının ne olduğunu bilmeyenler Buradaki sayfa tamamen yüklendikten sonra yazı içindeki resimlere tıklayabilir ve LightBox'un ne işe yaradığını görebilirler.

Şimdi gelelim LightBox'u blogumuza nasıl entegre edeceğimize...
  • Öncelikle temamızda Yerleşim > HTML Düzenle > Widgetları Genişlet diyoruz.Her ihtimale karşı şablonumuzun yedeğini alıyoruz.
  • Ardından Ctrl+F yaparak </Head> kodunu aratıyoruz. Bu kodun hemen üstüne aşağıdaki kodları yapıştırıyoruz.
<link rel="stylesheet" href="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.css" type="text/css" media="screen"/>

<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/prototype.js" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="http://teknohaber.weebly.com/uploads/1/3/6/1/1361393/lightbox.js" type="text/javascript"></script>
  • Şablonu kaydet diyoruz. Artık LightBox'u blogumuza entegre ettik. Bu aşamadan sonra yapacaklarımız blogumuza gönderdiğimiz yazılar üzerinde gerçekleşecek.
Blogumuza LightBox'u entegre ettik. Yazılarımızı yayınlarken yüklediğimiz resimlerin üzerine ufak bir kod eklememiz gerekiyor.
  • Eğer bir tane resim eklediysek yazımızı yayınlamadan önce Yazının HTML'yi Düzenle sekmesine tıklıyoruz (Oluşturun Yanındaki). Resim kodumuzun içindeki imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox" yazıyoruz. (Örnek sayfadaki ilk resim)
  • Eğer bir tane değilde daha fazla resim göstereceksek yine üstteki gibi resim kodlarının içlerinde ki  imageanchor="1" yazısından sonra bir boşluk bırakıp rel="lightbox[TeknoMobi]" vb. gibi yazıyoruz. burada yazdığım TeknoMobi Aynı pencerede peşpeşe görünecek resimlerimizi belirliyor.(Örnek sayfadaki 2,3,4 üncü resimler)
  • Resiminizin altında açıklayıcı bilgi vermek isterseniz yukarıda verdiğim rel= kodlarından sonra title='Açıklama' şeklinde yazabilirsiniz.
En kısa zamanda blogunuza eklemenizde kolaylık sağlayacak videolu anlatımıda vermeye çalışacağım.

10 yorum

Seyyah dedi ki... @ 16 Kasım 2008 Pazar 17:51

Resim kodumuzun içinde imageanchor="1" diye bişey yok malesef. hatta =1 şeklinde bişey dahi yok.Haliyle rel="lightbox" yazısını nereye yapıştırdıysam olmadı :(

TeknoMobi dedi ki... @ 16 Kasım 2008 Pazar 23:12

Bloggerin kendi resim yükleyicisi ile resim koyduğunda imageanchor='1' yazısı olması gerekiyor. Eğer imageshack gibi bir yere yükleyip direk oradaki kodu ekliyorsan < rel='lightbox' href= şeklinde yaparsanda olması gerekiyor. Eğer yine olmadıysa şablonunun bir tane yedeğini alıp bana mail ile yolla işlemlerin şablonunda doğru olup olmadığını kontrol edeyim...

Veysel Keleş dedi ki... @ 03 Aralık 2008 Çarşamba 05:27

çok güzel, çok güzel!! süper.! çok teşekkürler. =)

TeknoMobi dedi ki... @ 03 Aralık 2008 Çarşamba 15:31

@ Veysel Keleş

Lightbox uygulamasının daha da gelişmişi olan MultiBox uygulamasının anlatımına buradan http://teknomobi.blogspot.com/2008/11/multibox-integration-in-blogger.html ulaşabilirsiniz!..

Veysel Keleş dedi ki... @ 03 Aralık 2008 Çarşamba 20:35

@teknomobi
teşekkürler..
Ayrıca birşey eklemek istiyorum. Buradaki konuda anlatıldığı gibi yaptım herşeyi gayet güzel çalıştı ancak, bu sefer blogum ie6 da sayfanız açılamıyor hatası verdi, çok şaşırdım anlamadım nedenini.

TeknoMobi dedi ki... @ 03 Aralık 2008 Çarşamba 22:52

@ Veysel Keleş

İE6 da test edemediğim için bir şey diyemeyeceğim. Ama ilkl defa sizden bu konuda bir şikayet geldi. Hatayı bir defaya mahsus mu aldınız. Yoksa sürekli mi?

Veysel Keleş dedi ki... @ 04 Aralık 2008 Perşembe 00:51

ie6'da çalışmayan lightbox uygulaması. =). multibox çok güzel çalışıyor ..

Adsız dedi ki... @ 22 Nisan 2009 Çarşamba 15:32

http://lokeshdhakar.com/projects/lightbox
http://lokeshdhakar.com/projects/lightbox2/

nezihdarcin dedi ki... @ 01 Haziran 2009 Pazartesi 06:19

Merhabalar, bende dediğiniz gibi tüm kurulumu kopyala yapıştır yapmak sureti ile yaptım.

Sonra imageanchor="1" ifadesine bilgisayarımdan yükleme yapmama rağmen rastlaamadım ve bende <-a rel="lightbox" href şeklinde kodumu başlayacak şekilde düzenledim.

Şimdi ise eklediğim resim üzerine tıklayınca geçmek bilmeyen kum saati dönüyor ve asla asıl fotoğraf ekrana gelemiyor.. Nedendir acaba?

Eğer cevaplayabilirseniz çok sevinim. Saygılarımla..

Nezih

TeknoMobi dedi ki... @ 02 Haziran 2009 Salı 14:19

@Nezih kum saati geliyorsa kurulumu sorunsuz yapmışsın demektir. LightBoxta blogspotun kendi hostuna yüklenen resimlerde çok bekletiyor. Eğer resimleriniz önce www.tnypic.com gibi farklı bir servise yükleyip ardından blogunuza eklerseniz bu sorunu aşmış olursunuz.

Benim size tavsiyem LightBox tan sonra anlatımını yaptığım çok daha kullanışlı olan Colorbox uygulamasını kullanmanız. ColorBox uygulamasının birden fazla özelleştirilmiş versiyonunu blogunda anlattım.

Bölüm 1. http://www.teknomobi.net/2009/04/colorbox-blogger-eklentisi-lightbox.html

Bölüm 2. http://www.teknomobi.net/2009/04/colorbox-blogger-eklentisi-lightbox_08.html

Yorum Gönder

Yorum yaparken dikkat edilmesi gerekenler;

1. Türkçe yazım ve dilbilgisi kurallarına uyunuz.
2. Hakaret içeren yorumlarda bulunmayınız.
3. Yorumlarınızın konu ile alakalı olmasına çalışınız.
4. Yorumlarınızda yasa dışı hiçbir bağlantı linki vermeyiniz.
5. Yorum Formunu doldurduktan sonra Profil Seç -> ADI/URL bölümünden isminizi yazıp yorum yaparsanız size karşı bir hitap şeklimiz olur.
6. Kurallara uymayan yorumlar silinmektedir...