Tag Archives: jquery magnifier

Memanfaatkan Plugins jQuery Magnifier

Memanfaatkan Plugins jQuery Magnifier

Memanfaatkan Plugins jQuery Magnifier
Memanfaatkan Plugins jQuery Magnifier

Sebuah gambar pada situs Joomla bisa dikatakan penting untuk memperjelas isi dari tulisan/artikel situs tersebut. Tentunya, gambar yang disisipkan harus bisa dilihat jelas. Jika sebuah situs disisipkan gambar dengan ukuran misalnya 800×600 pixel atau 480×640 pixel, maka artikel akan dipenuhi oleh gambar. Untuk mengatasinya, ukuran gambar bisa diperkecil. Namun hal ini menyebabkan gambar jadi kurang jelas.

Jangan khawatir, Anda bisa menggunakan plugins jQuery Magnifier untuk mengatasi masalah tersebut. Caranya cukup mudah, kita tinggal menambahkan jQuery Magnifier dan sedikit kode kelas pada image yang kita sisipkan di situs Joomla.

Pertama-tama, plugins jQuery Magnifier ini bisa Anda gunakan jika Anda menyiapkan terlebih dahulu file-file yang diperlukan, yaitu jquery.magnifyer.js. Berikut langkah-langkah memanfaatkan jQuery Magnifier tersebut.

1. Buka file index.php yg ada pada template aktif, sisipkan perintah berikut di antara tag <head></head> untuk meload skrip javascript.

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js”></script>
<script src=”/inuxpro/<?php echo $this->baseurl ?>/templates/<?php echo $this->template;?>/js/jquery.magnifier.js”></script>

2. Setelah itu simpan, kemudian tutup template editor.

3. Buka artikel yang terdapat image-nya. Aktifkan image yang akan kita magnify dengan cara di klik. Kemudian klik ikon insert/edit image untuk membuka kotak dialog settingan image.

Ada tiga tab yang perlu kita isi, yaitu general, appereance, dan advanced.

1. Pada tab general alamat image sudah terisi, karena kita bukan menyisipkan image, tetapi ingin mengubah properti image.

2. Pada tab kedua (appearance), terdapat beberapa parameter. Tetapi yang penting adalah Class–kita isi dengan magnify. Parameter yang lain seperti posisi gambar, ukuran, spasi vertikal, dan horizontal bisa Anda sesuaikan dengan pilihan Anda.

3. Tab advanced tidak perlu dibuka, langsung saja klik update.

4. Kita coba buka (preview) situs kita, dekatkan mouse ke atas image yang sudah diedit. Jika kursor mouse berubah jadi (+), langsung klik. Jika gambar membesar, berarti sudah selesai.

5. Ulangi langkah pertama.

Demikianlah cara memanfaatkan plugins jQuery Magnifier. Selamat mencoba.