Light Box Blogger Resim Görüntüleme Eklentisi

Light Box Blogger Resim Görüntüleme Eklentisi

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;

Demo Görüntüsü

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;
<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>#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'/>

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 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;

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ığı"

► 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.