Perhatian : Code script dan CSS pada posting ini berasal ASLI dari halaman ini, bukan copy paste, jika kami menemukan blog website lain yang mengulas tentang posting yang sama, Anda beberati menemukan plagiarish dari halaman ini. Harap cantumkan link ke halaman ini jika Anda tidak kami sebut sebagai " Plagiaris: , atau "Sang Copypaste Asalan"
Saya telah bekerja pada sebuah script kecil untuk klien saya, yang membutuhkan perbesaran citra tentang produk meraka. Saya mentraslate kan halaman ini ke bahasa Indonesia, dan mengedit beberapa script sihingga Anda ga perlu capek-capek untuk memahami, Sesederhana mungkin, anda hanya perlu copy paste scritp ini. JQuery ini saya edit untuk menciptakan sebuah script yang akan memungkinkan pengguna/pengunjung untuk melihat rincian gambar yang lebih besar sementara pengunjung tidak perlu mengklik agar gambar menjadi besar dan hanya menggerakkan kursor di atas gambar berukuran sedang tersebut, script ini saya gunakan di website kami www.papantulisku.com. Selama proses itu aku memutuskan untuk membuat sebuah plugin jQuery dan berbagi dengan kalian!Untuk melihat contohnya, silahkan arahkan mouse anda ke vektor gambar diatas !
Seperti halnya dengan semua script saya, saya mencoba untuk menjaga hal-hal yang ringan yang mungkin, dan yang paling penting, mungkin disesuaikan dengan pemahaman kita bersama. Saya harap Anda akan menemukan ini dan mencobanya dengan sangat mudah untuk diterapkan ke situs web/blog Anda sendiri.
Pengantar
Pertama saya sarankan Anda memeriksa demo untuk melihat apa plugin adalah semua tentang. Kemudian kembali ke sini dan terus membaca artikel ini:)
Markup
Ide utama di balik plugin ini dan lainnya saya tulis adalah - menjaga markup sesederhana mungkin. Tidak perlu unsur-unsur dan HTML yang kembung. Juga markup (untuk semua plugin ) membuat konten yang diakses bahkan dengan JavaScript dimatikan, yang penting.
CSS yang mengandung unsur gambar kecil yang menghubungkan ke gambar besar, tetapi struktur ini dibutuhkan:
<a href="link gambar anda yang besar" class="zoom" ><img src="link gambar anda yg lebih kecil" alt="Small image" /></a>
Sebenarnya ada beberapa Script (dan CSS) namun untuk mengurus sisanya.
Pilihan
Plugin ini dapat disesuaikan dengan beberapa pilihan dan definisi CSS sederhana. Dalam hal CSS semua yang perlu Anda lakukan adalah menentukan gambar yang baru dibuat zoom ukuran elemen, posisi dan penampilan. Dalam demo saya, saya menggunakan definisi ini:
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}
Anda akan melihat properti line-height ... Saya menggunakan ini jika untuk alignment vertikal dari teks pesan yang ditampilkan pada saat citra rinci sedang loading. Tentu saja Anda dapat menggunakan metode penentuan posisi Anda sendiri, teks Anda sendiri, masukkan markup tambahan jika Anda ingin menambahkan sendiri dan CSS untuk gaya preloader anda. Mungkin beberapa gif preloader sebagai gambar preloader? Saya akan menjelaskan kepada Anda, apa yang saya menunjukkan di sini adalah contoh yang Anda dapat dengan mudah menyesuaikannya dengan keperluan anda sendiri.
Mari kita lihat plugin pilihan. Berikut adalah daftar dari dengan nilai-nilai default dan deskripsinya:
id
Default value: "easy_zoom"
ID gambar yang baru dibuat zoom elemen. Tentu saja Anda dapat menggunakan sendiri, tapi pastikan Anda memperbarui CSS sesuai.
induk
Default value: "tubuh"
Ini mendefinisikan elemen DOM mana yang baru dibuat gambar zoom elemen akan disisipkan. Anda dapat menyisipkan di mana pun Anda seperti di DOM dengan mengedit opsi ini.
menambahkan
Nilai Default: "true"
Jika diatur ke true (secara default) elemen yang baru dibuat akan dimasukkan sebagai anak terakhir dari elemen induk. Jika opsi ini diset ke false maka elemen yang baru dibuat akan dimasukkan sebagai anak pertama dari elemen induk.
preload
Default value: "Loading ..."
Pesan yang muncul sebelum gambar besar dimuat. Anda dapat menggunakan pilihan ini untuk menulis pesan preload Anda sendiri dan menyisipkan HTML yang Anda inginkan. Jika Anda ingin menggunakan preloader gifs, saya sarankan anda pergi dengan gambar latar belakang.
kesalahan
Nilai Default: "Ada masalah dengan loading gambar."??
Dalam hal gambar besarnya tidak ditemukan atau tidak dapat dimuat, pesan kesalahan akan muncul. Anda dapat menggunakan pilihan ini untuk pesan kesalahan kustom.
Berikut adalah contoh kode untuk menggunakan beberapa opsi kustom:
jQuery(function($){
$('a.zoom').easyZoom({
id: 'imagezoom',
preload: '<p class="preloader">Loading the image</p>'
parent: '#container'
});
});
Dalam salah satu artikel berikutnya di sini di Netter Code saya akan menawarkan satu halaman template portofolio yang menggunakan pratinjau gambar ini.
Nah lanjutkan !!!..
Sekarang bagaimanakan menerapkan nya pada sebuah halaman blog atau untuk seluruh halaman blog ??
Langkah langkah :
- Buka blogger dan silahkan menuju halamana "Edit HTML" milik anda .
- Copykan code dibawah ini sebelum//<![CDATA[
#easy_zoom{
width:600px;
height:400px;
border:5px solid #eee;
background:#fff;
color:#333;
position:absolute;
top:15px;
left:400px;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;} , blockquote, dl, form, table, pre{line-height:inherit;margin:0 0 1.5em 0;}
li{margin:0 0 0 2em;padding:0;display:list-item;list-style-position:outside;}
blockquote, dd{padding:0 0 0 2em;}
pre, code, samp, kbd, var{font:100% mono-space,monospace;}
pre{overflow:auto;}
abbr, acronym{
text-transform:uppercase;
border-bottom:1px dotted #000;
letter-spacing:1px;
}
abbr[title], acronym[title]{cursor:help;}
small{font-size:.9em;}
sup, sub{font-size:.8em;}
em, cite, q{font-style:italic;}
img{border:none;}
hr{display:none;}
table{width:100%;border-collapse:collapse;}
th,caption{text-align:left;}
form div{margin:.5em 0;clear:both;}
label{display:block;}
fieldset{margin:0;padding:0;border:none;}
legend{font-weight:bold;}
input[type="radio"],input[type="checkbox"], .radio, .checkbox{margin:0 .25em 0 0;}
#container{
padding:30px;
} - Copykan code dibawah ini sebelum </head> namun jika script dibawah ini sudah ada dalam template anda, todak perlu di copy
<script type="text/javascript" > (function($){$.fn.easyZoom=function(_1){var _2={id:"easy_zoom",parent:"body",append:true,preload:"Loading...",error:"There has been a problem with loading the image."};var _3;var _4=new Image();var _5=false;var _6=true;var _7;var w1,w2,h1,h2,rw,rh;var _8=false;var _1=$.extend(_2,_1);this.each(function(){_3=this;var _9=this.tagName.toLowerCase();if(_9=="a"){var _a=$(this).attr("href");_4.src=_a+"?"+(new Date()).getTime()+" ="+(new Date()).getTime();$(_4).error(function(){_6=false;});_4.onload=function(){_5=true;_4.onload=function(){};};$(this).css("cursor","crosshair").click(function(e){e.preventDefault();}).mouseover(function(e){_c(e);}).mouseout(function(){_d();}).mousemove(function(e){_b(e);});}});function _c(e){_d();var _e=$("<div id=""+_1.id+"">"+_1.preload+"</div>");if(_1.append){_e.appendTo(_1.parent);}else{_e.prependTo(_1.parent);}if(!_6){_f();}else{if(_5){_10(e);}else{_11(e);}}};function _11(e){if(_5){_10(e);clearTimeout(_7);}else{_7=setTimeout(function(){_11(e);},200);}};function _10(e){_8=true;$(_4).css({"position":"absolute","top":"0","left":"0"});$("#"+_1.id).html("").append(_4);w1=$("img",_3).width();h1=$("img",_3).height();w2=$("#"+_1.id).width();h2=$("#"+_1.id).height();w3=$(_4).width();h3=$(_4).height();w4=$(_4).width()-w2;h4=$(_4).height()-h2;rw=w4/w1;rh=h4/h1;_b(e);};function _d(){_8=false;$("#"+_1.id).remove();};function _f(){$("#"+_1.id).html(_1.error);};function _b(e){if(_8){var p=$("img",_3).offset();var pl=e.pageX-p.left;var pt=e.pageY-p.top;var xl=pl*rw;var xt=pt*rh;xl=(xl>w4)?w4:xl;xt=(xt>h4)?h4:xt;$("#"+_1.id+" img").css({"left":xl*(-1),"top":xt*(-1)});}};};})(jQuery);</script>
- Selanjutnya copy kode dibawah ini tepat dibawah kode no. 3 diatas.
<script type="text/javascript">(function($) {
$.fn.easyZoom = function(options){
var defaults = {
id: 'easy_zoom',
parent: 'body',
append: true,
preload: 'Loading...',
error: 'There has been a problem with loading the image.'
};
var obj;
var img = new Image();
var loaded = false;
var found = true;
var timeout;
var w1,w2,h1,h2,rw,rh;
var over = false;
var options = $.extend(defaults, options);
this.each(function(){
obj = this;
// works only for anchors
var tagName = this.tagName.toLowerCase();
if(tagName == 'a'){
var href = $(this).attr('href');
img.src = href + '?' + (new Date()).getTime() + ' =' + (new Date()).getTime();
$(img).error(function(){ found = false; })
img.onload = function(){
loaded = true;
img.onload=function(){};
};
$(this)
.css('cursor','crosshair')
.click(function(e){ e.preventDefault(); })
.mouseover(function(e){ start(e); })
.mouseout(function(){ hide(); })
.mousemove(function(e){ move(e); })
};
});
function start(e){
hide();
var zoom = $('<div id="'+ options.id +'">'+ options.preload +'</div>');
if(options.append) { zoom.appendTo(options.parent) } else { zoom.prependTo(options.parent) };
if(!found){
error();
} else {
if(loaded){
show(e);
} else {
loop(e);
};
};
};
function loop(e){
if(loaded){
show(e);
clearTimeout(timeout);
} else {
timeout = setTimeout(function(){loop(e)},200);
};
};
function show(e){
over = true;
$(img).css({'position':'absolute','top':'0','left':'0'});
$('#'+ options.id).html('').append(img);
w1 = $('img', obj).width();
h1 = $('img', obj).height();
w2 = $('#'+ options.id).width();
h2 = $('#'+ options.id).height();
w3 = $(img).width();
h3 = $(img).height();
w4 = $(img).width() - w2;
h4 = $(img).height() - h2;
rw = w4/w1;
rh = h4/h1;
move(e);
};
function hide(){
over = false;
$('#'+ options.id).remove();
};
function error(){
$('#'+ options.id).html(options.error);
};
function move(e){
if(over){
// target image movement
var p = $('img',obj).offset();
var pl = e.pageX - p.left;
var pt = e.pageY - p.top;
var xl = pl*rw;
var xt = pt*rh;
xl = (xl>w4) ? w4 : xl;
xt = (xt>h4) ? h4 : xt;
$('#'+ options.id + ' img').css({'left':xl*(-1),'top':xt*(-1)});
};
};
};
})(jQuery);</script> - SELESAI..
Silahkan "pratinjau Element" sebelum anda sAVE.
Semoga Bermanfaat...
