Tutorial ini akan menunjukkan cara membuat galeri yang secara otomatis akan menemukan gambar dalam folder dan menampilkannya menggunakan lightbox.

Pertama-tama, mari buat tulang punggung galeri kita:

Galeri jQuery yang keren

Idenya sangat sederhana - skrip PHP akan memindai folder untuk mencari gambar. Setelah itu, gambar-gambar tersebut akan diubah menjadi galeri yang indah menggunakan CSS & jQuery. Menggunakan galeri seperti itu sangat sederhana - Anda hanya perlu mengunggah gambar ke folder dan hasilnya akan langsung terlihat di halaman.

$direktori = "galeri"; //nama folder dengan gambar
$allowed_types=array("jpg","jpeg","gif","png"); //jenis gambar yang diperbolehkan
$file_parts=array();
$ext="";
$judul="";
$i=0;
//coba buka foldernya
$dir_handle = @opendir($directory) or die("Ada kesalahan pada direktori gambar Anda!");
while ($file = readdir($dir_handle)) //menelusuri file
{
if($file=="." || $file == "..") lanjutkan; //lewati tautan ke folder lain
$file_parts = meledak("..",$file); //pisahkan nama file dan masukkan ke dalam array
$ext = strtolower(array_pop($file_parts)); //elemen terakhir adalah ekstensi
$judul = meledak(".",$file_parts);
$judul = htmlkarakter khusus($judul);
$nomargin="";
if(in_array($ext,$allowed_types))
{
if(($i+1)%4==0) $nomargin="nomargin"; //gambar terakhir pada baris diberi kelas CSS "nomargin"
gema "

".$judul."
";
$i++;
}
}
closeir($dir_handle); //tutup folder

Dengan memindai file dalam folder dan melewatkan file non-gambar, kami mengumpulkan kode XHTML untuk setiap gambar. Kode (baris 28-39) terdiri dari wadah dengan kelas pic (dan dalam beberapa kasus nomargin ). Dengan menggunakan atribut style, kita mengatur gambar latar belakang menjadi gambar kita. Kami memposisikan gambar di tengah menggunakan 50% 50% . Dengan cara ini gambar disejajarkan secara horizontal dan vertikal. Jika gambar lebih besar dari balok, kita hanya melihat bagian tengahnya (bagian yang sesuai dengan wadahnya). Dengan cara ini kita mendapatkan thumbnail yang indah (tanpa harus memperkecil gambar itu sendiri).

Ini berfungsi baik dengan gambar "ringan". Usahakan untuk tidak mengunggah foto 10 megapiksel ke folder tersebut :).

Blok tersebut berisi tautan yang mengarah ke gambar ukuran penuh. Nama file berfungsi sebagai nilai atribut judul. Plugin lightBox menggunakan nilai-nilai ini dan mengubah gambar menjadi galeri. Untuk mengubah deskripsi suatu gambar, Anda perlu mengganti namanya.

Anda mungkin memiliki pertanyaan tentang kelas nomargin! Mengapa kita membutuhkannya? Setiap gambar di galeri memiliki margin kanan dan bawah. Artinya elemen terakhir di setiap baris tidak akan bisa sejajar dengan sisi kanan header blok. Itu terlihat tidak profesional. Oleh karena itu, kami menetapkan kelas khusus yang menghilangkan margin kanan untuk elemen terakhir berturut-turut. Hasilnya, kami mendapatkan hasil yang indah.

Sekarang mari kita formalkan semuanya sedikit:

/* pertama-tama setel ulang beberapa elemen untuk kompatibilitas browser */
body,h1,h2,h3,p,td,kutipan,kecil,bentuk,masukan,ul,li,ol,label(
margin:0 piksel;
bantalan:0 piksel;
keluarga font:Arial, Helvetica, sans-serif;
}
tubuh( /* tubuh */
margin-atas:20 piksel;
warna:putih;
ukuran font:13px;
warna latar belakang:#222222;
}
.clear( /* kelas clearfix */
jelas: keduanya;
}
a, a:mengunjungi (
warna:#00BBFF;
dekorasi teks: tidak ada;
garis besar: tidak ada;
}
a: arahkan kursor (
dekorasi teks: garis bawah;
}
#wadah(
lebar:890 piksel;
margin:20px otomatis;
}
#heading,#footer(
warna latar belakang:#2A2A2A;
batas:1 piksel padat #444444;
tinggi:20 piksel;
bantalan:6px 0 25px 15px;
margin-bawah:30px;
meluap:tersembunyi;
}
#catatan kaki(
tinggi:10 piksel;
margin:20 piksel 0 20 piksel 0;
bantalan:6px 0 11px 15px;
}
div.nomargin( /* kelas nomargin */
margin-kanan:0px;
}
.gambar(
mengapung:kiri;
margin:0 15px 15px 0;
batas:5px putih solid;
lebar:200 piksel;
tinggi:250 piksel;
}
.gambar a(
lebar:200 piksel;
tinggi:250 piksel;
indentasi teks:-99999px;
tampilan:blok;
}
jam1(
ukuran font:28px;
berat font: tebal;
keluarga font:"Trebuchet MS",Arial, Helvetica, sans-serif;
}
h2(
berat font:normal;
ukuran font:14px;
warna:putih;
}

Untuk pengoperasian yang benar, kita perlu menyertakan kerangka kerja, lembar gaya, dan skrip tambahan di header dokumen:

Sedikit keajaiban lagi:

// setelah halaman dimuat
$(dokumen).siap(fungsi())(
$(".gambar a").lightBox((

Pemuatan Gambar: "lightbox/images/loading.gif",
imageBtnClose: "lightbox/images/close.gif",
imageBtnPrev: "lightbox/images/prev.gif",
imageBtnBerikutnya: "lightbox/images/next.gif"
});
});

Di sini kita cukup menghubungkan beberapa gambar agar lightbox berfungsi dengan benar.

Galeri kami sudah siap! saya suka! :)

Ekstensi ringan dari Bidang Kustom Tingkat Lanjut (ACF) yang menambahkan bidang Galeri Foto ke postingan/halaman mana pun di situs WordPress Anda.

• Buat Bidang Anda secara visual
• Tambahkan banyak foto dan Anda juga dapat mengubah judul, keterangan, dan tautan ke apa pun
• Tetapkan bidang Anda ke beberapa halaman edit (melalui aturan lokasi khusus)
• Memuat data dengan mudah melalui API yang sederhana dan ramah
• Menggunakan jenis posting kustom WordPress asli untuk kemudahan penggunaan dan pemrosesan cepat
• Menggunakan metadata WordPress asli untuk kemudahan penggunaan dan pemrosesan cepat

Plugin ini merupakan alternatif dari ACF Gallery Pro. Anda harus memiliki pengetahuan tentang coding karena Anda akan diminta untuk mengedit kode sumber tema WordPress Anda. Jika Anda mencari kode pendek dan galeri bawaan maka plugin ini BUKAN untuk Anda. Plugin ini akan memberi Anda serangkaian gambar PHP dan Anda harus membuat tata letak galeri sesuai keinginan.

Apakah Anda memerlukan bantuan dalam instalasi, konfigurasi, dan pembuatan tata letak galeri? Anda dapat membeli layanan saya di Fiverr.com dengan mengikuti tautan https://www.fiverr.com/share/2KAjR8

acf_photo_gallery adalah fungsi pembantu yang menggunakan ACF_FIELD_NAME dan POST_ID akan menanyakan database dan mengkompilasi gambar untuk Anda. Output dari fungsi ini akan berupa array.

Acf_photo_gallery(ACF_FIELD_NAME, POST_ID);

Contoh berikut menggunakan kerangka Twitter Bootstrap untuk tata letak. Anda dapat menggunakan kerangka apa pun pilihan Anda.

" > " judul="">

Untuk menambahkan bidang tambahan, tambahkan yang berikut ini ke file fungsi tema Anda.php.

//Buat kolom tambahan bernama Teks Altnatif dan Fungsi Kelas Khusus my_extra_gallery_fields($args, $attachment_id, $field)( $args["alt"] = array("type" => "text", "label" => "Altnative Text", "name" => "alt", "value" => get_field($field . "_alt", $attachment_id)); // Membuat kolom Teks Alternatif $args["class"] = array("type" => "teks", "label" => "Kelas Khusus", "nama" => "kelas", "nilai" => get_field($field . "_class", $attachment_id)); return $args; ("acf_photo_gallery_image_fields", "my_extra_gallery_fields", 10, 3);

Anda dapat menggunakan fungsi pembantu ACF get_field

Get_field("photo_gallery_alt", $id); get_field("kelas_galeri_foto", $id);

Secara default, keterangan diambil dari kolom deskripsi. Tambahkan filter berikut ke function.php Anda untuk menarik keterangan dari bidang keterangan lampiran.

Add_filter("acf_photo_gallery_caption_from_attachment", "__return_true");

Kirim Permintaan HTTP ke URL untuk mendapatkan respons JSON dari semua postingan

Http://(domain)/wp-json/wp/v2/(POST_TYPE)/

Kirim Permintaan HTTP ke URL untuk mendapatkan respons JSON dari postingan tertentu

Http://(domain)/wp-json/wp/v2/(POST_TYPE)/(POST_ID)/

Saat Anda menerima respons, lihat item ACF yang berisi nama galeri foto ACF dan rangkaian gambar.

Jenis bidang ACF ini kompatibel dengan:
*ACF 4
*ACF5

Sama seperti plugin WordPress lainnya, plugin ini juga dapat menyebabkan masalah pada tema dan plugin lain. Jika Anda menghadapi masalah dalam membuat plugin ini berfungsi di situs WordPress Anda, silakan minta bantuan di forum dukungan. Dengan cara ini kami dapat membantu Anda dan mencegah masalah ini terjadi pada orang lain. Jika Anda ingin berbicara dengan saya secara langsung, Anda dapat menghubungi saya melalui website saya http://www.navz.me/

1.6.5=
* Hapus kondisi tidak kosong dari item kotak centang saat diedit
* Hapus dukungan untuk plugin ACF ke REST API
* Dukungan asli untuk REST API

1.6.4=
* Kesalahan JavaScript di konsol saat menghapus gambar dari metabox WordPress

1.6.3=
*Dukungan untuk ACF 5
* Edit galeri dengan model bawaan atau asli WordPress. Terima kasih kepada Github @makepost
* Di balik terpal perbaikan basis kode
* Dukungan untuk RESTFul API dengan plugin ACF ke REST API

1.6.2=
* Jaga agar data tetap tersinkronisasi dengan data lampiran
* Tarik keterangan lampiran keterangan menggunakan filter tambahan
* Kesalahan hitungan PHP 7.2()

1.6.1=
* Kotak edit gambar hilang saat mengklik tombol edit pensil yang dilaporkan oleh @rickytoof9

1.6.0=
* Kesalahan saat menyimpan postingan dengan galeri kosong. Patch disediakan oleh @ugy
* Menampilkan beberapa kolom galeri foto dalam satu halaman yang dilaporkan oleh @rickytoof9
* Dukungan untuk srcset. Terima kasih khusus kepada @ugy untuk kodenya

• Dukungan untuk SVG
• Dukungan untuk versi PHP lama
• Tambahkan bidang tambahan

• Dapat mengurutkan gambar galeri
• Memperbaiki urutan mengikuti urutan gambar galeri

• Ubah meta_key dari acf field_key menjadi acf field_name
• Fungsi pembantu acf_photo_gallery() untuk menarik gambar
• Fungsi pembantu acf_photo_gallery_resize_image untuk mengubah ukuran gambar dengan cepat dan menyimpannya
• Masalah dengan parameter target di konfigurasi
• Masalah dengan url tidak disimpan dengan benar

• Dukungan untuk WordPress 4.6
• Beberapa perubahan pada tampilan
• Ambil data dari database

• Indeks tidak ditentukan: bidang acf-photo-gallery-pada file acf-photo_gallery-v4
• Saat menghapus foto dari galeri, foto terakhir tidak terhapus
• Foto galeri tidak disimpan dalam database

Galeri di web dan berbagi dengan teman dan keluarga. Beberapa layanan online bagus dan nyaman. Tetapi jika Anda ingin menghostingnya di domain Anda sendiri dan mengontrolnya sendiri, banyak juga skrip yang tersedia. Biasanya kita ingin skripnya mudah digunakan dan mudah diatur tanpa memerlukan database apa pun. Dalam posting ini, saya memperkenalkan 2 skrip PHP.

Galeri File PHP Tunggal oleh Kenny Svalgaard

Single File PHP Gallery adalah galeri foto yang ditulis dalam PHP. Ini hanya memiliki satu file PHP. Thumbnail untuk foto dan direktori dibuat secara otomatis. File Tunggal Galeri PHP tidak memerlukan konfigurasi atau keterampilan apa pun untuk menggunakan atau database. Anda hanya perlu menyalin script tersebut ke direktori yang berisi foto Anda untuk dijadikan galeri. Dan secara otomatis mengatur sub direktori sebagai sub galeri.

Unduh: http://www.phpgraphy.org/index.php
Demo: http://www.ericzma.com/photo/index.php (galeri foto lama saya dengan tema khusus)

phpGraphy adalah skrip galeri foto PHP gratis yang ditulis dengan mempertimbangkan kesederhanaan dan efisiensi mengikuti filosofi KISS. Ini dirilis di bawah lisensi GPL. Mudah dipasang dan memiliki persyaratan minimal. phpGraphy mengintegrasikan banyak fitur bagus seperti komentar, rating, penanganan EXIF/IPTC. Meskipun phpGraphy dapat diatur untuk menggunakan database, Anda juga dapat memilih untuk menggunakan file untuk menyimpan informasi. Perkembangan tersebut tampaknya terhenti selama beberapa tahun. Namun fitur terkini harusnya ditemukan untuk galeri foto pribadi.

Galeri segi enam khusus CSS.

Responsif: tidak

Ketergantungan: -

Galeri batu CSS Grid yang responsif.

Browser yang kompatibel: Chrome, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Bosan menulis JavaScript? Sudahkah Anda menulis bagian yang adil tentang acara jQuery onclick? Jangan putus asa! Untuk Anda bisa membuat galeri responsif hanya dalam HTML dan CSS. Yang Anda butuhkan hanyalah beberapa label dan beberapa CSS eksotis. Selamat bersenang-senang!

Responsif: ya

Ketergantungan: -

Galeri batu dengan efek gulir.

Browser yang kompatibel: Chrome, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Galeri foto responsif diperbarui dengan efek lightbox. Gunakan CSS Grid & Flexbox dan tanpa skrip. Menggunakan properti target.

Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Galeri sederhana dalam HTML, CSS dan JS.

Browser yang kompatibel: Chrome, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Halaman produk tunggal minimal yang dibuat dengan CSS Flexbox dan vanilla JavaScript.

Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: 12columns.scss, onicons.css

Grid responsif penuh dengan UX seluler yang mengagumkan menggunakan satu kueri media dan dua baris kode.

Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Galeri gambar CSS murni.

Browser yang kompatibel: Chrome, Firefox, Opera, Safari

Responsif: ya

Ketergantungan: -

Ini adalah desain overlay popup untuk portofolio Anda! Tampilkan proyek/pekerjaan Anda secara detail dengan satu klik tombol.

Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari

Responsif: tidak

Ketergantungan: -

Galeri gambar paralaks menggunakan gambar & figcaption.

Browser yang kompatibel: Chrome, Edge, Firefox, Opera, Safari

Responsif: ya

Dependensi: relaxax.js

Galeri gambar dibuat dengan flexbox dan grid CSS.

Photogrid/photoset Tumblr dengan kotak fleksibel sebagai pengganti JavaScript.

Ini salah satu galeri gambar tempat Anda memilih img yang ingin Anda tampilkan di tengah. Tata letaknya dimungkinkan dengan kisi CSS. Saat beralih ke area pandang yang lebih kecil, Anda akan mendapatkan pengalaman berbeda yang dimungkinkan dengan mengubah kolom-templat-kisi dan baris-templat-kisi.

Galeri responsif yang bagus dengan: kolom CSS, roll over, teks hover, skrip popup besar, efek zoom in.

Animasi galeri gambar dengan HTML, CSS dan JS.

Galeri bergulir & berulang. HTML/CSS/JS vanila. Acara Tanpa Sentuhan.

Lihat galeri dengan mengklik jendela.

Klik tombol info di pojok kanan bawah. 😼 Khusus WebKit karena browser lain memiliki dukungan yang buruk untuk menggunakan calc() sebagai pengganti selain nilai panjang.

Galeri portofolio HTML, CSS dan JavaScript.
Dibuat oleh Tanmoy Biswas
14 Februari 2017

Galeri gambar dengan zoom.
Dibuat oleh Wunnle
3 Februari 2017

Galeri transformasi 3D putar kubus.
Dibuat oleh Lorina Gousi
30 Januari 2017

Efek hover galeri dan galeri diperluas.

Photobox adalah evolusi, generasi berikutnya dari kode UI & UX galeri.
Dibuat oleh Yair Even Or
4 Januari 2017

Galeri perjalanan dengan animasi/transisi flexbox dan CSS.
Dibuat oleh Sean Gratis
2 Januari 2017

Galeri yang menampilkan tiga panel saat pengguna menggulir.
Dibuat oleh Teegan Lincoln
1 Januari 2017

Eksperimen dinding galeri foto reflektif HTML, CSS dan JavaScript.
Dibuat oleh Shawn Reisner
21 Oktober 2016

Galeri transisi untuk empat gambar.
Dibuat oleh Dudley Storey
14 Oktober 2016

Ini memiliki 24 gambar 1920x1080 di dalamnya, sehingga perlu beberapa detik untuk mengunduh. Itu terlihat keren. Jangan ragu untuk bermain-main dengan variabel (waktu transisi, dan penundaan). Anda dapat mengubah jumlah gambar. Ubah saja variabel di scss dan js. Selain itu, jika Anda ingin menambahkan foto baru, cukup tambahkan url foto tersebut di array js.
Dibuat oleh Kirill Kiyutin
9 September 2016

Berikut adalah galeri gambar gulir miring 3D yang bagus yang diimplementasikan menggunakan plugin jquery.tilted-pagescroll milik Pete Rojwongsuriya.
Dibuat oleh Sebastian Schepis
19 Juni 2014