Script slide terbaru 1

Saya sendiri tidak begitu paham mengenai script slide ini , tetapi jika anda penasaran untuk membuatnya , silahkan ikuti langkah berikut ini :

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: ['http://4.bp.blogspot.com/-My0hFvuvuio/UKBY6wzxoPI/AAAAAAAAARE/scgZ9JWrp0s/s1600/DhecunBlog.png','http://4.bp.blogspot.com/-My0hFvuvuio/UKBY6wzxoPI/AAAAAAAAARE/scgZ9JWrp0s/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...!!!

Subscribe

0 Komentar Blogger
Komentar Facebook

Pasang Widget Otomatis



Submit Web / Blog Ke 20+ Search Engines

Cek Ukuran dan Kecepatan Loading Blog / Web

Masukkan URL blog max 10 URL
( Tools by Dhecun Blog : Get Widget )

Update Artikel Dhecun Blog

Berlangganan Artikel Gratis Lewat Email

Berlangganan artikel via email.

Dapatkan update artikel terbaru dari Dhecun Blog

yang akan dikirim ke email anda secara gratis...!

Jangan lupa buka Email anda untuk verifikasi.
RSS feeds















Space Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Pasang Iklan

Kategori pasang iklan

Rp.10.000 per bulan
Rp.100.000 per tahun
Judul iklan
Deskripsi iklan
Gambar (220x150)

Iklan Sponsor 1

About Me

Profil Google+
My Facebook
Kirim SMS Gratis
Download Gratis
Print

Contact

Contact on Email
Contact on Facebook

Rekomendasi

Follow

RSS feeds

Widget Populer

Widget Zoom Detail Gambar

Widget Share Button Melayang

Share

Tukar Link

Traffic

Semua Artikel




Tampilkan semua artikel

10 Artikel Terbaru






Masukkan email anda

untuk berlangganan artikel




Dhecun Blog

Followers

Google+ Followers

Google+ Badge