lightbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster
lightbox etiketine sahip kayıtlar gösteriliyor. Tüm kayıtları göster

En İyi Wordpress Lightbox Eklentileri

| | Comments

Lightbox giderek daha fazla site tarafından tercih edilen bir özellik oldu. Özellikle son iki yıldır wordpress sitelerinde trend haline geldi. Öncelikle sitenizdeki resimleri ve diğer tüm medya dosyalarını lightbox içinde açabilirsiniz. Wordpress sitelerinde lightbox özelliğini kullanmak için eklenti kullanmanız gerekiyor. Piyasada birçok eklenti bulunmakta ama belli başlı ve en kullanılanları listeledim.


2017 Yılında En Çok Tercih Edilen Lightbox Eklentileri

Colorbox Jquery Lightbox 1.3.6 Blogger Entegrasyonu

| | Comments

Daha önce Colorbox uygulamasının bir kaç versiyonunun anlatımı Blogger altyapısı kullananlar için yapmıştım. Colorbox uygulaması sürekli güncellenen ve bünyesine yeni özellikler katan bir jquery uygulamasıdır. Ayrıca Blogger altyapıssında sorunsuz ve blogunuzu kasmadan çalışmaktadır.

Colorbox Jquery, Lightbox uygulamalarından bir tanesidir. Benim en sevdiğim uygulamadır. Jquery ile hazırlandığı için çok kullanışlı ve çok hızlı... en yeni versiyonu olan 1.3.6 sürümünde de bazı yenilikler yapılmış. Bunlar genelde kod yapısında yapılan iyileştirmeler diyebilirim.

Daha önceki anlatımlarımı inceleyenler bu eklentiyi kurmakta fazla zorlanmayacaklar. Colorbox uygulamasının 5 adet demosu var. Ben sizlere demo 1 den başlayarak sırasıyla anlatımları yapacağım.

ColorBox Blogger Eklentisi - LightBox Klonu Bölüm 2

| | Comments

colorbox blogger
ColorBox uygulamasının anlatımını yaptığım ilk bölümde de bahsettiğim gibi biraz detaylı anlatım yaptım. Blogger'e yeni geçiş yapmış blogcu arkadaşlar için daha anlaşılır olması için detaylı anlatımın daha yararlı olacağını düşündüm. ColorBox uygulamasının ilk Demo (Demo 1) örneğinin uygulanış biçimini ilk bölümde anlattıktan sonra sırasıyla diğer demoların anlatımlarını yapalım.

Demo 2 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example2/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.bgOpacity = '0.5';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İl bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 3 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom.css' title='example' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example3/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true}); $('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

Demo 4 Uygulanış Biçimi Anlatımı

Aşağıdaki kodu </head> kodunun hemen üstüne yapıştırıp şablonumuzu kaydediyoruz.

<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/colorbox.css' />
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom.css' />
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example4/colorbox-custom-ie.css' />
<![endif]-->
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type='text/javascript'>google.load('jquery', '1.3.2');</script>
<script type='text/javascript' src='http://tm52.110mb.com/colorbox/jquery.colorbox.js'></script>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.8';
$.fn.colorbox.settings.contentCurrent = '({current}/{total})';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Yazı içindeki resimler'e ekleyeceğimiz etiketler tek resim için class="resim" grup olarak gösterilecek resimler için class="resim" rel="ailem" şeklinde olacaktır. İlk bölümde yaptığım anlatımda örnek kodları görebilirsiniz...

ColorBox uygulaması bütün tarayıcılarda sorunsuz çalışmaktadır. Güle güle kullanın. Bloguma destek olmak istiyorsanız sidebarda bulunan Paypal Bağış butonunu kullanarak bağışta bulunabilir. Veya blogunuzda bağlantı kutularınıza (30x30 px) aşağıdaki kodları ekleyebilirsiniz...

<a href="http://www.teknomobi.net" target="_blank" title='TeknoMobi'><img src="http://i44.tinypic.com/2u56k9t.gif" border="0" alt="teknomobi"></a>

ColorBox Blogger Eklentisi - LightBox Klonu - Bölüm 1

| | Comments

colorbox blogger
MultiBox uygulamasının Bloggger'e uyarlanması bayağı bir zamanımı almıştı. Uygulamayı bitirdikten sonra biraz mola verdim sayılır. Ama şimdi sizlere yeni ve çok beğeneceğiniz başka bir uygulamanın Blogger'e uyarlanmış halini vereceğim.

Öncelikle ColorBox uygulaması daha önce anlatımını yaptığım LightBox uygulamasının bir benzeri fakat hem görünüş hem de boyut açısından daha optimize bir uygulamadır.

ColorBox uygulamasının Blogger'de nasıl çalıştığını merak ediyorsanız aşağıda verdiğim demo adreslerinde ki resimlere tıklayabilirsiniz.

Demo 1 , Demo 2 , Demo 3 , Demo 4

Yukarıda verdiğim demo sayfaları benim blogger için hazırladığım  demo sayfalarıdır. ColorBox uygulamasının kendi demo sayfalarına buradaki sayfada bulunan view demosration bölümünden ulaşabilirsiniz.

Demoları incelediyseniz sırayla anlatımı yapmaya başlayayım.. Hangi demoyu beğendiyseniz aşağıda o demonun anlatımındaki kodları belirttiği şekilde blogunuza uygulayın. İlk anlatımı biraz detaylı olarak yapacağım diğer üç anlatımı biraz daha sade yapacağım.

Demo 1 Uygulanış Biçimi Anlatımı
  • İlk olarak Temamızda Yerleşim - HTML'yi Düzenle diyoruz. Tam şablonu yükle diyerek temamızın bir yedeğiniz alıyoruz. Ardından Widget Şablonlarını Genişlet diyoruz.
  • Şimdi temamızda </head> kodunu aratıyoruz ve bu kodun hemen üstüne aşağıdaki kodu yerleştiriyoruz.

<link href='http://tm52.110mb.com/colorbox/colorbox.css' media='screen' rel='stylesheet' type='text/css'/>
<link href='http://tm52.110mb.com/colorbox/example1/colorbox-custom.css' media='screen' rel='stylesheet' type='text/css'/>
<!--[if IE]>
<link type='text/css' media='screen' rel='stylesheet' href='http://tm52.110mb.com/colorbox/example1/colorbox-custom-ie.css' title='example' />
<![endif]-->
<script src='http://www.google.com/jsapi' type='text/javascript'/>
<script type='text/javascript'>google.load(&#39;jquery&#39;, &#39;1.3.2&#39;);</script>
<script src='http://tm52.110mb.com/colorbox/jquery.colorbox.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){
$.fn.colorbox.settings.transition = 'elastic';
$.fn.colorbox.settings.bgOpacity = '0.9';
$.fn.colorbox.settings.contentCurrent = 'Resim {current} - {total}';
$('.resim').colorbox();
$('#ajax').colorbox({contentWidth:'300px', contentHeight:'195px'});
$('#flash').colorbox({contentAjax:'../content/flash.html'});
$('#websayfa').colorbox({contentWidth:'750px', contentHeight:'450px', contentIframe:true});
$('#inline').colorbox({contentWidth:'500px', contentInline:'#inline-content'});
});
</script>

Üstteki kodu yerleştirdikten sonra şablonumuzu kaydediyoruz. Tema ile ilgili işlem bu kadar artık yazılarımız üzerinde düzenleme yapacağız.
  • Yazımızı yazdıktan sonra oluştur bölümünün solunda bulunan HTML'yi Düzenle kısmına girerek yazımızdaki resimlerin kodlarını görüyoruz. Eğer yazınıza resim eklediyseniz resmin kodu aşağıdaki gibi olacaktır.
<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eklediğimiz resimin ColorBox penceresi ile açılması için yukarıdaki koda class="resim" etiketini ekliyoruz. Sonuçta resim kodumuz şu şekilde olacak.

<a href="http://i44.tinypic.com/5v2bdz.jpg" imageanchor="1" class="resim" title="Marylou on Cumberland Island" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="283" src="http://i44.tinypic.com/5v2bdz.jpg" width="420" /></a>

  • Eğer birden fazla resim eklediyseniz ve bunların tek pencerede peş peşe tıklama ile gösterilmesini istiyorsanız(Demo 1 sayfasında alttaki üç resim). Yukarıda eklediğimiz etikete ek olarak birde rel="ailem" şeklinde bir etiket daha ekliyoruz. Grup olarak göstereceğimiz reismlerin kodlarıda şöyle oluyor...

<a href="http://i44.tinypic.com/ve6802.jpg" imageanchor="1" class="resim" rel="ailem" title="Me and my grandfather on the Ohoopee." style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/ve6802.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/htsjrd.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as a child" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="60" src="http://i44.tinypic.com/htsjrd.jpg" width="96" /></a>

<a href="http://i44.tinypic.com/53r4w8.jpg" imageanchor="1" class="resim" rel="ailem" title="On the Ohoopee as an adult" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="63" src="http://i44.tinypic.com/53r4w8.jpg" width="96" /></a>

  • Blogumuzda verdiğimiz herhangi bir bağlantının ColorBox penceresinde açılmasını istiyorsak aşağıdaki kodu kullanıyoruz.

<a id="websayfa" href="http://www.google.com.tr/">Web Sayfası - Iframed Content</a>

Bu bölümde ilk demonun anlatımına yer verdim. Bir sonraki yazımda diğer demoların uygulanış biçimlerine yer vereceğim.

Lightbox js ile Blogger'de Resimlere Efekt Verelim

| | Comments

Daha önce Düşüngeç'te ki yazımda Lightbox'un Blogger üzerinde nasıl çalıştırılacağını ve nasıl kullanılacağını anlatmıştım. Lightbox üzerinde birkaç iyileştirme yaptım. Ayrıca efektlerin next-prev-close resimlerini ileri-geri-kapat şeklinde güncelledim. Yani bir nevi Türkçe'leştirdim.

Lightbox'un Blogger'de kullanılabilmesi için temanıza eklemeniz gereken dosyaları sizler için kendi dosya barındırma depoma yükledim. Sizlerin tek yapması gereken aşağıda anlattıklarımı uygulamak...

İlk olarak Ligtbox uygulamasının blogger üzerinde nasıl çalıştığını görmek için buraya göz atabilirsiniz. (Bu verilen bağlantıda bir önceki lightbox anlatımımdaki dosyaları kullandım. Sadece örnek olması için bakabilirsiniz)

Lightbox Blogger Entegrasyon İşlemleri

  • Ö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://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.css" type="text/css" media="screen"/>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/prototype.js" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/scriptaculous.js?load=effects,builder" type="text/javascript"></script>

<script src="http://turkiyem.weebly.com/uploads/1/6/3/5/1635244/lightbox.js" type="text/javascript"></script>

Öncelikle şablonda önizleme yap diyoruz. Blogumuz açılıyorsa ş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.

Evet arkadaşlar blogunuza entegre ettikten sonra görüşlerinizi bildirirseniz sevinirim!..

MultiBox İle Blogger'inizi Coşturun!..

| | Comments

TeknoMobi

Bir önceki yazımda sizlere yeni bir yazı dizisi ile karşınızda olacağımdan bahsetmiştim. Ehh artık Blogger kukllanıcılarını fazla bekletmeden blogunuzu çok daha kullanışlı hale getirebileceğimizi gösterelim. Şimdi bazılarının aklına yazı dizisi neden yapıyorsun bir yazıda anlatsan olmaz mı diyenler çıkabilir. Ama yapacağımız işlemlerin detaylı olması ve acemi kullanıcıların kolaylıkla anlayabilmesi için yazı dizisi olarak yayınlamayı uygun gördüm. Ama şunu belirtmeliyim ki ülkemizde Blogger uygulamaları ile uğraşan pek fazla kişi yok olanlarda bir süre sonra kendini kenara çekiyor. Neden diye kendimize sorarsak yazılara yeterli ilginin gösterilmemesi daha doğrusu yazılara geri dönütün sağlanmaması diyebiliriz. Yorum yapılmaması vb.

Bende elimden geldiğince Blogger alt yapısı ile yayın yapan blogculara bloglarını daha kullanışlı hale getirebilmeleri için çalışıyorum. Ama yukarda bahsettiğim gibi gerekli geri dönütleri aldığım pek söylenemez. Neyse konuyu fazla uzatmayacağım.

LightBox uygulamasını çoğu kullanıcı biliyordur. Mutlaka bir blogda veya sitede denk gelmiştirsiniz. LightBox ile resimleri blogumuzdan ayrılmadan hoş bir şekilde gösteriyoruz. LightBox'un Blogger'e entegre etme işlemini Düşüngeç'teki yazımda anlatmıştım.

Şimdi ise LightBox'un çok daha gelişmiş bir türevi olan MultiBox uygulamasını Blogger için kullanılabilir hale getirdim. MultiBox ile neler mi yapabiliriz.

  • Resimleri blogumuzdan ayrılmadan açılır hale yani pop-up şeklinde açabiliriz. 
  • swf, flv gibi flash videoları 
  • mov uzantılı quicktime videoları
  • wmv uzantılı  windows media videoları
  • rv / rm / rmvb uzantılı real mediavideolarını
  • mp3 formatındakimizik dosyalarını
  • ve Youtube, Vimeo, Dailymotion, Google Video, Yahoo Video sitelerindeki videoları blogunuzdan hiç ayrılmadan ziyaretçilerinize dinletebilir / izletebilirsiniz. Bunların hepsinin örneklerini aşağıda verdiğim demo sayfasındaki bağlantılara tıklayarak görebilirsiniz.

Multibox uygulamasının Blogger'de nasıl çalıştığını görmek için hazırlamış olduğum Multibox Demo sayfasına göz atabilirsiniz..

Multibox uygulamasının tarayıcı uyumluluğu : Firefox 3/3.5 , Chrome 2-3 , Safari 3-4 , İnternet Explorer 7-8 , Opera 9-10

MultiBox Ders 1 , MultiBox Ders 2 , MultiBox Ders 3 , MultiBox Ders 4 , MultiBox Ders 5 , MultiBox Ders 6 , MultiBox Ders 7