18 Şubat 2010

Büyük boyutlu resimleri ufak alanlarda göstermenin en iyi yolu Bloggera Image Zoom Eklemek. Nasıl mı?
blogger-image-zoom
Bloggera Image Zoom Ekleme özelliği ile büyük boyutlu resimleri küçük bir alanda yayınlama imkanınız olacak. Dahası resmin üzerine gelindiğinde yanda açılacak olan pencere yardımı ile resmin tüm detaylarını inceleyebileceksiniz. Bir örneğini yukarıdaki örnek resimde görebilirsiniz. Küçültülmüş büyük resme tıklandığında aynı sayfa içinde büyüyen özelliği de bu yazıya benzer yazı olarak not olarak ekliyorum, adresi şöyle; Blogger Resimlerinize Zoom Yapın
Öncelikle temanızın yedeğini alın. Ardından Yerleşim, HTML'yi düzenle yolunu izleyin ve şablonunuzda ]]></b:skin> kodunu aratın. Bu kodun hemen altına aşağıdaki kodu yapıştırın;
<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://www.weebly.com/uploads/2/2/1/0/2210502/jquery.jqzoom1.0.1.js' type='text/javascript'/>
<link href='http://www.weebly.com/uploads/2/2/1/0/2210502/jqzoom1.css' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(function() {
var options =
{
zoomWidth: 250,
zoomHeight: 250
}
$(&quot;.jqzoom&quot;).jqzoom(options);

var options2 =
{
zoomWidth: 250,
zoomHeight: 250,
zoomType:&#39;reverse&#39;
}

$(&quot;.jqzoom2&quot;).jqzoom(options2);

});
</script>
Şablonunuzu önizleme yapın. Sorun yoksa, kaydedin. Yukarıdaki kodda yer alan mavi renkli kısımlar zoom penceresinin boyutlarıdır. İstenilen boyutlar yazılabilir.

İkinci adım olarak, yeni bir yazı oluşturun ve yükleyeceğiniz resimler için alltaki kodu düzenleyin.
<a href="BUYUK-RESIM" class="jqzoom" title="RESIM-BASLIK"><img src="KUCUK-RESIM"/></a>
Yukarıdaki örnek resimde iki farklı resim kullanılmıştır. Bunlar; büyük resim ve küçük resim şeklindedir. Bu özelliği kullanmak için aynı resimden farklı boyutlarda iki adet resim yüklemelisiniz. Diger fark ise class="jqzoom" kodunun eklenmesidir.

class="jqzoom" kodunun yerine class="jqzoom2" yazarsanız, alttaki resimdeki gibi donukluk efekti (Opacity Effect) kullanabilirsiniz.
image-zoom-opacity-effect
DEMO
Anlatılanların blogunuzda nasıl görüntüleneceğini merak ediyorsanız, Blogger Image Zoom sitesini ziyaret edebilirsiniz.

Yukarıda anlatılan Resimlerinize Zoom Ekleme çalışması hakkında projenin yaratıcısı Marco Renzi'nin JQZoom Evolution isimli yazısından daha fazla bilgi edinebilirsiniz.
Yorum
kadir dedi ki...
demoda olmadı da resmin üzerine tıklayınca aynı sayfa içinde slayt şeklinde açılması mümkün mü acaba yani lightbox uygulaması gibi (o uygulamayı bi türlü entegre edememiştim)
Sade dedi ki...
lighbox uygulamasını da anlatacagım çok yakında. Tekrar denemeni öneririm yada aldığın uyarıyı yazarsan cevap verebilirim. Kodların hepsini kopyaladığından emin ol. İki farklı büyüklükte aynı resimden yapmayı unutma. Şimdilik bu kadar dikkat edebileceğin yerler...
sultan kandemir dedi ki...
Bloggera Image Zoom Ekleme yaptım çalışmıyor neden aceba
sitemdenmi kaylannıyor
http://fsm-test.blogspot.com/2013/10/resim-baslik.html
http://silagym.blogspot.com
cevabınızı bekliyorum saygılarımla