Bumerang - Yazarkafe

Animasyonlu Galeri ile Resimlerinizi Sergileyin

Blogunuzdaki resimleri müthiş bir resim-galerisi ile sergilemek isterseniz bu yazıyı mutlaka okumalısınız.Sadece 2 adımda herkesin rahatlıkla bloguna ekleyebileceği JQuery/Javascript ile hazırlanmış, çok cazip olan eklentiyi blogunuza widget olarak ekleyip, görünmesini istediğiniz yerde sergileyebilirsiniz.Galeriden biraz bahsedecek olursak,Üzerine geldiğiniz resim animasyonlu olarak,göze hoş gelecek bir hareketle zoomlanarak büyüyecek ve resme tıkladığınızda ziyaretçiyi resim için vermiş olduğunuz linke  yönlendirecek. Sözü fazla uzatmadan blogunuza resim galerisi eklemeyi 1. adımla anlatmaya başlıyalım.DEMO GÖRÜNÜM İÇİN TIKLAYIN.
1.Adım:Galeri Kodunu Şablonunuza Ekleme
Kumanda Paneli>Tasarım>Htmlyi Düzenle yolunu takip ediyoruz.Widget şablonlarını genişlet kutucuğunu işaretliyoruz.Kodlar içerisinde ]]></b:skin> kodunu Ctrl+F yardımıyla aratıp buluyoruz.
Aşşağıdaki kodu bulduğumuz kodun hemen üst satırına yapıştırıyoruz.
/* Blogger Zoom Gallery By Blogokulu.blogspot.com */
ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative;  /* Set the absolute positioning base coordinate */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Set the small thumbnail size */
-ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center;  /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}
Yine kodlar içerisinde </head> kodunu aratıp buluyoruz.Aşşağıdaki kodu kopyalayıp bulduğumuz </head> kodundan önceki kısma, yani bir üst satırına yapıştırıyoruz.
<script src='http://code.jquery.com/jquery-latest.js'
type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function(){

//Larger thumbnail preview

$(&quot;ul.thumb li&quot;).hover(function() {
$(this).css({&#39;z-index&#39; : &#39;10&#39;});
$(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;-110px&#39;,
marginLeft: &#39;-110px&#39;,
top: &#39;50%&#39;,
left: &#39;50%&#39;,
width: &#39;174px&#39;,
height: &#39;174px&#39;,
padding: &#39;20px&#39;
}, 200);

} , function() {
$(this).css({&#39;z-index&#39; : &#39;0&#39;});
$(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop()
.animate({
marginTop: &#39;0&#39;,
marginLeft: &#39;0&#39;,
top: &#39;0&#39;,
left: &#39;0&#39;,
width: &#39;100px&#39;,
height: &#39;100px&#39;,
padding: &#39;5px&#39;
}, 400);
});

//Swap Image on Click
$(&quot;ul.thumb li a&quot;).click(function() {

var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name
$(&quot;#main_view img&quot;).attr({ src: mainImage });
return false; 
});

});
</script>
Ardından şablonumuzu kaydedip 2.adıma geçiyoruz.
2.Adım: Resim Galerisini Gadget Olarak Ekleyeceğiz: 
1.Adımdaki şablonumuza kod yerleştirme işlemini yaptıktan sonra;
Kumanda Paneli>Tasarım>Gadget Ekle>Html/Javascript yolunu takip edip aşşağıdaki kodu açılan gadgetimizin içine kaydediyoruz.
<ul class="thumb">
<li><a href="URL-1"><img src="1.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-2"><img src="2.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-3"><img src="3.Resim Linkiniz" alt="" /></a></li>
<li><a href="URL-4"><img src="4.Resim Linkiniz" alt="" /></a></li>
</ul>
Kod içerisinde 
Resim Linkiniz: yazdığımız yere görünmesini istediğiniz resmin URL adresini
"URL-1" Yerine resme tıklandığında açılmasını istediğiniz adresi yazıyorsunuz.
Eğer galeriye daha fazla resim eklemek isterseniz aşşağıdaki kodu tekrarlamanız yeterli olacaktır.
<li><a href="URL"><img src="Resim Linkiniz" alt="" /></a></li>
PAYLAŞ

BLOG OKULU

Merhabalar, 2012 yılından beri editörlüğünü yaptığım blogokulu.org sitesinde blogger kullanıcıları için gerekli olan bir çok bilgiyi bulabilrsiniz.Blogger temaları,blogger eklentileri ve blogger dersleri ile blog yazarlarına elimizden geldiğince yardımcı olmaya çalışıyoruz.

  • Image
  • Image
  • Image
  • Image
  • Image
    Disqus Yorumları
    Facebook Yorumları

21 yorum:

  1. Merhaba,
    Aynısını be de paylaşmıştım kendi blogumda.Demo sayfa koymamışsınız.İsterseniz demosu için benim örnek olarak oluşturduğum sayfaya bakabilirsiniz http://bloghocam.blogspot.com/p/galeri.html

    YanıtlayınSil
  2. Bu ince düşünceniz için teşekkür ederim.Demoyu hazırladım ama 1-2 ufak eksiklik var onları giderdikten sonra yayınlıyacağım inşallah.Yorumunuzda linki vermişsiniz zaten, dolaylı yoldan sizin demo sayfanızı yayınlamış olduk :)

    YanıtlayınSil
  3. Paylaşım için teşekkürler. Eklenen konuların resimleri üzerine gelindiğinde büyült ve küçült eklentisini araştırdım ama bulamadım bulduklarımda düzgün anlatılmamış zaten. Bu eklentiyi paylaşabilirmisiniz.

    YanıtlayınSil
  4. arkadsalar serdar abinin galerisi gerçekten çok güzel tavsiye ederim oğuzhan çavuş :)

    YanıtlayınSil
  5. söylediğin şey mantıklı geldi,
    onunla biraz uğraşıyım.Yapabilirsem yayınlıycam.Teşekkürler

    YanıtlayınSil
  6. ana sayfandaki konular slaytının htmlsi varsa yayınlarmısın?

    YanıtlayınSil
  7. NE YAPTIYSAM RESIMLER GORUNTULENMIYOR   RESMI İMAGESHACK YÜKLUYORUM URL SİNİ KAYDEDIYORUM OLMUYOR VARMI BU ISI IYI BILEN

    YanıtlayınSil
  8. KOMBİ SERVİSİ 399 2 990
    BAYMAK,VAİLANT,DEMİRDÖKÜM,ALAKO,BOSCH,ARİSTON,VIESMANN,İMMERGAS,BUDERUS,ARÇELİK, BEKO KOMBİ BAKIMLARI ONARIMLARI YAPILIR.
    / 0216 399 2 990 /   399 96 86
    GEZİCİ SERVİSİ  / 0533 619 38 06 /

    BEYAZ EŞYA SERVİSLERİ / 0216 / 399 2 990 / 399 96 86 /
    ARÇELİK,BEKO,BOSCH,SIEMENS,ARİSTON,BUDERUS,VESTEL,PROFİLO,İNDESİT,ELEKTRONİK BAKIMLARI ONARIMLARI YAPILIR.399 2 990

    GEZİCİ SERVİSİ  / 0533 619 38 06 /

    YanıtlayınSil
  9. yan yana 3 tane resim görünüyor yan yana 5 ya da 6 resim yapma imkanımız yok mu acaba

    YanıtlayınSil
  10. bu resimler açılmıyor sizin demo sitede ki resimlerde açılmıyor bi çalışma yapabilir misiniz bu konuda

    YanıtlayınSil
  11. hocam harikasınız bir sorum olacak: ben yeni bir blog açtım ve dinamik görünümleri kullanmıyorum. normal şablonları kullanıyorum. sorum şu: bu fotoğraf galerisini sadece istediğim sayfada yayınlayabilir miyim? örneğin sekmelerdeki "resimler" sayfasında yayınlayabilir miyim? mesele bir video gadget'i ekledim. bu gadget bende bütün sayfalarda gözüküyor maalesef... ben sadece istediğim sayfada görünmesini istiyorum... teşekkürler...

    YanıtlayınSil
  12. tabiki yayınlayabilirsin.kumanda paneli>sayfalar>yeni sayfa>boş sayfa yolunu izleyip istediğin resim galerisine ait kodları bu sayfaya yapıştırabilirsin.Daha sonra bu sayfanın linkini resimler sekmesine verirsen bu iş olur.gadget olarakta sadece ana sayfada yada sadece yazı tıklanınca görüntüleme imkanları var,gadgetleri sadece istediğin yazıyla gösterme imkanı şimdilik yok.ana sayfa yada yazı tıklanınca gadget görünmesi için yayınladığımız burdaki yazıyı okuyabilirsin.

    YanıtlayınSil
  13. İlginiz için teşekkür ederim. Yaptığınız işin hakkını veriyorsunuz... Bizden yana emeğiniz zayi olmaz. İyi dersler hocam... 

    YanıtlayınSil
  14. Hocam bir sorum daha olacak size: ben galeriyi istediğim sayfama ekledim. galeride resimlerin üzerine gelince resim büyüyor, büyüyen resme tıkladığım zaman resmi tam boyutunda, sayfadan çıkmadan, galeri vasıtasıyla görmek mümkün müdür?

    YanıtlayınSil
  15. Hocam siteme bakarsanız galeride resimlerin üst sağında ve solunda küçük kalın noktalar çıkıyor. Bunları yok edemez miyiz acaba? 
    http://alpettin.blogspot.com/p/resimler.html

    YanıtlayınSil
  16. bu galeride mümkün değil malesef:(

    YanıtlayınSil
  17. eğer kodlarda bir oynama yapmadıysanız noktaların çıkmaması gerekiyor? 

    YanıtlayınSil
  18. Hiç bir oynama yapmadım hocam... Kod sistemini bilmekteyim. Noktaların manası: "madde işareti liste"si oluşturmak için kullanılır. Ama yok edemedim de... Sıkıntıya bir el atsanız çok memnun kalırım...

    YanıtlayınSil
  19. konyasekerim3511 Temmuz 2012 09:58

    Hocam herşey tamam ama resme tıkladığımda verdiğim linke gitmiyor..resime tıklıyorum ama hiç birşey açılmıyor.Yardımınızı bekliyorum

    YanıtlayınSil
  20. merhaba iyi günler. çalışmalarınız için hem teşekkür ederim hem de tebrik ederim. benim bu kod için bir sorunum var. bu kodu ekleyince, daha doğrusu head kısmına ekleyince ana sayfamdaki slayt kayboluyor.bunun bir çözümü var mıdır. tekrar teşekkürler

    YanıtlayınSil
  21. teşekkürler:) eklenti kodları çakışıyor demekki,bunun için çözüm head kodundan önce eklediğin kodun yerini değiştir,b:skin kodunun altında dene bakalım

    YanıtlayınSil

Belirtmek istediğiniz farklı konular varsa Burdan Yazabilrisiniz...