Jimp is a lightweight jQuery tooltip plugin for image preview. Very responsive to the viewport position and easy in installation.
Jimp ialah plugin jQuery untuk menampilkan gambar dalam tooltip yang sangat responsif terhadap posisi layar dan gampang dalam hal instalasi. Selalu dapat menjaga posisi dirinya pada kawasan yang terlihat. Mendukung URL kustom tanpa harus mengeset pengaturan plugin secara manual. Jimp akan memilih sendiri URL mana yang akan diambil sebagai penampil gambar:
Dasar Penggunaan
Wajib memakai jQuery versi 1.7 atau di atasnya. Susun jQuery, Jimp dan isyarat CSS ibarat ini. Letakkan semuanya di atas isyarat </head>
<link rel="stylesheet" media="screen" href="css/jimp.css" /> <script src="js/jquery-1.7.min.js"></script> <script src="js/jimp.js"></script> <script> $(function() { $('#example a').jimp(); }); </script>Markup HTML
Ada dua metode yang dapat Anda lakukan untuk mengaktifkan plugin ini pada elemen. Pertama, mengarahkan tautan pribadi kepada URL gambar. Ke dua, mengarahkan tautan ke sebuah halaman situs, kemudian mengeset nilai tooltip dengan URL gambar yang disimpan di dalam atribut data-preview:
<a href="large-image.jpg" title="Jimp · A jQuery Tooltip for Image Preview"><img src="thumbnail.jpg" alt=" is a lightweight jQuery tooltip plugin for image preview Jimp · A jQuery Tooltip for Image Preview" /></a><a href="page-url.html" data-preview="large-image.jpg" title="Jimp · A jQuery Tooltip for Image Preview">This is an example link!</a>Konfigurasi Plugin
Secara default ada beberapa opsi di dalam plugin ini yang dapat Anda sesuaikan sebagai pengaturan lanjutan:
$(function() { $('#example a').jimp({ width: 40, // default width of the tooltip before image loaded height: 40, // default height of the tooltip before image loaded resizeSpeed: 200, // resize speed of container fadeSpeed: 400, // fade speed of image delay: 1000, // mouseenter delay before excecuting offsetTop: 20, // tooltip offset top from pointer offsetLeft: 20, // tooltip offset left from pointer linkText: 'save', // save button label closeText: '×', // close button label hideOnOut: false, // if true, then when pointer mouse leave from image/link target, the tooltip will hidden and back to it's normal size hideOnChange: false // if true, then when pointer mouse leave from image/link sasaran (and then enter to the other target), the tooltip will hidden and back to it's normal size }); });| Opsi | Keterangan |
|---|---|
| width | Digunakan untuk memilih lebar tooltip dikala pertama kali tampil |
| height | Digunakan untuk memilih tinggi tooltip dikala pertama kali tampil |
| resizeSpeed | Digunakan untuk memilih kecepatan animasi perubahan ukuran tooltip gambar |
| fadeSpeed | Digunakan untuk memilih kecepatan pengaruh fading pada gambar |
| delay | Waktu penundaan sebelum perintah untuk menampilkan tooltip dieksekusi |
| offsetTop | Jarak atas tooltip terhadap pointer |
| offsetLeft | Jarak kiri tooltip terhadap pointer |
| closeText | Label untuk tombol tutup [x] |
| linkText | Label untuk tombol penyimpan gambar |
| hideOnOut | Jika true, maka tooltip akan tersembunyi ketika pointer mouse meninggalkan gambar/link target |
| hideOnChange | Jika true, maka ketika pointer mouse meninggalkan gambar/link sasaran dan kemudian memasuki sasaran yang lain, tooltip akan tersembunyi dan kembali ke ukuran normal.Jika false, tooltip akan terus tampak bersamaan dengan perpindahan sasaran dan akan mengubah ukurannya seiring keberhasilan pointer dalam menemukan sasaran yang baru. |
Ini ialah plugin pertama Saya. Mungkin memang masih ada beberapa deklarasi isyarat yang tidak begitu efisien, tapi setidaknya Saya sudah dapat memastikan bahwa plugin ini bebas dari kesalahan penulisan. Saya sudah mengetesnya pada Web Console, semua peramban mayor dan validasi JavaScript di JSBin dan JSFiddle. Untuk sementara semuanya akan Saya simpan di Google berhubung Saya belum begitu ahli soal GitHub. Situs jQuery Plugin juga dikala ini masih dalam perbaikan. Ke depannya mungkin akan muncul banyak sekali plugin gres yang meskipun tidak semenarik plugin-plugin yang sudah ada, tapi dapat dikatakan cukup bermanfaat untuk kalangan umum.
Sumber https://www.dte.web.id/