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.
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ı :(
YanıtlaSilBloggerin 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...
YanıtlaSilçok güzel, çok güzel!! süper.! çok teşekkürler. =)
YanıtlaSil@ Veysel Keleş
YanıtlaSilLightbox 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!..
@teknomobi
YanıtlaSilteş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.
@ Veysel Keleş
YanıtlaSilİ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?
ie6'da çalışmayan lightbox uygulaması. =). multibox çok güzel çalışıyor ..
YanıtlaSilhttp://lokeshdhakar.com/projects/lightbox
YanıtlaSilhttp://lokeshdhakar.com/projects/lightbox2/
Merhabalar, bende dediğiniz gibi tüm kurulumu kopyala yapıştır yapmak sureti ile yaptım.
YanıtlaSilSonra 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
@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.
YanıtlaSilBenim 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
güzel başarılar dilerim
YanıtlaSilselamlar. anlatım için teşekkürler, hepsini uyguladım ve lightboxı sorunsuzca çalıştırdım ancak "izleyiciler" gadgetında sorun çıktı. lightbox ın kodlarını eklediğim zaman "izleyiciler" gadgetım yine sağ framede görünüyor ancak içi tamamen boş!! kaldırdığımda ise izleyiciler geri geliyor. template im "woodstock" bir bakarsanız çok sevinirim.
YanıtlaSilbu arada, dikkat çekici bir şeyi daha belirteyim. izleyiciler widgetı lightbox olarak açılıyor artık. resimler için de lightbox html kodunu eklediğimde ise izleyiciler widget'ının içi boşalıyor ama resimler lightbox la açılıyor. bu konuda yardım ederseniz çok sevinirim.
YanıtlaSil