Lightbox JS ile fotoğraflarınızın gösterimine yeni bir boyut getirin

Lightbox JS ile fotoğraflarınızın gösterimine yeni bir boyut getirin

Lightbox JS, web sayfalarındaki fotoğrafların gösterimine yeni bir biçim kazandıran bir eklenti. Sanırım bu görsel eklentiyi yazarak anlatmaktansa bir örnek ile açıklamak daha doğru olacak; nasıl çalıştığını aşağıdaki örneğe tıklayarak görebilirsiniz.

Orijinal çalışmadan yola çıkarak hazırlanan bir eklenti sayesinde, daha çok WordPress kullanıcıları arasında (*) popülerlik kazanan sahip bu java scripti isterseniz Blogger veya Blogcu gibi ücretsiz sunucularda bulunan blogunuzda da kullanabilirsiniz. Bunun için daha önce QuickSub’ı Blogger’a entegre ederken kullandığımız yöntemi kullanacağız.

Aşağıdaki adımları izleyelim;

Buradaki bağlantı aracılığı ile gerekli dosyları içeren blogger-lightbox.zip’i indirin ve açın.
Açtığınız bu dosyanın içeriğinde bulunan loading.gif, close.gif, blank.gif ve overlay.png’yi ücretsiz bir grafik sunucusuna (örneğin; imageshack.us) gönderin ve bu dosyaların sunucudaki bağlantı adreslerini bir kenara not edin.
Zip içerisinden çıkan css.txt dosyasını açın ve bu dosyanın içinde overlay.png (2 kez) ve blank.gif ifadelerini arayarak yerlerine bir önceki basamakta elde ettiğiniz eşdeğer adreslerini girin (örneğin; “blank.gif” yerine “http://www.sunucuadi.com/blank.gif”).
Zip ierisinden çıkan js.txt dosyasını açın ve bu dosyanın içinde loading.gif ve close.gif ifadelerini arayın. Bu ifadeleri de bir önceki basamaktaki gibi ücretsiz sunucudaki karşılıkları ile değiştirin.
css.txt dosyasını açın ve içeriğini, CTRL+A tuş kombinasyonu ile tamamını seçtikten sonra, CTRL+C ile kopyalayın. Şablon kodunuzun içinde </style> ifadesini arayın ve kopyaladığınız metni bu ifadenin hemen üstüne yapıştırın (CTRL+V).
js.txt dosyasını açın ve içeriğini, CTRL+A tuş kombinasyonu ile tamamını seçtikten sonra, CTRL+C ile kopyalayın. Şablon kodunuzun içinde </head> ifadesini arayın ve kopyaladığınız metni bu ifadenin hemen üstüne yapıştırın (CTRL+V).
Şablonu kaydedin ve eğer Blogger kullanıyorsanız “Republish” ile blogunuzu yeniden yayınlayın.

Üstteki basamaklar ile kodu blogumuzun şablon kodu ile entegre ettik, bundan sonra ise yapmamız gereken Lightbox JS ile gösterilmesini istediğimiz fotoğrafların / resimlerin bağlantı kodlarına rel=”lightbox” ifadesini eklemek. Bunu da şu şekilde yapıyoruz; örneğin yukardaki gibi bir fotoğrafı Blogger’a gönderdiğinizde sunucu sizin için aşağıdakine benzer bir kod oluşturuyor;
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2203/1472/1600/ari-viz-viz.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger/2203/1472/200/ari-viz-viz.jpg" alt="" border="0" class="centered" /></a>
Kodu görebilmek için Blogger’da düzenleme kutusunun üzerindeki “Edit Html”ye tıklayarak HTML formunda düzenlemeye geçmeniz gerek. Buradaki kodu aşağıdaki şekilde değiştiriyoruz.
<a rel="lightbox" title="Arı vız vız..." onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://photos1.blogger.com/blogger/2203/1472/1600/ari-viz-viz.jpg"><img style="cursor: pointer;" src="http://photos1.blogger.com/blogger/2203/1472/200/ari-viz-viz.jpg" alt="" border="0" class="centered" /></a>
Dikkat etmeniz gereken bir diğer nokta; eğer fotoğrafın altında açıklayıcı bir ifadenin yer almasını istiyorsanız bunu “title” etiketi ile belirtiyorsunuz. Yukardaki örnekle açıklayacak olursak, title=”Arı vız vız…” şeklindeki ifadede “Arı vız vız…” yerine görünmesini istediğiniz metni girmeniz gerekiyor.

Kolay gelsin.

(*) Katılıyorum Eray, yaşasın WordPress!

2006/02/18 | Tasarım | Trackback | Yorumlar

“Lightbox JS ile fotoğraflarınızın gösterimine yeni bir boyut getirin” başlıklı yazıya 38 yorum yapılmış

ELOY demiş ki:
19 February 2006, 10:55 am
WordPress kullanıcıları bu açıdan çok şanslı. Çok hızlı ilerliyor.
ali demiş ki:
19 February 2006, 11:10 am
Haklısın, WordPress etrafında inanılmaz dinamik bir geliştirici kitlesi var. Öyle olunca da herşey wp’ciler için daha kolay oluyor.
Eğer wp kullanıyor olsaydım plugini yükler ve aktifleştirir, sonra da istediğim fotoğrafları “imagelink” olarak gönderir ve lightbox’ı sorunsuzca kullanırdım. Ne şablon kodu ile, ne de grafik dosyaları için ücretsiz bir sunucu aramakla uğraşmazdım.
Bitecek ama birgün bu çile :)
wanadoo demiş ki:
20 February 2006, 4:07 pm
tşk ediyorum
oky demiş ki:
22 February 2006, 3:14 am
ben de teşekkür ediyorum, çok beğendim, kullanıcam. ah bi keşke valid olmada da sorun çıkarmasaymış..
bu arada katılmıyorum, yaşasın blogger !:)
ali demiş ki:
22 February 2006, 10:09 am
Haklısınız, javascript’i import edemedeğimiz sürecede de validity biraz zor. Gerçi, herşeyi düzeltseniz bile Blogger’ın navbar kodu bozacaktır işi :)
Not: Eğer import etme şansınız varsa sadece CSS’deki tek sorunlu satırı iptal ederek kodunuzu valid hale getirbilirsiniz;
* html #overlay { background-color: #000; background-image: url(blank.gif); /* filter: Alpha(opacity=50); */ }
ELOY demiş ki:
24 February 2006, 9:12 am
oky birbirimizi kandırmayalım. Hepimiz biliyoruz ki WordPress Blogger’ı döver :)
ELOY demiş ki:
28 February 2006, 8:47 am
Bu da gayet şık.
Aziz demiş ki:
15 July 2006, 1:34 pm
Sayın Ustam;
İhtiyarız ya bu güzel anlatımlarına rağmen olmadı. Yada ben beceremedim.İki ayrı blogda denedim. Yada her şey tamam da blogger ın yazılımı bozuyor işi. Geçen (site içi Devamını Oku >> ) meselesini denedim tam olmuştu ama Blogger ın yazılımı işi bozdu. Sen bize lazımsın bu yaptığın güzel işe devam et………Bir bakıver bakalım belki sen sorunun kaynağını bulursun. Sevgi ve sağlıkla kal………..
İHTİYAR
ali demiş ki:
15 July 2006, 4:38 pm
Aziz bey, sorun sizde değil bende :) 6. basamaktaki ifade yanlış, gözümden kaçmış, özür dilerim. İşin garip tarafı benimle birlikte kimse de farketmemiş :)
js.txt içeriğini /head etiketinin altına değil, hemen üstüne kopyalayarak kaydedin, sorununuz düzelecektir.
Sayenizde metni düzeltme şansım oldu, teşekkür ederim.
Aziz demiş ki:
15 July 2006, 6:31 pm
Ali Kardeş;
deiğini yaptım ama yine olmadı.Bir bakaıp kontrol edersen sevinirim.Zahmet olacak.Esenkal……..
ali demiş ki:
16 July 2006, 9:42 am
Aziz bey aslında olmuş, sadece son yazınızda fotoğrafın html kodlarında etiketlerini yanlış girmişsiniz onun için onda olmuyor (rel ve title etiketinde ikişer tırnak var). Bu gönderinizdeki resim gayet güzel çalışıyor.
aziz demiş ki:
16 July 2006, 3:13 pm
Sevgili Ali;
Tamam otırnakları kaldırdım. Zaten ben koymamıştım. Nasıl oldu bilmiyorum.Bir bak bakalım çalışıyormu. Yani sence olmuşmu? Teşekkür ederim.
aziz demiş ki:
16 July 2006, 3:16 pm
Birde sergileyeceğimiz resimin sendeki gibi sayfada küçük tıklayınca büyük olması için ne yapmamız lazım?
ali demiş ki:
16 July 2006, 10:54 pm
Çalışıyor, sorunu gidermişsiniz.
Birde sergileyeceğimiz resimin sendeki gibi sayfada küçük tıklayınca büyük olması için ne yapmamız lazım?
Bunun için önce büyük bir fotoğraf seçip bunun birde yazınızın düzenin bozmayacak küçük bir halini oluşturmanız ve kodu aşağıdaki şekilde düzenlemeniz gerekiyor;
<a rel=”lightbox” title=”Arı vız vız…” href=”http://sunucu.com/resmin-buyuk-hali.jpg”><img src=”http://sunucu.com/resmin-kucuk-hali.jpg” alt=”” /></a>
Blogger kullanırken daha kolay bir yol da izleyebilirsiniz. Büyük bir fotoğraf seçin ve yazıya eklerken küçük boyut seçerek sunucuya gönderin. Sonra da fotoğrafın html koduna lightbox’ı ekleyin.
Kolay gelsin.
aziz demiş ki:
18 July 2006, 3:12 pm
Sevgili ali;
Aşağıda vereceğim posttaki kodu kontrol edersen sevinirim.
bence bir anormallik var gibi sendeki yukardaki kodla uyuşmuyor.Ne dersin?
aziz demiş ki:
19 July 2006, 2:15 pm
Canım Ali;
Gönderdiğin kodun düzeltilmiş halini yaptım değişen bir şey olmadı ama ben meseleyi birazcık çözdüm gibi. Belki bloggerda böyle çalışıyor. Seninkinin wordpress olduğunu unutmuşum. Sen de a onclick=”javascript:urchinTracker diye bir ifadeyle başlıyor bu ifadenin ne olduğunu biliyorum ancak bende sendeki gibi animasyonlu çalışamamasını çözemedim. Birde sendeki wordpress php eklentisi olduğu için mükemmel çalışıyordur. Blogger a uyarlanınca da ancak bu kadar oluyor heralde.Herneyse yardımların için teşekkür ederim.
Ali Yucel demiş ki:
19 July 2006, 2:45 pm
Merhaba arkadaslar ben bu scripti kullaniorum fakat resimler bir iframe in icinde tıklandigi zaman tum sayfada deglde iframenin icinde cikiyor..Bunu nasil tum sayfada cikmasini saglayabilirim..
can aksu demiş ki:
2 August 2006, 6:09 am
oldukça profesyonel bir açıklama olmuş… WordPress ile bugün tanıştım, ve bilgisayarıma bir şeyler yapmaya çalışıyorum. Yukarıda anlattığınız adımları teker teker yaptım, ama şablon deyince kalakaldım.. Şablon nerededir kimbilir :))) Ben gerçekten acemiblogcuyum :))
ali demiş ki:
2 August 2006, 10:01 am
Görüşleriniz için teşekkür ederim Can bey. Buradaki makale benim Blogger kullandığım zamanlardan kalma ve onun için de LightBox’ın Blogger’da nasıl kullanılabileceğini anlatıyor. Kusura bakmayın, sanırım WordPress’e geçişten sonra uygun bir ifade ile bu durumu açıklamam gerekirdi.
Eğer WordPress kullanacaksanız ve LightBox enterasyonu yapmayı düşünüyorsanız bunun çok kolay bir yolu var, o da bu iş için hazırlanmış çeşitli eklentileri (bkz. 1, 2) kullanmak. Eklentileri nasıl kullanacağınızı ise buradan öğrenebilirsiniz.
Kolay gelsin.
wolkanca demiş ki:
9 August 2006, 12:52 am
Merhaba,
Benim kullandığım WordPress temasında bu eklenti çalışmıyor yani aslında çalışıyor ama diğer fonksiyonları bozuyor blogumda arama fonksiyonu var lightbox ile çalışan o bozuluyor bunu nasıl halledebilirim bir kaç gündür deli gibi dolanıyom ecnebi sitelerde Ali fikrinizi almak istiyom napiim ben? nasıl çözeriz?
ali demiş ki:
9 August 2006, 7:55 pm
Eğer eklenti kodlarını incelemişseniz farketmişsinizdir, aslında WordPress için üretilen LightBox eklentilerin yaptıkları sadece gerekli JavaScriptleri head bölümüne ekleyip, metinler içinde “linked to image” şeklinde bulunan grafiklerin kodları içine de rel=”lightbox” eklemekten ibarettir.
Sizin kodlarınıza baktığımda arama fonksiyonu için rel=”lightbox1″ kullandığınızı görüyorum. Çözümünüz bunu rel=”lightbox” şeklinde değiştirip, sonra bu eklentilerden birisini (m3nt0r‘unkini tavsiye edebilirim) kullanmanız olabilir.
Eğer bunu denediyseniz ve sorununuz hala devam ediyorsa, bu kez size daha köklü değişiklikler yapmanızı zorunlu kılacak, fakat sizin için çok daha iyi olacağını düşündüğüm, bir alternatifi önereceğim. İnanın, biraz zaman bulsam bende tüm ajax fonksiyonları için buna geçeceğim :)
Kolay gelsin.
wolkanca demiş ki:
9 August 2006, 7:59 pm
Ali zaman ayırdığın için teşekkür ederim şimdi bunları bir deneyecem umarım olumlu sonuç alacağım.
ali demiş ki:
9 August 2006, 8:03 pm
Rica ederim, elimden geldiğince her zaman yardım etmeye çalışırım.
Tekrar kolay gelsin.
Guajira demiş ki:
15 August 2006, 12:40 pm
Çok uzun bi iş :(
Emre demiş ki:
2 September 2006, 1:04 pm
lightbox ‘u kendi hazırladığım normal bir htm de nasıl kullanabilirim.
ali demiş ki:
2 September 2006, 1:17 pm
Burada yazılanları takip ederek yapabilirsiniz.
Emre demiş ki:
2 September 2006, 5:16 pm
Teşekkür ederim Ali. Ama deniyorum olmuyor.
ali demiş ki:
3 September 2006, 9:57 am
İstersen bir de orijinal kaynaktaki dökümantasyondan yardım almayı deneyebilirsin, eminim işe yarayacaktır.
Emre demiş ki:
3 September 2006, 3:55 pm
Çok teşekkür ederim sayenizde başardım
sabahmeltemiii demiş ki:
20 September 2006, 9:04 am
Ya çok karçaşık anlatılmış:(
Hiç bişey anlamadım :(:(:(
2.Açtığınız bu dosyanın içeriğinde bulunan loading.gif, close.gif, blank.gif ve overlay.png’yi ücretsiz bir grafik sunucusuna (örneğin; imageshack.us) gönderin ve bu dosyaların sunucudaki bağlantı adreslerini bir kenara not edin.
Nasıl oluyor bu???
ali demiş ki:
21 September 2006, 11:25 pm
Eminim imageshack.us servisine bir grafik dosyası göndermeyi denerseniz tüm soru işaretleriniz ortadan kalkacak :) Oldukça basit ve kullanıcı yönlendiren bir arayüzü var.
sesebian demiş ki:
26 October 2006, 11:13 pm
ya bu 3 şıktaki anlatımı tam olarak anlamadım..kopyalıcagımız yer tam olarak neresi..ordaki değerleri silip yerine linklerimi yapıtıracagız..parantezin içinemi..yardımm
Can demiş ki:
30 March 2007, 1:45 pm
bende yeni bir blogger‘ım blogger.com blog hizmetini kullanıyorum.sizin dediğiniz gibi resimleri imageshack
sitesine yükledim
css.txt ve js.txt dosyalarınıda gerekli değişiklikleri anlatıldığı gibi yaptım ama
6.adımda yazılan </style> kodu benim şablonumda mevcut değil.acaba benmi yanlış yerde yanlış birşeymi arıyorum yada blogger.com artık böyle birşeye izin vermiyormu konu geçen sene yazılmış o yüzden merak ettiğim için sormak istedim.
olsada olmasada anlatımınız için ayrıca teşekkür ederim.
bak demiş ki:
6 July 2007, 4:44 pm
konu üzerinden çok süre geçmiş, arada blogspot yeni versiyona geçtiği için midir, html kodunda style bölümünü ben de bulamadım, bu kadar eski yazıya cevap verir misiniz bilmem ama bu bölümü eklemenin bir yolu var mıdır…
emre sümer demiş ki:
2 August 2007, 11:39 pm
Merhaba arkadaslar ben bu scripti kullaniorum fakat resimler bir iframe in icinde tıklandigi zaman tum sayfada deglde iframenin icinde cikiyor..Bunu nasil tum sayfada cikmasini saglayabilirim..
ekubio demiş ki:
17 December 2007, 9:29 pm
acemi ben dediklerini aynen uyguladım fakat head dosyasının üstüne koyduğumda Js. dosyasını kabul etmiyor :S
ufuk demiş ki:
22 June 2008, 4:55 pm
bunu kullanmak için klasik şablon kullanmak mı gerekiyor
nezihdarcin demiş ki:
12 July 2008, 4:59 pm
MErhabalar Ali abi….
Böyle değerli ve insanların ufkunu açan paylaşım için çok teşekkür ederim,
Fakat bende ”/style” koduna blogger üzerinde rastlayamadım (:
yardımcı olabilirseniz eğer çok sevinirim…
saygılarımla…