Membuat Effect Image Zoom Dengan Jquery

Assalamualaikum ,


Harini Afiq mau buat , tengok tajuk tu . tu la Afiq nak buat . Kalau korang tak tahu apa benda tu . tengok Pict DEMO bawah ni 

Kalau anda Click pada apa-apa gambar , ia akan keluar macam tu . Ada pahammmmm ?


Kalau korang nak TuTo ni . ikut step-step dekat bawah k .


Langkah 1


1. Dashboard > Design > Edit HTML 


2. Cari code ni . (CTRL + F) permudahkan pencarian .


]]></b:skin>


3. Dah jumpa ? kalau dah , Copy code bawah ni dan pastekan diatas  code ]]></b:skin>

div.jquery-image-zoom {

line-height: 0;

font-size: 0;

z-index: 10;

border: 5px solid #fff;

margin: -5px;

-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);

}

div.jquery-image-zoom a {

background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;

display: block;

width: 25px;

height: 25px;

position: absolute;

left: -17px;

top: -17px;

/* IE-users are prolly used to close-link in right-hand corner */

*left: auto;

*right: -17px;

text-decoration: none;

text-indent: -100000px;

outline: 0;

z-index: 11;

}

div.jquery-image-zoom a:hover {

background-position: left -25px;

}

div.jquery-image-zoom img,

div.jquery-image-zoom embed,

div.jquery-image-zoom object,

div.jquery-image-zoom div {

width: 100%;

height: 100%;

margin: 0;

}

Langkah 2

1. Lepas tu , korang cari code (CTRL + F) permudahkan pencarian .

</head>


2. Dah jumpa ? kalau dah , copy code dibawah ni dan paste diatas code </head>

<script type='text/javascript' src='https://sites.google.com/site/jeritanblog/javascript/jquery.min.js'/>

<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/imageZoom.min.js"/>

<script type="text/javascript">

jQuery(document.body).imageZoom();

</script>

Yang terakhir , Save template korang dan lihat hasilnya .

credit by Jeritan Blog

---

Thank you for reading :*

---