25 Mart 2010

Light Box, bir çoğunuzun bildiği ve belkide blogunda kullandığı ya da kullanmak istediği şık bir resim görüntüleme eklentisi. Blogger resim görüntüleme özelliği hakkında bulabildiğim türkçe kaynakları sizler ile paylaşmak ve konuyu Takip Listem penceresinden sizlere anlatmak istiyorum. Öncelikle, Light Box özelliğinin yaratıcısının, uygulamasını örnekler ile anlattığı yazısını incelemenizi tavsiye ederim; Lokesh Dhakar. Örnek resimlere tıklayarak uygulamanın nasıl çalıştığı hakkında bilgi sahibi olabilirsiniz.

Tabi bu uygulamanın blogger alt yapısına uyumluluğunu merak ediyor olabilirsiniz. Uygulamanın blogger ile uyumlu çalıştığını sizlere göstermek için bir örnek blog oluşturdum. Merak ediyorsanız, Light Box Blogger Resim Görüntüleme uygulamasını alttaki adresten kontrol edebilirsiniz;




Light Box Blogger Resim Görüntüleme Uygulamasını Blogger'a Entegre Etmek

1. Blogger Kontrol Paneline Giriş Yapın.

2. Yerleşim ► HTML'yi Düzenle yolunu izleyin.

3. Alttaki kodu temanızda bulun.
</head>

4. Bulmuş olduğunuz kodun hemen bir üst satırına alttaki kodu yapıştırın;
<!--Light Box Blogger Resim Baslar-->
<style>
#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer&gt;#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://i43.tinypic.com/mj5wyd.jpg) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://i44.tinypic.com/mjljmh.jpg) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://files.bloggerplugins.org/lbox/js/scriptaculous.js' type='text/javascript'/>
<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/lightbox.js' type='text/javascript'/>
<!--Light Box Blogger Resim Biter-->
Temanızı kaydedin. Herhangi bir sorun ile karşılaşmadıysanız. İkinci adıma geçebilirsiniz. Kodun kaynağı, Blogger Widgets sitesidir. Eğer bir sorunla karşılaşırsanız, lütfen adımları tekrar edin. Sorun halen sürmekte ise, yorumlar kısmında sorununuz hakkında detaylı bilgi vererek yardım istemekten çekinmeyin.

Resimlerde Light Box Kullanımı için Resim Kodlarını Düzenleme 

Birinici adımı başarı ile tamamlayarak, Blogger temanızın Light box kullanımı için geliştirilmiş oldunuz. Şimdi, temanıza yukarıda eklemiş olduğunuz kodların, blogunuzda işler hale gelmesi için resim kodlarınızda ufak bir değişiklik yapmanız gerekiyor.

Bu adımda; Light Box uygulamasını kullanacağınız resimlerinize başlık ekleyebilir, tek ya da grup halinde resimlerin görüntülenmesini sağlayabilirsiniz.

Blogger Resim Yükleme
Normal olarak blogger resim ekle özelliği ile yazılarınıza resim eklediğinizde yazınızı Oluştur kısmından HTML'yi Düzenle kısmına geçerseniz; alttaki örnek resimdeki bir kodlama ile karşılaşırsınız. Örnek resmi detaylı incelemek için resme tıklayın.
Blogger Resim Yükleme


Blogger Resim Kodu Düzenleme
Yukarıdaki şekilde olan resim kodlarınızda iki küçük değişiklik yaptığınız anda o resim light box blogger resim görüntüleme özelliği ile görüntülenecektir.  Bunun için yapmanız gerekenler şöyle;
Light Box Blogger
Blogger Resim Kodu Düzenleme

1 - Yukarıdaki örnek resimde de görebileceğiniz gibi Bloggerda Light Box ile Resim Görüntüleme özelliğinin aktif hale gelmesi için kodda yer alan s1600-h kısmındaki -h kısmını silmelisiniz.

2 - Yukarıdaki örnek resimde belirtilen yere alttaki kod eklemelisiniz;

► Light Box ile Tek Resim Göstermek için Alttaki Kodu Ekleyin;
rel="lightbox" title="Resim Başlığı"
ya da
► Light Box ile Resimleri Grup Halinde Göstermek İçin Alttaki Kodu Ekleyin;
rel="lightbox[albumismi]" title="Resim Başlığı"

Yukarıdaki kodda albumismi yazan yere grup halinde göstereceğiniz resimlere ait bir grup adı yazabilirsiniz. Gruba ait tüm resimlerde aynı album ismi yazılmalıdır. Resim Başlığını her resim için ayrı ayrı yazabilirsiniz.

Uygulamada kullanılan resimleri türkçe olarak bulabildiğim düşüngeç sitesinin yazısından aldım. Ve Light Box penceresi açıldığında grup resimlerine ait başlığın altında yazan kaçıncı resim olduğunu belirten kısımları tamamen türkçeleştirdim. Diğer bulduğum yazıların tam manası ile önerilmeye değer olduğunu düşünmediğim için yer vermedim. Ancak, sizlerin konu hakkında benzer site önerileriniz varsa yorumlar kısmında belirtebilirsiniz. Gözden kaçırdıklarım olabilir. Farklı sitelerin, uygulamayı kullanmak isteyenler için yol gösterici olacağını düşünüyorum.

Eğer yazıyı beğendiyseniz ve uygulama kısmında da herhangi bir soru ile karşılaşmadıysanız; Twitter, Facebook, Delicious vb. sosyal paylaşım siteleri ile yazıyı paylaşırsanız çok sevinirim.

Kolay Gelsin.

Not: Yazıda anlatılan Light Box uygulaması, sadece resimler için geçerlidir.
Yorum
Web Tasarımı dedi ki...
Sonunda... Çok saol
Unknown dedi ki...
Lightbox uygulamasını daha önce görmüştüm ancak Colorbox'ı görünce vazgeçmiştim. Jquery tabanlı olduğu için lightbox'tan daha hızlı ve aynı sayfa içerisinde site ve video da açabiliyorsunuz. Deneme blogum: http://blogcukdeneme.blogspot.com/

Ancak ne kadar hızlı olursa olsun sitenin açılışını yavaşlatıyor böyle eklentiler. Sadece sayfa gösteriminde yüklettirmeyi denemiş ama başaramamıştım. Anasayfayı açarken de yükleniyordu js dosyaları. :(
turkuazlale dedi ki...
Siteniz güzel ve yaralı,bu konularda fazla bilgi sahibi olmadıgım halde sizin yazılarınızdan çok faydalanıyorum,çok sagolun.Bazı konuları çözemiyorum yeterli bilgim olmadıgından tabiki, sizden bazı konularda yardım istiyorum.Mesela bloguma sayfalar eklentisi yaptım ama blog arşivini bir türlü işleme koyamadım.Sorunum yazılar çıkıyor ama üzerine tıklayınca konuya geçmiyor.Bunu bir türlü anlayıp uyguluyamadım,bu konuda yardım ederseniz çok sevinirim.ŞİMDİDEN İLGİNİZ İÇİN TEŞEKKÜR EDERİM,ALLAHA EMANET OLUN.
Unknown dedi ki...
Allah Allah, şimdi test ettim tekrar. Yüklenme süresi açısından büyük bir fark olmadı. Kaldırdığım diğer eklentilerin günahını colorbox'tan çıkartmışım galiba. Tekrar kullanmaya başladım.
Sade dedi ki...
@Tyler: Bu tamamen zevk işi ister ColorBox ister LightBox hemen hemen aynı mantıkla çalışıyorlar. Siteniz için performans açısından ya da görsellik açısından uygun gördüğünüzü kullanabilirsiniz.

@Turkuaz Lale: Merhaba, blogger kullanıcıları için faydalı bilgileri paylaşabiliyorsam ne mutlu. Amaç yardım. Blog arşivinden kastınız eğer sağ sütununuzda şuan kullandığınız blogger arşiv eklentisi ise sorunsuz çalışıyor. Ancak site haritası eklentisini kast ediyorsanız. 4 farklı yöntem ile Site haritası oluşturma yazımdaki 2. yöntemi size öneririm ;) Kullanımı çok basittir.
Evden Eve Blogger Taşıma dedi ki...
Denedim, blogumda sorunsuz şekilde görüntülendi. Çok saol Sade, eline sağlık ;)
Afet Ergü Şaşmaz dedi ki...
Sizin akılımızdan geçenleri okuma gibi bir özelliğinizmi var:)

Dün bir sitede bu özelliği tekrar görünce, "bunu nasıl yapabiliriz, Zeynel bey bu konuya bir el atsa diye içimden geçirmiştim" çok iyi bir isabet oldu bu, en kısa zamanda deniycem. Emeğiniz için teşekkürler.

Bu arada dikkat ettinizmi bilmiyorum, içerik ekleme sayfası değişmiş, yani güncellenmiş pencerede değişklik var, özellikler kısaldı, mesela yazı ortalama kısımları aşağı listelenmiş, bunun gibi bir kaç küçük değişiklik var, bu yüzdenmi bende ki "yazının devamı" özelliği kayboldu acaba?
Sade dedi ki...
@Hobicell: Merhaba, Blogger lightbox uygulaması yazısını bir kaç blogger kullancısının isteği üzerine yazmaya karar verdim. Yoksa nerde Heroes'taki Matt Parkman gibi akıldan geçenleri okuma özelliği :)

Kullandığınız tema eğer blogger'ın devamını oku özelliğini eklemesinden önce tasarlandıysa, büyük ihtimalle uyumsuzluk söz konusudur. "Hazir temalar icin devamını oku" yazımı okuyup orada yazanları uygularsanız sorunsuz şekilde devamını oku özelliğini kullanabilirsiniz.
Adsız dedi ki...
evet sonunda beklenen gün bizi kırmayıp yazdıgınız için teşekkürler

-konu dışı- r10 da üyeliginiz var mı acaba sizi o ortamda görmek isterim blogger hakkında derin bilgilerinize ihtiyacımız var ...
Sade dedi ki...
Rica ederim, ne demek... Vakit buldukça yardımcı olmaya çalışıyorum. R10 üyeliğim var ancak orada yazabilecek kadar vaktim yok maalesef. Özellikle bu aralar çok yoğunum. Önerin için teşekkü ederim.
Admin dedi ki...
Merhaba. Benim bir sorunum vardı. Sitemde bir çok resim mevcut. Bu resimlerin alt etiketleri mevcut ama title etiketleri yok. lightbox eklentisi kullanıyorum ama alt kısımda ki resim title etiketi boş olduğu için , resimlerin altında ki başlıklar yazılmıyor. Bunun ile ilili ne gibi bir düzenleme yada kod yaızlabilir?
Admin dedi ki...
Teşekkürler çok sade ve anlaşılır bir anlatım olmuş.Önceleri bu özelliği içeren sitelere imreniyordum ;)
krem-markalari dedi ki...
hocam resimler büyük görünüyo normal slayt oluyo ama ben tıklayınca büyümesini istiyorum ...

birde resimler alt alta ama ben yan yana yapmak istiyorum böyle bir imkanımız var mı acaba çok teşekkürler ...
Sade dedi ki...
Resimlerinizi yan yana görüntülenmesini istiyorsanız; yazıda geçen DeMo Blogununun son yazısını kontrol edin sizin için bir güzellik yaptım böyle daha da güzel görüntülendi.
Admin dedi ki...
Çok teşekkürler güzel bir paylaşım hemen uyguladım
Beyaz Kare Tasarım dedi ki...
Zor da olsa biraz uğraşıp başardım :)
Nasıl derseniz şöyle: bu eklenti ben de ön gördüğünüz "/head" kodundan önce yapınca olmadı. Sinir oldum ama aynı temaya sahip oluşturduğum diğer blogda çalıştı. Çünkü onda çok fazla eklenti yoktu. Böylece bir çakışma olmadı. Böylece verdiğiniz kodu şablonda başka bir yere deneme yanılma yoluyla yerleştirdim ve çalıştı :)

Ola ki benimle aynı sorunu yaşayanlar çıkarsa "/body" kodunun hemen üstüne yapıştırsınlar. Çalışacaktır. Belki olmaya da bilir ama ben de bu şekilde çalıştı paylaşmak istedim. Kolay gelsin.
Ömer_SD dedi ki...
Maalesef yalızca firefoxta çalıştı öyle yapınca. ie veya chormede çalışmadı :(
peki neden /head'in üstüne yapıştınca olmuyor, bunun bir açıklaması var mı? Yoksa bu işten vazmı geçmeli. Çünkü saatlerdir uğraşıyorum ama çözemedim...
yetrayk dedi ki...
bu eklenti çok güzelde internet expolrer kullanıcıları bloga girdiğinde site açılamıyor diyor. bu js kodları başka js kodlarıyla çakışıyor ne yapmamız gerek?
Adsız dedi ki...
çoooookkkk teşekkürler
Murat Yurtsever dedi ki...
Teşekkür ederim bunu arıyordum ilaç gibi oldu.
U*K dedi ki...
şimdi bunu siteme ekledim. çok güzel çalışıyor ama bir sorun var. resimlere tıkladıktan sonra lightbox açılıyor. sonra sayfaya geri döndüğümde aşağı yukarı gidemiyorum ( sayfa kilitleniyor). herkeste mi böyle yoksa sadece bende mi acaba?

http://facebook-kapak-tr.blogspot.com
Adsız dedi ki...
Hеllo thеre! Woulԁ you mind іf I shаrе your
blog with my mуspaсе group? There's a lot of people that I think would really appreciate your content. Please let me know. Many thanks

Feel free to visit my blog post - Film x vendeuse blonde baise a la plage gratuit
Adsız dedi ki...
I loved as much as you will гeceive carried out гight here.
The ѕketсh is tastеful, your authoгeԁ
material stylish. nonеtheless, you commаnd get got an edginess oveг that you wiѕh be delivering the
following. unwell unquestionably сome further fоrmerly
аgain since eхаctly thе samе nеarly a lot often іnside сase you shіelԁ this increase.


Taκe a look at mу website plan cul Capinghem: lynshaa 46ans
Unknown dedi ki...
ssssss
Adsız dedi ki...
hеy ! Je ѕuіs une jeunе fеmmе dе trente et un ρіges !

Је m'appelle Brier.
je suis des études de billettiste . Mes amies racontent régulièrement que je suis un drole d'oisеau.


Here is my site :: hotels
Adsız dedi ki...
Jе mе nomme Brier.
Je suіѕ une femme de tгente-sept berges : ϳe n'ai pas de retenue là dessus .
J'аi reprіѕ mes étudеs pour etre сommercialе .
Meѕ amies disent souvent quе je suіs très
сool.

Review my weblog; сοllеction armani 2013 []