Fungsi Plugin jQuery imgCentering

Hallo teman-teman DUMET School, pada tutorial kali ini saya akan menjelaskan tentang fungsi Plugin jQuery imgCentering.js. Plugin jQuery imgCentering.js adalah Plugin jQuery yang berfungsi untuk me-resize gambar yang beukuran besar menjadi ukuran yang sesuai dengan lebar dan tinggi tempat gambar tersebut tanpa merubah rasio dari gambar tersebut. Terkadang kita sebagai seorang Web Development dalam membuat mockup tampilan website kesulitan dalam menentukan ukuran gambar yang ada di dalam website tersebut, selain kesulitan dalam menentukan gambar, kita juga harus memikirkan bagaimana caranya agar saat client menginput gambar ke dalam website, client tidak perlu me-resize gambar tersebut terlebih dahulu di Photoshop. Nah di sini saya menemukan satu Plugin jQuery yang mungkin dapat membantu teman-teman dalam membuat Mockup tampilan website dimana fungsi dari jQuery ini adalah untuk me-resize gambar tanpa perlu kita kecilkan atau kita paskan ukuran gambarnya di Photoshop. Untuk menggunakan Plugin jQuery ini teman-teman bisa mengikuti langkah-langkah nya di bawah ini. Disini saya menggunakna Plugin jQuery imgCentering dengan jQuery Lightbox.js.

Pertama kalian bisa buat satu file dengan nama index.html, dan include atau hubungkan file jQuery imgCentering yang sudah kalian download seperti berikut.

Kemudian kalian bisa buat struktur HTML nya seperti berikut. Pada Struktur HTML di bwah ini saya mengikuti struktur dari Plugin jQuery Lightbox.

Selanjutnya kalian bisa tuliskan script jQuery di bawah ini untuk memanggil nama class atau id yang ada di attribute HTML nya. Untuk scriptnya pilih salah satu saja, karena dari ke empat script diatas memiliki imgCentering yang berbeda-beda. Untuk mengetahui nya teman-teman bisa mencobanya dengan cara merubah nama class .imgset4 nya.

Maka hasinya seperti berikut.

Nah buat teman-teman yang ingin mendownload seluruh baris code di atas teman-teman bisa mendownloadnya di link download di bawah ini.

Download