Blogger için LightBox Uygulaması

Photoblog yazarlarının belkide en beğendiği JQuery uygulamalarından biri olan View pictures of Lightbox'ı sizlerle paylaşıp Photoblog yazarlarına veya bloglarına efekt katmak isteyen yazarlara nasıl şablonlarına entegre edeceklerini anlatacağım,

Öncelikle daha önce bloğunuz için yazmış olduğum Colorbox JQuery uygulaması nı hatırlatmak isterim.

Colorbox alternatif bir lightbox uygulamasıdır.Colorbox daha hızlı ve 5 ayrı stile sahip,ayrıca youtube video sergileme,web page - internet sayfası sergileme,Ajax sayfa sergileme vb. daha birçok sergileme yöntemine izin vermektedir.Colorboxla ilgili detayli bilgi için tıklayınız.

Şimdi colorbox uygulamasından ziyade Lightbox uygulamasını beğenen ve bloğuna entegre etmek isteyen arkadaşlarımız için entegre işlemlerini sırasıyla uyguluyoruz.

Öncelikle hazırlamış olduğumuz demo sayfasını görüntülemek için buraya tıklayınız.

İlk önce Blogger kumanda paneli ne giriş yapıyoruz.

Sırasıyla Şablon - Şablonu Düzenle - Widget Şablonlarını Genişlet sekmelerini kullanıyoruz.CTRL + F kısayol yardımı ile arama kutusunu açıyoruz ve < / head > kodunu aratıp buluyoruz.

Aşağıdaki vermiş olduğum kodu bulduğumuz < / head > kodundan hemen önce şablonumuza ekliyoruz.

<!--Light Box Code Starts  Teknokirpi-->
<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7x_vP1UsiyN6DTNLWvMFivj6niGhD-vlPCmtr41VtqmPjbY2ZyUzQGW4qK7TDeAGPsKz8zTbzK-zlqv1xFWj1Hn9Jr01j3gYUTi6sCBmZsR8JkowDg6Os8GTtK-HNRSYIa0OIvFh_Ti8/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdPmFRK2y55LLXCvGe79X8smAG7SD6G4amVtVFd5LbYePMotlqomufvlo2PYqWT_Ui6WIBok47q8HhtBEFazCcQAgsR1Xi3tjkmUiA7KBlFD5nt2Ox_kA9hkWUc9UcQYq6M0wXnqbNrBw/) 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; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>
<!--Light Box Code Ends Teknokirpi-->

Not : Siz isterseniz yukarıdaki kodların başlıklarında bulunan Teknokirpi yazılarını silebilirsiniz.

Sıradaki işlem olarak Şablonumuza önizleme yapıyoruz herhangi bir hata almadıysak şablonumuzu kaydediyoruz.

Lightbox'ı bloğumuza entegre etmiş buluyonuyoruz.

Resimlerimizi tekli olarak veya albüm olarak lightboxta göstermek için aşağıdaki kod kümelerini inceleyeip uygulamanız gerekiyor.

Tekli lightbox resim gösterimi kod kümesi aşağıdadır.

rel="lightbox" title="Resim başlığı buraya"

Yukarıdaki kodları yazınıza eklemiş olduğunuz resimlerin kodlarının arasına eklemeniz yeterlidir.

Örnek Kod :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7I7s4CalngG2ylXuIAU7YbVDUtAJ529Op0AGVRLqOlvXubUswmx96BTBaX-71ISaF7lP-hyx8yXYhDRMS7iZuhT-WnTqvhyphenhyphenmdMu-end5E3VHffeazJn8Ts8B6MhdXULxMKySphDC3g3r/s1600/simple-jquery-lightbox.png" imageanchor="1" rel="lightbox" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" title="Resim başlığı buraya"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7I7s4CalngG2ylXuIAU7YbVDUtAJ529Op0AGVRLqOlvXubUswmx96BTBaX-71ISaF7lP-hyx8yXYhDRMS7iZuhT-WnTqvhyphenhyphenmdMu-end5E3VHffeazJn8Ts8B6MhdXULxMKySphDC3g3r/s1600/simple-jquery-lightbox.png" /></a>

Albüm lightbox resim gösterimi kod kümesi aşağıdadır.

rel="lightbox[albümismi]" title="Resim başlığı buraya"

Yukarıdaki kodları yazınıza eklemiş olduğunuz resimlerin kodlarının arasına eklemeniz yeterlidir.

Örnek Kod :

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7I7s4CalngG2ylXuIAU7YbVDUtAJ529Op0AGVRLqOlvXubUswmx96BTBaX-71ISaF7lP-hyx8yXYhDRMS7iZuhT-WnTqvhyphenhyphenmdMu-end5E3VHffeazJn8Ts8B6MhdXULxMKySphDC3g3r/s1600/simple-jquery-lightbox.png" imageanchor="1" rel="lightbox[albümismi]" title="resim başlığı buraya" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd7I7s4CalngG2ylXuIAU7YbVDUtAJ529Op0AGVRLqOlvXubUswmx96BTBaX-71ISaF7lP-hyx8yXYhDRMS7iZuhT-WnTqvhyphenhyphenmdMu-end5E3VHffeazJn8Ts8B6MhdXULxMKySphDC3g3r/s1600/simple-jquery-lightbox.png" /></a>

Albüm olarak gösterdiğiniz resimlerden herhangi birine tıklayarak, Next and Prev tuşlarıyla albüm içerisindeki resimlerde gezinti yapabilirsiniz.

Not : [albümismi] yazan kısımdaki albümismi kısmına resimlerinizi göstermek istediğiniz albüm adını veriniz.Unutmayın hangi resimlere aynı albüm adını verirseniz o albümde o resimler gözükür.

Lightbox blogger'a entegre edilmiş oldu.Artık resimlerinize tıkladığınızda Lightbox uygulamasıyla görüntülenecektir.

Dip Not : Lightbox eklentisi .js uzantılı dosyalarla çalıştığı için sayfanıza girdiğinizde web sayfanız tam yüklenmediğinde çalışmayabilir.Web sayfanızın yüklenmesi bittiğinde denemez gerekmektedir.

Kaynak : BloggerPlugins.org

Be a Fan

Bu yazıyı oylamak istermisiniz ?