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

14 Maret 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat