Tampilkan Gambar dengan Efek Magnify

Sudahkah mencoba cara menampilkan gambar dengan efek LightBox dan efek membesar? Jika masih belum cocok silahkan coba efek yang satu ini, diberi nama efek Magnify atau dalam bahasa Indonesia kurang lebih efek di perbesar. Perbedaan antara efek membesar dengan diperbesar adalah dari proses zoom-nya, jika efek membesar akan menampilkan gambar sesuai dengan ukuran aslinya sedangkan efek diperbesar (magnify) akan menampilkan gambar dengan diperbesar beberapa kali dari ukuran aslinya sesuai dengan settingan yang kita tetapkan.

Fasilitas ini dikembangkan oleh Dynamic Drive dengan framework jQuery, silahkan lihat preview-nya disini. Dalam proses integrasi dengan blogger juga tidak serumit efek LightBox, untuk mencobanya silahkan ikuti langkah dibawah ini...

Langkah pemasangan Efek Magnify
Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Tata Letak - Edit HTML"
Langkah 3
Checklist "Expand Template Widget"
Langkah 4
Cari kode dibawah ini :

</head>

Langkah 5
Masukan (copy paste) kode dibawah ini tepat diatas kode pada langkah 4 :

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://hensblog.googlecode.com/files/Magnifier.js' type='text/javascript'/>

Langkah 4
Simpan template, sampai disini proses integrasi efek Magnify pada blogger telah selesai.

Modifikasi gambar yang akan ditampilkan dengan efek Magnify
Langkah 1
Masukan gambar pada posting blog kita
Langkah 2
Untuk memodifikasi kode gambar, ubahlah mode posting ke mode Edit HTML
Langkah 3
Cari kode gambar seperti di bawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX"/>
</a>

Langkah 4
Ada beberapa cara pemasangan kode efek Magnify pada artikel kita.
Cara 1
Tambahkan kode (warna biru) untuk pemasangan efek seperti contoh dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg" rel="magnify[contoh]">
<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" id="contoh" class="magnify" data-magnifyby="2"/>
</a>

Cara 2
Buang kode dibawah ini:

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="URL-GAMBAR/contoh.jpg">
....
</a>

Sehingga tersisa kode seperti dibawah ini dan tambahkan kode efek Magnify (warna biru):

<img style="float:left; margin:0 10px 10px 0;cursor:pointer; cursor:hand;width: 211px; height: 320px;" src="URL-GAMBAR/contoh.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_XXXXX" class="magnify"/>

Langkah 5
Terbitkan artikel anda

Keterangan:
Perhatikan langkah 4!

1. rel="magnify[contoh]" : kode ini berfungsi untuk menghubungkan link ke gambar yang akan tampilkan, kode [contoh] ini adalah ID unik yang harus sama dengan kode ID.
2. id="contoh" : kode ini adalah identitas unik yang digunakan dalam pemanggilan gambar oleh kode rel="magnify[contoh]"
3. class="magnify" : ini adalah kode wajib yang harus disertakan untuk menampilkan gambar dengan efek magnify
4. data-magnifyby="2" : nilai 2 menentukan perbesaran gambar, jika diisi nilai 2 maka gambar akan di perbesar 2 kali dari ukuran aslinya. Kode ini adalah tambahan, jika tidak disertakan pun tidak menjadi masalah, hanya perbesaran default-nya adalah 3 kali jika tanpa kode ini.
5. Secara mudah efek magnify untuk artikel ikuti saja langkah 4 cara 2.

Semoga berhasil dan silahkan tinggalkan komentar jika mengalami kegagalan. Happy blogging... :)

Bloghack Tips Trik