Cara Memperluas Thumbnail blog Seperti Gambar Google

Gambar Google menjalankan UI unik dengan pratinjau gambar kecil dari berbagai situs web. Mengeklik salah satu thumbnail ini memperluas layar dengan lebih banyak rincian dan gambar yang lebih besar. Ini adalah salah satu fitur galeri foto terbaik yang pernah saya gunakan dan sekarang, Anda bisa mengkloningnya dengan Gridder.js.

Plugin jQuery gratis berikut mengikuti jejak UX Google yang luar biasa dengan membuat plugin yang sesuai dengan efek ini. Anda dapat mengubah galeri foto mana pun menjadi galeri bergaya Gambar Google dengan semua fitur animasi dan tampilan yang sama. Saya sangat terkejut dengan kecepatan dan kemudahan penggunaan yang disertakan dengan plugin ini. Hanya dengan mengklik thumbnail apapun segera menampilkan gambar yang lebih besar dan animasi super clean.

Gambar mencakup bagian untuk teks deskriptif jika Anda ingin menambahkan beberapa rincian atau tautan yang terkait dengan foto. Ini bekerja dengan baik untuk situs portofolio sederhana dengan tujuan memusatkan perhatian pada gambar.

Selain itu, Anda juga bisa menarik konten melalui Ajax. Ini memungkinkan Anda membuat gambar mini dinamis yang menarik konten dari situs web lain atau melalui API.

Setiap klik event menawarkan metode callback, jadi Anda bahkan bisa menjalankan plugin lain atau fungsi JavaScript bersama Gridder. Dengan begitu banyak pilihan, praktis terasa seperti kerangka grid keseluruhan!

Karena Gridder berjalan di jQuery, itu memerlukan versi terbaru sebagai ketergantungan. Tapi, hanya itu yang Anda butuhkan (bersama dengan file Gridder.js), dan dengan beberapa baris HTML, Anda dapat mengaktifkan grid Anda dengan lancar.

Anda harus memeriksa halaman GitHub untuk petunjuk penyiapan lengkap tapi inilah pratinjau singkat tentang apa HTMLnya :

<!-- Gridder navigation -->
<ul class="gridder">
    <li class="gridder-list" data-griddercontent="#content1">
        <img src="https://placehold.it/600x400" />
    </li>

    <!-- You can also load html/ajax pages by replacing the #ID with a URL -->
    <li class="gridder-list" data-griddercontent="/content.html">
        <img src="https://placehold.it/600x400" />
    </li>
</ul>

<!-- Gridder content -->
<div id="content1" class="gridder-content"> Content goes here... </div>

Semua konten ditarik melalui JavaScript, sehingga Anda dapat memuat hampir semua hal yang Anda inginkan. Ini adalah plugin yang sangat serbaguna dengan pilihan untuk mengubah kecepatan animasi, mengurangi, menutup gaya tombol, dan menggulir posisi offset saat pengguna mengeklik thumbnail baru. Newbie dan pengembang pro sama akan menemukan banyak nilai dalam plugin ini. Namun, jika Anda masih tidak yakin apakah ini untuk Anda lihat halaman demo Gridder live dan bermain-main.

Share this post