1. Login ke akun Blogger anda
2. Pilih Tata Letak >> Tambah Gadget >> HTML/JavaScript
3. Masukkan script dibawah ini
4. Edit tulisan warna merah dengan URL gambar sesuai keinginan anda.
5. Klik simpan
<style type="text/css"> /*Default CSS for pan containers*/ .pancontainer{ position:relative; /*keep this intact*/ overflow:hidden; /*keep this intact*/ width:300px; height:300px; border:1px solid black; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="imagepanner.js"> </script> <script> // v1.1 (March 25th, 10): Updated with ability to zoom in/out of image jQuery.noConflict() var ddimagepanner={ magnifyicons: ['https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGLdwfowzOMSa0PoAoIq4THv1dHUgYEKEnddYkAEpd5q8KWxdIrYEMLmO_GzmDH5D6MZ7VjdhfPy2emj9ktxgQWXtDgLsuqiB7KC1R0nj8L34ZVzvEy9D8Bp5Iz7oJJzjFMugyvDC_meg/s1600/DhecunBlog.png', 24,23], //set path to zoom in/out images, plus their dimensions maxzoom: 4, //set maximum zoom level (from 1x) init:function($, $img, options){ var s=options s.imagesize=[$img.width(), $img.height()] s.oimagesize=[$img.width(), $img.height()] //always remember image's original size s.pos=(s.pos=="center")? [-(s.imagesize[0]/2-s.wrappersize[0]/2), -(s.imagesize[1]/2-s.wrappersize[1]/2)] : [0, 0] //initial coords of image s.pos=[Math.floor(s.pos[0]), Math.floor(s.pos[1])] $img.css({position:'absolute', left:s.pos[0], top:s.pos[1]}) if (s.canzoom=="yes"){ //enable image zooming? s.dragcheck={h: (s.wrappersize[0]>s.imagesize[0])? false:true, v:(s.wrappersize[1]>s.imagesize[1])? false:true} //check if image should be draggable horizon and vertically s.$statusdiv=$('<div style="position:absolute;color:white;background:#353535;padding:2px 10px;font-size:12px;visibility:hidden"> 1x Magnify</div> ').appendTo(s.$pancontainer) //create DIV to show current magnify level s.$statusdiv.css({left:0, top:s.wrappersize[1]-s.$statusdiv.outerHeight(), display:'none', visibility:'visible'}) this.zoomfunct($, $img, s) } this.dragimage($, $img, s) }, dragimage:function($, $img, s){ $img.mousedown(function(e){ s.pos=[parseInt($img.css('left')), parseInt($img.css('top'))] var xypos=[e.clientX, e.clientY] $img.bind('mousemove.dragstart', function(e){ var pos=s.pos, imagesize=s.imagesize, wrappersize=s.wrappersize var dx=e.clientX-xypos[0] //distance to move horizontally var dy=e.clientY-xypos[1] //vertically s.dragcheck={h: (wrappersize[0]>imagesize[0])? false:true, v:(wrappersize[1]>imagesize[1])? false:true} if (s.dragcheck.h==true) //allow dragging horizontally? var newx=(dx>0)? Math.min(0, pos[0]+dx) : Math.max(-imagesize[0]+wrappersize[0], pos[0]+dx) //Set horizonal bonds. dx>0 indicates drag right versus left if (s.dragcheck.v==true) //allow dragging vertically? var newy=(dy>0)? Math.min(0, s.pos[1]+dy) : Math.max(-imagesize[1]+wrappersize[1], pos[1]+dy) //Set vertical bonds. dy>0 indicates drag downwards versus up $img.css({left:(typeof newx!="undefined")? newx : pos[0], top:(typeof newy!="undefined")? newy : pos[1]}) return false //cancel default drag action }) return false //cancel default drag action }) $(document).bind('mouseup', function(e){ $img.unbind('mousemove.dragstart') }) }, zoomfunct:function($, $img, s){ var magnifyicons=this.magnifyicons var $zoomimages=$('<img src="'+magnifyicons[0]+'" /><img src="'+magnifyicons[1]+'" />') .css({width:magnifyicons[2], height:magnifyicons[3], cursor:'pointer', zIndex:1000, position:'absolute', top:s.wrappersize[1]-magnifyicons[3]-1, left:s.wrappersize[0]-magnifyicons[2]-3, opacity:0.7 }) .attr("title", "Zoom Out") .appendTo(s.$pancontainer) $zoomimages.eq(0).css({left:parseInt($zoomimages.eq(0).css('left'))-magnifyicons[2]-3, opacity:1}) //position "zoom in" image .attr("title", "Zoom In") $zoomimages.click(function(e){ //assign click behavior to zoom images var $zimg=$(this) //reference image clicked on var curzoom=s.curzoom //get current zoom level var zoomtype=($zimg.attr("title").indexOf("In")!=-1)? "in" : "out" if (zoomtype=="in" && s.curzoom==ddimagepanner.maxzoom || zoomtype=="out" && s.curzoom==1) //exit if user at either ends of magnify levels return var basepos=[s.pos[0]/curzoom, s.pos[1]/curzoom] var newzoom=(zoomtype=="out")? Math.max(1, curzoom-1) : Math.min(ddimagepanner.maxzoom, curzoom+1) //get new zoom level $zoomimages.css("opacity", 1) if (newzoom==1) //if zoom level is 1x, dim "zoom out" image $zoomimages.eq(1).css("opacity", 0.7) else if (newzoom==ddimagepanner.maxzoom) //if zoom level is max level, dim "zoom in" image $zoomimages.eq(0).css("opacity", 0.7) clearTimeout(s.statustimer) s.$statusdiv.html(newzoom+"x Magnify").show() //show current zoom status/level var nd=[s.oimagesize[0]*newzoom, s.oimagesize[1]*newzoom] var newpos=[basepos[0]*newzoom, basepos[1]*newzoom] newpos=[(zoomtype=="in" && s.wrappersize[0]>s.imagesize[0] || zoomtype=="out" && s.wrappersize[0]>nd[0])? s.wrappersize[0]/2-nd[0]/2 : Math.max(-nd[0]+s.wrappersize[0], newpos[0]), (zoomtype=="in" && s.wrappersize[1]>s.imagesize[1] || zoomtype=="out" && s.wrappersize[1]>nd[1])? s.wrappersize[1]/2-nd[1]/2 : Math.max(-nd[1]+s.wrappersize[1], newpos[1])] $img.animate({width:nd[0], height:nd[1], left:newpos[0], top:newpos[1]}, function(){ s.statustimer=setTimeout(function(){s.$statusdiv.hide()}, 500) }) s.imagesize=nd s.curzoom=newzoom s.pos=[newpos[0], newpos[1]] }) } } jQuery.fn.imgmover=function(options){ var $=jQuery return this.each(function(){ //return jQuery obj if (this.tagName!="IMG") return true //skip to next matched element var $imgref=$(this) if (parseInt(this.style.width)>0 && parseInt(this.style.height)>0) //if image has explicit CSS width/height defined ddimagepanner.init($, $imgref, options) else if (this.complete){ //account for IE not firing image.onload ddimagepanner.init($, $imgref, options) } else{ $imgref.bind('load', function(){ ddimagepanner.init($, $imgref, options) }) } }) } jQuery(document).ready(function($){ //By default look for DIVs with class="pancontainer" var $pancontainer=$('div.pancontainer') $pancontainer.each(function(){ var $this=$(this).css({position:'relative', overflow:'hidden', cursor:'move'}) var $img=$this.find('img:eq(0)') //image to pan var options={$pancontainer:$this, pos:$this.attr('data-orient'), curzoom:1, canzoom:$this.attr('data-canzoom'), wrappersize:[$this.width(), $this.height()]} $img.imgmover(options) }) }) </script> <div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:400px;"> <img src="http://4.bp.blogspot.com/-kzyW32gw1_4/T1zZLUfNyHI/AAAAAAAAA2M/8ZljabDLYes/s1600/a211.jpg" /></div>
<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-slide-terbaru-1.html" target="_blank" title="Script Slide Terbaru"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
Semoga bermanfaat...!!!<div style="text-align: right;">
<a href="http://dhecun.blogspot.com/2012/11/script-slide-terbaru-1.html" target="_blank" title="Script Slide Terbaru"><span style="font-size: xx-small;">[ Get Widget ]</span></a></div>
|
Ditulis oleh : Dhecun Blog
Judul : Script slide terbaru 1 Berlangganan artikel Komentari artikel ini...!!! |
Silahkan Copy Paste artikel ini tapi jangan lupa untuk mencantumkan link sumber aslinya. Terima kasih.