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="http://lh4.ggpht.com/_ALuJjudg6Rg/Smp0hAsF4uI/AAAAAAAAAI0/KLIoNyUruSA/indonesian-girls.jpg" 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="http://lh4.ggpht.com/_ALuJjudg6Rg/Smp0hAsF4uI/AAAAAAAAAI0/KLIoNyUruSA/indonesian-girls.jpg" 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="http://lh4.ggpht.com/_ALuJjudg6Rg/Smp0hAsF4uI/AAAAAAAAAI0/KLIoNyUruSA/indonesian-girls.jpg" width="XXXpx" height="XXXpx" alt=""/>
Tinggal menambahkan data-magnifyby="4/5/6/7", yang didalam script di default 3. Selamat berkreasi sobat ;) DEMO
Simple navbar with CSS. Navbar atau navigation bar, yang merupakan menu utama dari sebuah halaman weblog. Adapun fungsinya untuk menyimpan link pilihan kita untuk mempermudah dalam memasuki sebuah halaman (halah pusing keterangannya ~x() Biasanya sih diisi sama home, about us, contact dan lain-lain :D Pernah juga posting tentang navbar, tapi lupa dimana yak :D (cari di arsip saja)
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.
