TeknoMobi | Profesyonel ve Ücretsiz Blogger Tema

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

En İyi Wordpress Lightbox Eklentileri

Gönderen TeknoMobi | Pazartesi, Temmuz 17, 2017 | 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

Devamı »

Colorbox Jquery Lightbox 1.3.6 Blogger Entegrasyonu

Gönderen TeknoMobi | Pazar, Nisan 04, 2010 | 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.

Devamı »

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

Gönderen TeknoMobi | Çarşamba, Nisan 08, 2009 | Comments

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.

<!--[if IE]>

<![endif]-->

$(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.

<!--[if IE]>

<![endif]-->

$(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.

<!--[if IE]>

<![endif]-->

$(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>

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

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

Gönderen TeknoMobi | Salı, Nisan 07, 2009 | Comments

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.

<!--[if IE]>

<![endif]-->

$(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.

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

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