Widget Javascript Gratis Untuk Galeri Gambar Pixbay

Widget JavaScript gratis untuk memasukkan galeri gambar Pixabay dengan mudah ke situs web atau blog mana pun.

Widget ini dapat digunakan tanpa biaya untuk aplikasi apa pun - juga komersial dan tanpa memberikan kredit. Galeri gambar mudah disesuaikan dan responsif secara default. Public Domain (CC0).

Kode widget dirilis di bawah Lisensi MIT sebagai Open Source gratis di Github. Ia berfungsi di Firefox, Chrome, Safari, Opera dan Internet Explorer 8+ dan tidak memiliki ketergantungan (JavaScript biasa).

Download Lihat di GitHub

Cara Penggunaan

Pertama, mendaftar di Pixabay dan dapatkan kunci API Anda, yang akan Anda temukan di Halaman dokumentasi API. Mendaftarnya gratis, tentu saja. Kemudian, sertakan JavaScript termasuk kunci API Anda di mana saja pada halaman, namun sebaiknya sebelum penutupan </body> tag.

<script>var pixabayWidget = { 'key': 'YOUR_PIXABAY_API_KEY' }</script>

<script src="https://goodies.pixabay.com/javascript/pixabay-widget/pixabay-widget.min.js" async defer></script>

Skrip secara otomatis mendeteksi semua wadah widget dan merender galeri gambar. Wadah widget terlihat seperti ini:

<div class="pixabay_widget" data-search="africa animals" data-max-rows="3"></div>

Widget yang dihasilkan menampilkan sekumpulan gambar Pixabay populer, yang cocok dengan istilah "hewan afrika", dan menyertakan tombol navigasi dengan merek:

Atribut data-search memberi tahu widget gambar apa yang harus dicari. Jika parameter ini dihilangkan, semua gambar Pixabay akan dicantumkan. data-max-rows membatasi widget maksimal tiga baris gambar. Tabel berikut mencantumkan semua yang tersedia di data-* settings:

Pengaturan atribut data HTML5

Attribute	Default	Deskripsi
data-search	''	Sebuah string untuk dicari. Panjang maksimum: 100 karakter. Abaikan untuk memilih semua gambar.
data-user	''	Nama pengguna Pixabay untuk membatasi hasil pencarian.
data-lang	'en'	Bahasa yang dicari. Nilai yang diterima: 'bg', 'cs', 'da', 'de', 'el', 'en', 'es', 'fi', 'fr', 'hu', ' id', 'itu', 'ja', 'ko', 'nl', 'tidak', 'pl', 'pt', 'ro', 'ru', 'sk', 'sv', 'th' , 'tr', 'vi', 'zh'
data-image-type	'all'	Jenis media untuk mencari di dalamnya. Nilai yang diterima: "semua", "foto", "ilustrasi".
data-safesearch	false	Bendera yang menunjukkan bahwa hanya gambar yang sesuai untuk segala usia yang boleh dikembalikan. Nilai yang diterima: "benar", "salah".
data-editors-choice	false	Pilih gambar yang telah menerima penghargaan Pilihan Editor. Nilai yang diterima: "benar", "salah".
data-order	'popular'	Bagaimana hasilnya harus diurutkan. Nilai yang diterima: "populer", "terbaru".
data-page	1	Kumpulan gambar yang dikembalikan diberi nomor halaman. Gunakan parameter ini untuk memilih nomor halaman.
data-per-page	20	Jumlah maksimum gambar per halaman berikutnya/sebelumnya. Nilai: 3-100.
data-row-height	170	Tinggi maksimum suatu baris dalam piksel. Nilai 30-180.
data-max-rows	-	Jumlah baris maksimum yang akan ditampilkan. Gambar yang melebihi baris ini akan disembunyikan.
data-truncate	false	Sembunyikan tidak lengkap baris terakhir gambar.
data-target	-	Target tautan untuk gambar, mis. "_blank."
data-navpos	'bottom'	Posisi link pagination dan branding. Biarkan kosong untuk menyembunyikan keduanya. Nilai yang diterima: "bottom", "top".
data-branding	true	Apakah akan menampilkan "Powrd By Pixabay". Nilai yang diterima: "true", "false".
data-prev	'◄ PREV'	Teks untuk tautan "sebelumnya". Biarkan kosong untuk menyembunyikan kontrol penomoran halaman.
data-next	'NEXT ►'	Teks untuk tautan "berikutnya". Biarkan kosong untuk menyembunyikan kontrol penomoran halaman.

Contoh

Widget yang menampilkan gambar paling populer berdasarkan stevepb - hanya satu baris gambar besar, navigasi di atas dan tanpa pencitraan merek:

<div class="pixabay_widget" data-user="stevepb" data-max-rows="1" data-row-height="180" data-branding="false" data-navpos="top"></div>

Dan seperti inilah tampilan galerinya:

Mengubah pengaturan default dan nama kelas widget

Atribut data digunakan untuk mengonfigurasi widget individual. Sebagai alternatif, Anda juga dapat mengubah pengaturan default.

<script>

    var pixabayWidget = {

        class_name: 'pixabay_widget', // nama kelas untuk mendeteksi widget di halaman

        lang: 'en',

        image_type: 'all',

        safesearch: false,

        editors_choice: false,

        order: 'popular',

        per_page: 20,

        row_height: 170,

        max_rows: false,

        truncate: false,

        target: '',

        navpos: 'bottom',

        branding: true,

        prev: '◄ PREV',

        next: 'NEXT ►'

    }

</script>

Memperbarui widget setelah manipulasi DOM

Widget baru dapat ditambahkan (misalnya melalui AJAX) dan semua atribut serta pengaturan dapat diubah kapan saja. Gunakan metode initPixabayWidget() untuk merender semuanya

<script>

    new initPixabayWidget();

</script>

Gaya dan tata letak

Widget ini dilengkapi dengan seperangkat aturan CSS default, yang dihasilkan secara dinamis oleh skrip. Semua arahan CSS dapat ditimpa dengan gaya khusus. Silakan lihat kode sumber JavaScript widget untuk melihat CSS yang dibuat secara otomatis.

Sumber CDN / Hosting kode JavaScript

Jika mau, Anda dapat mengunduh skrip dan menyimpannya di server Anda sendiri. Alternatifnya, gunakan URL skrip dari Pixabay - seperti yang ditunjukkan pada contoh di atas. Atau Anda dapat menggunakan RawGit untuk mengakses repositori GitHub melalui CDN (MaxCDN):

<script src="https://cdn.rawgit.com/Pixabay/JavaScript-PixabayWidget/master/pixabay-widget.min.js" async defer></script>

Perangkat lunak ini dirilis sebagai Open Source di bawah Lisensi MIT oleh Saepul ID / Pixbay