Magnify zoom effect plugin jQuery. Postingan ini terinspirasi dari pengunjung
cBoxnya BeBeN si bloglang yang ganteng kalem tea (http://kianhome.blogspot.com) :D Postingannya tenyata mengenai
jQuery Image Magnify v1.1. jQuery
magnify ini Plug-in dengan script jQuery yang ada di directory si embah google. Lagi males walking-walking mentok deh di web script yang sudah tidak
asing lagi di kalangan pengguna dan pencari script (
www.dynamicdrive.com).
Dilihat dari funsingnya mengenai si Magnify ini, tenyata seperti trik Lightbox yang Gaya juga ;)) Sama-sama memperbesar gambar sewaktu diklik secara dinamis dan lembut :"> Silahkan bagi sobat yang mau memakai trik dan tips ini mengunjungi halaman Dynamic Drive DHTML Scripts - jQuery Image Magnify Dapatkan juga deh script-script yang lainnya full GAYA =))
Oke mari kita mulai trik ini dengan gaya bahasa si bloglang...
- Harus punya script jquery.min.js.
Script ini sudah ada di layanan google :) Letakan scriptnya di dalam (setelah) tag <head> template sobat.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
Bagi yang sudah ada tidak usah lagi ya [-(- Masukan sscript magnifynya.
Mengenai penempatan script magnify ini, bisa diletakan bersama-sama dengan script pada point pertama diatas. Tapi selama pengalaman menanamkan script Plug-in, BeBeN pernah juga menempatkannya diatas/sebelum tag <body> Nah terserah sobat deh mana yang berfungsi dengan baik. Ambil script magnify berikut jQueryMagnifier.js, lalu dihosting atau bisa juga ditanam langsung di dalam template sobat.- SAVE deh :D
Script Magnify yang mau ditanam langsung didalam template sobat jadi seperti ini penulisannya...
<script>
//<![CDATA[
/* jQuery Image Magnify script v1.1
* This notice must stay intact for usage
* Author: Dynamic Drive at http://www.dynamicdrive.com/
* Visit http://www.dynamicdrive.com/ for full source code
* Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
*/
jQuery.noConflict()
jQuery.imageMagnify={
dsettings: {
magnifyby: 3, //default increase factor of enlarged image
duration: 500, //default duration of animation, in millisec
imgopacity: 0.2 //opacify of original image when enlarged image overlays it
},
cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
zIndexcounter: 100,
refreshoffsets:function($window, $target, warpshell){
var $offsets=$target.offset()
var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
warpshell.attrs.x=$offsets.left //update x position of original image relative to page
warpshell.attrs.y=$offsets.top
warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
warpshell.newattrs.x=winattrs.x+5
}
else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
warpshell.newattrs.x=winattrs.x+5
}
if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
warpshell.newattrs.y=winattrs.y+5
}
},
magnify:function($, $target, options){
var setting={} //create blank object to store combined settings
var setting=jQuery.extend(setting, this.dsettings, options)
var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
var newattrs={}
newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
$target.css('cursor', jQuery.imageMagnify.cursorcss)
if ($target.data('imgshell')){
$target.data('imgshell').$clone.remove()
$target.css({opacity:1}).unbind('click.magnify')
}
var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
$target.bind('click.magnify', function(e){ //action when original image is clicked on
var $this=$(this).css({opacity:setting.imgopacity})
var imageinfo=$this.data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
var $clone=imageinfo.$clone
$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'})
.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
function(){ //callback function after warping is complete
//none added
}) //end animate
}) //end click
$clone.click(function(e){ //action when magnified image is clicked on
var $this=$(this)
var imageinfo=$this.data('$relatedtarget').data('imgshell')
jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h}, setting.duration,
function(){
$this.hide()
$this.data('$relatedtarget').css({opacity:1}) //reveal original image
}) //end animate
}) //end click
}
};
jQuery.fn.imageMagnify=function(options){
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
jQuery.imageMagnify.magnify($, $imgref, options)
}
else if (this.complete){ //account for IE not firing image.onload
jQuery.imageMagnify.magnify($, $imgref, options)
}
else{
$(this).bind('load', function(){
jQuery.imageMagnify.magnify($, $imgref, options)
})
}
})
};
jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
var $=jQuery
return this.each(function(){ //return jQuery obj
var $imgref=$(this)
if (this.tagName!="IMG")
return true //skip to next matched element
})
};
//** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
//** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
jQuery(document).ready(function($){
var $targets=$('.magnify')
$targets.each(function(i){
var $target=$(this)
var options={}
if ($target.attr('data-magnifyto'))
options.magnifyto=parseFloat($target.attr('data-magnifyto'))
if ($target.attr('data-magnifyby'))
options.magnifyby=parseFloat($target.attr('data-magnifyby'))
if ($target.attr('data-magnifyduration'))
options.duration=parseInt($target.attr('data-magnifyduration'))
$target.imageMagnify(options)
})
var $triggers=$('a[rel^="magnify["]')
$triggers.each(function(i){
var $trigger=$(this)
var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
$trigger.data('magnifyimageid', targetid)
$trigger.click(function(e){
$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
e.preventDefault()
})
})
})
//]]>
</script>
Silahkan tuh diambil scriptnya...:D Itu bagi yang mau ditanam didalam template sih ;) Untuk memanggil supaya trik ini berjalan didalam postingan para sobat, hanya perlu sedikit penambahan tulisan didalam sebuah link gambar. Link gambar kan biasanya seperti ini penulisannya...
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFmTnVh6Tb0xUHn130fUUTJzd7KACh5VqqrvDyCX42Qi-vRL2OI0SKzKo9yO-rUlJUBoqmNJbpOp3n8pHyobVbtPyNmOufS2jQfRBmrHXXw_YPU8bdfgW92A-vMTwoONFU9jAOu1KJI4/" width="XXXpx" height="XXXpx" alt=""/>
Nah sobat tinggal menambahkan atribut
class="magnify" didalam penulisan semua link gambar nanti yang ingin diberi efek magnify ini.
<img class="magnify" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFmTnVh6Tb0xUHn130fUUTJzd7KACh5VqqrvDyCX42Qi-vRL2OI0SKzKo9yO-rUlJUBoqmNJbpOp3n8pHyobVbtPyNmOufS2jQfRBmrHXXw_YPU8bdfgW92A-vMTwoONFU9jAOu1KJI4/" width="XXXpx" height="XXXpx" alt=""/>
Mudah kan sobat :) Pada script ini zoom defaultnya pada nilai 3 :-/ Kalau zoomnya memang dirasa sobat kurang besar maka dalam penulisan link efek magnify ini menjadi seperti...
<img class="magnify" data-magnifyby="5" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieFmTnVh6Tb0xUHn130fUUTJzd7KACh5VqqrvDyCX42Qi-vRL2OI0SKzKo9yO-rUlJUBoqmNJbpOp3n8pHyobVbtPyNmOufS2jQfRBmrHXXw_YPU8bdfgW92A-vMTwoONFU9jAOu1KJI4/" width="XXXpx" height="XXXpx" alt=""/>
Tinggal menambahkan
data-magnifyby="4/5/6/7", yang didalam script di default
3. Selamat berkreasi sobat ;)
DEMO
Kekuatan dalam menembak keyword. Mungkin sering kita dengar istilah menembak keyword :-/ Yup menembak untuk menguatkan kata-kata kunci yang ada didalam postingan kita. Berbagai cara dilakukan untuk membuat posisi weblog kita baik, lebih baik dan lebih baik. Ada yang menggunakan keywords tools, ada yang menanamkan link inbound, ada yang jail ;)) jeung sajabana seueur teu kakira :D Coba lihat sepenggal kata-kata berikut...
kalau diklik akan terpampang video via youtube jurusan blogspot member punya :D Woh hampir lupa nih, ada yang terlewatkan...;)
Pada bagian ini BeBeN memasukan berita terupdate 4 web pilihan yang meliputi fashion, freeware, smashing magazine tentunya dan berita :D yang berganti dengan sistem rolling.
Yang dipanahin itu tuh footer statisnya
