Kukuh Cakra Darma

Cara Membuat jQuery Image Zoom

Nah, saya kali ini ingin memperbaiki sebuah "jQuery Image Zoom" FIXED. Maksud dari fixed disini adalah telah benar benar bekerja dan tidak ada kesalahan / bug.

Untuk demo, coba klik gambar diatas
Untuk posting sebelumnya yakni Jquery Image Zoom, yang sudah tidak berlaku. Dikarenakan sebenarnya trik ini merupakan bahasan dari Modification-Blog dan tidak berlaku lagi karena akun google yang dimiliki admin entah kenapa dihapus oleh pihak google. Nah saya disini akan berusaha untuk memperbaikinya.
1. Login ke blog anda --> Design --> Edit HTML
2. Cari kode ]]></b:skin> dan letakkan kode berikut diatas kode CSS yang telah anda cari

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;
}
3. Nah, kemudian cari kode </head> dan tambahkan script berikut diatas kode yang telah anda cari
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="https://sites.google.com/site/kukuhcdh/home/javascript/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>
Oke. Sekian, coba review. Dan semoga bermanfaat!
*Fixed



Artikel Terkait:

11 Comments:

kisah abu nawas | 30 October, 2010 21:58 | [Reply]

bermanfaat sob.
aku copas dulu yak. buat perbendaharaan

Kukuh Cakra Darma | 30 October, 2010 22:40 | [Reply]

@kisah abu nawas yoi gan, thanks

Republik Seni | 30 October, 2010 23:50 | [Reply]

pas ni buat blog yg nampilin gambar... I like it...thanks broder... ^__^y

sy save link nya

Republik Seni | 30 October, 2010 23:54 | [Reply]

btw tu jquery langsung fungsi y klo di blog ada gambarnya? keren keren...

tp makin keren klo saling tuker follow, sy duluan y pake nama DEFRIARI...

ditunggu follow baliknya ke blog sederhana sy...^__^ makasi...

kisah abu nawas | 31 October, 2010 09:32 | [Reply]

thanks sharenya sob

Kukuh Cakra Darma | 31 October, 2010 09:37 | [Reply]

@Republik Seni iya mungkin gan... hanya berlaku di posting mungkin

Kukuh Cakra Darma | 31 October, 2010 09:39 | [Reply]

@kisah abu nawas iya gan, makasih

kisah abu nawas | 31 October, 2010 10:00 | [Reply]

sob htmlnya kok tidak bisa bekerja di blogku kenapa sob ya.
mohon pencerahan

Kukuh Cakra Darma | 31 October, 2010 10:10 | [Reply]

@kisah abu nawas trik ini hanya bisa digunakan pada post yang memiliki gambar. HTML bagaimana?

kisah abu nawas | 01 November, 2010 16:39 | [Reply]

owh begituya hanya untuk zoom image

Kukuh Cakra Darma | 01 November, 2010 19:04 | [Reply]

@kisah abu nawasyap, benar sekali gan.. maaf atas ketidak jelasannya.. :)

Post a Comment | Classic Comment's Form