Daha önce blogunuzda kullanabileceğiniz 2 ayrı resim görüntüleme özelliğini tanıtmıştım. Bunlar Highslide ve Blogger'in kendi lightbox eklentisiydi. Bu yazımda diğer eklentilerden farklı olarak resimleriniz için ”Yakınlaştırma” (Zoom) efektini nasıl uygulayacağınızı göstereceğim. Eklentimiz resimler için ek hiçbir ayar gerektirmiyor. Benzer eklentilerin çoğunda hem javascript kullanıyor hemde resimlerin büyük ve küçük hallerini kendimiz ekliyorduk. Diğer bir sorun ise js kodlarının blogları çok fazla yavaşlatmasıydı. Burada tüm bu sorunlar aşılmış ayrıca çok şık bir görüntü kazandırılmış.Benim bu eklentide en çok sevdiğim şey resime tıkladığınızda siz sayfanını neresinde olursanız olun (resim hala ekrandaysa) resmi oraya taşıyor olması.
Kurulum ;
Kumanda Paneli ➜ Blog Adı ➜ Şablon ➜ Html'yi Düzenle ➜ Devam et (Widget Şablonlarını Genişlet) yolunu izleyin
CTRL+F ile aşağıdaki kodu bulun;
]]>
Yukarıdaki kodu bulduktan sonra hemen üzerine aşağıdaki kodları ekleyin.
div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://1.bp.blogspot.com/-_jaY7dTGcOM/UAxyrwOxyuI/AAAAAAAAF1I/7Es9QUrz9M8/s1600/x.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}
Kaydetmeden devam edin ve tekrar CTRL+F ile aşağıdaki kodu bulun;
Yukarı kodun hemen üzerine aşağıdaki kodları ekleyin.
Ve kaydedip eklentinizin tadını çıkarın.
Kayıtlar
