Animasyonlu JQuery/Javascript Resimli Galeri

Blogunuzda ki resimleri veya hazırlamış olduğunuz makaleniz içerisinde ki resimleri müthiş bir resim galerisi ile sergilemek isterseniz bu tam sizin isteğinizi karşılayabilir.Animasyonlu JQuery/Javascript resimli galerisini rahatlıkla bloguna ekleyebileceksiniz.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önlendirecektir.Gerekli işlemleri şimdi aşağıda sırası ile uygulayalım.

1.ADIM

1. Blogger hesabınıza giriş yapın.
2. Kumanda Paneli> Şablon> HTML Düzenle yolunu takip edin.
3. Ctrl+F tuşları ile ]]></b:skin> kodunu aradın.
4. Bulmuş olduğunuz ]]></b:skin> kodundan hemen üst kısmına aşağıda ki kodları ekleyin.

/* Blogger Zoom Gallery By BilgiCafem61 */<br /> ul.thumb {<br /> float: left;<br /> list-style: none;<br /> margin: 0; padding: 10px;<br /> width: 360px;<br /> }<br /> ul.thumb li {<br /> margin: 0; padding: 5px;<br /> float: left;<br /> position: relative; /* Set the absolute positioning base coordinate */<br /> width: 110px;<br /> height: 110px;<br /> }<br /> ul.thumb li img {<br /> <i><b>width: 100px; height: 100px</i><i></i></b>; /* Set the small thumbnail size */<br /> -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */<br /> border: 1px solid #ddd;<br /> padding: 5px;<br /> background: #f0f0f0;<br /> position: absolute;<br /> left: 0; top: 0;<br /> }<br /> ul.thumb li img.hover {<br /> background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivtAAIEQQpDDvLecE_FJKJdZoMvJHw7wZUKvdZgudsj_mifDADVK_t1WTWilHgLPOrAfwFuLoeAIyuDURAbdwBxP_iyDJbgp2J0qHET0AFaYtQmqkf8opi9wxCctFZh8yWwisk4Sj8FPsN/) no-repeat center center; /* Image used as background on hover effect<br /> border: none; /* Get rid of border on hover */<br /> }

2.ADIM
Üstte ki işlemi bitirtikden sonra şablonunuzu kaydetmeden tekrar;

• Ctrl+F kısayol tuşları ile </head> kodunu aradın.
• Bulduğunuz </head> kodunun hemen üst kısmına aşağıda ki kodları ekleyin.
• İşlem bittikden sonra önizleme yapın sorun yoksa şablonunuzu kaydedip çıkın.

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $("ul.thumb li").hover(function() { $(this).css({'z-index' : '10'}); $(this).find('img').addClass("hover").stop() .animate({ marginTop: '-110px', marginLeft: '-110px', top: '50%', left: '50%', width: '174px', height: '174px', padding: '20px' }, 200); } , function() { $(this).css({'z-index' : '0'}); $(this).find('img').removeClass("hover").stop() .animate({ marginTop: '0', marginLeft: '0', top: '0', left: '0', width: '100px', height: '100px', padding: '5px' }, 400); }); //Swap Image on Click $("ul.thumb li a").click(function() { var mainImage = $(this).attr("href"); //Find Image Name $("#main_view img").attr({ src: mainImage }); return false; }); }); </script>

3.ADIM
Şablonunuzu kaydettikden sonra son adıma geçerek işlemi bitirelim.

• Kumanda Paneli> Yerleşim > Gadget Ekle> HTML/Javascript yolunu izleyin.
• Açmış olduğunuz gadget içerisine aşağıdaki HTML kodlarını ekleyip düzenledikden sonra gadgeti kaydedip bloggunuzda nerede görünmesini istediğiniz yere sürükleyip bırakın.

<ul class="thumb">
<li><a href="URL-1"><img src="http://i.hizliresim.com/KgBoP3.jpg" alt="" /></a></li>
<li><a href="URL-2"><img src="http://i.hizliresim.com/wbWb9b.jpg" alt="" /></a></li>
<li><a href="URL-3"><img src="http://i.hizliresim.com/KlV14J.jpg" alt="" /></a></li>
<li><a href="URL-4"><img src="http://i.hizliresim.com/x3dolM.jpg" alt="" /></a></li>
<li><a href="URL-5"><img src="http://i.hizliresim.com/KPgQP8.jpg" alt=""/></a></li>
<li><a href="URL-6"><img src="http://i.hizliresim.com/KlVEWp.jpg" alt=""/></a></li>
</ul>

4.ADIM
Kod içerisinde düzenlenecek bölüm;

• Kırmızı renkli URL kısmına yönlendirmek istediğiniz site veya bağlantı linkini ekleyin.
• Mavi renkli yazılı resim linkleri yerine siz kendiniz ekleyeceğiniz resim kodlarını ekleyin.
• Eğer 6 resim değilde 4 resim yayınlamak isterseniz yukarıda ki kod içerinde aşağıda ki gördüğünüz kodu silerek böylece yayınlayacak olduğunuz resim kodlarını belirleyebilirsiniz.

<ul class="thumb">
<li><a href="URL-1"><img src="http://i.hizliresim.com/KgBoP3.jpg" alt="" /></a></li>
<li><a href="URL-2"><img src="http://i.hizliresim.com/wbWb9b.jpg" alt="" /></a></li>
<li><a href="URL-3"><img src="http://i.hizliresim.com/KlV14J.jpg" alt="" /></a></li>
<li><a href="URL-4"><img src="http://i.hizliresim.com/KlVEWp.jpg" alt=""/></a></li>
</ul>

Bizi Takip Edin
Pinterest>> Facebook>> Twitter
 © by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...