Ketika Anda mengunjungi berbagai website, terutama yang berfokus pada fotografi atau portofolio, seringkali Anda akan menemui galeri gambar yang menarik perhatian.
Galeri yang sama setiap saat dapat menjadi monoton dan kurang menarik bagi pengunjung yang berulang. Bagaimana jika galeri tersebut dapat menampilkan gambar yang berbeda setiap kali pengunjung mengakses halaman?
Bagaimana jika Anda ingin menampilkan galeri di WordPress Anda dengan format 2 baris dan 5 kolom yang memperbarui gambar-gambar tersebut secara acak?
Inilah solusi yang Anda butuhkan!
Fitur Dalam Script
Gambar tidak bisa di klik kanan
Melindungi konten Anda dari dicopy atau disimpan oleh orang lain menjadi sangat penting. Fitur ini memastikan bahwa pengunjung tidak dapat dengan mudah mengklik kanan dan menyimpan gambar dari galeri Anda.
Dengan mencegah akses klik kanan, Anda memberikan lapisan proteksi tambahan terhadap pencurian konten visual dan mempertahankan hak cipta atas karya Anda.
Gambar pertama akan muncul sebanyak 1-4 kali di kolom berbeda
Memiliki variasi dalam tampilan galeri bisa menjadi daya tarik tersendiri. Dengan fitur ini, gambar pertama, yang mungkin menjadi gambar unggulan atau paling menonjol, akan ditampilkan secara acak antara 1 hingga 4 kali di kolom yang berbeda.
Ini tidak hanya memberikan dinamika visual tetapi juga menekankan pentingnya gambar tersebut dalam galeri Anda. Selain itu, repetisi gambar tersebut bisa memancing rasa penasaran pengunjung untuk mengetahui lebih lanjut tentang gambar atau konten terkait.
Kode Gallery Acak Gambar
Script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery Acak</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 5px;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="gallery" id="gallery">
<!-- Gambar akan di-render di sini oleh JavaScript -->
</div>
<script>
// Daftar URL gambar
const baseImages = [
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/002.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/003.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/004.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/005.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/006.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/007.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/008.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/009.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/010.webp',
'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/011.webp'
];
const specialImage = 'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/001.webp';
const specialImageCount = Math.floor(Math.random() * 5) + 2; // Angka acak antara 2 dan 6
// Menambahkan gambar khusus ke array sebanyak specialImageCount kali
for(let i = 0; i < specialImageCount; i++) {
baseImages.push(specialImage);
}
// Fungsi untuk mengacak array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// Acak array gambar
shuffleArray(baseImages);
// Render gambar ke dalam gallery
const gallery = document.getElementById('gallery');
baseImages.slice(0, 10).forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image;
// Mencegah klik kanan pada gambar
imgElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
gallery.appendChild(imgElement);
});
</script>
</body>
</html>
Modifikasi
Jumlah gambar yang kami sediakan diatas berjumlah 11, dimana gambar pertama 001.webp ditempatkan di lokasi kode yang berbeda. Jika Anda ingin memuat lebih banyak gambar, cukup tambahkan URL gambar pada kolom dibawah 'https://devanoda-builder.xyz/sites1/wp-content/uploads/2023/09/011.webp'.
Script 64 Gambar
Jika Anda ingin memasukan gambar lebih banyak, dimana gambar 001.webp akan muncul secara acak dengan frekuensi sebanyak 1-6 kali di lokasi yang berbeda, Anda bisa menggunakan kode yang telah kami modifikasi ini:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gallery Acak</title>
<style>
.gallery {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 2px;
}
.gallery img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="gallery" id="gallery">
<!-- Gambar akan di-render di sini oleh JavaScript -->
</div>
<script>
const baseImages = [
'https://devanoda.com/wp-content/uploads/2023/09/02.webp',
'https://devanoda.com/wp-content/uploads/2023/09/03.webp',
'https://devanoda.com/wp-content/uploads/2023/09/04.webp',
'https://devanoda.com/wp-content/uploads/2023/09/05.webp',
'https://devanoda.com/wp-content/uploads/2023/09/06.webp',
'https://devanoda.com/wp-content/uploads/2023/09/07.webp',
'https://devanoda.com/wp-content/uploads/2023/09/08.webp',
'https://devanoda.com/wp-content/uploads/2023/09/09.webp',
'https://devanoda.com/wp-content/uploads/2023/09/10.webp',
'https://devanoda.com/wp-content/uploads/2023/09/11.webp',
'https://devanoda.com/wp-content/uploads/2023/09/12.webp',
'https://devanoda.com/wp-content/uploads/2023/09/13.webp',
'https://devanoda.com/wp-content/uploads/2023/09/14.webp',
'https://devanoda.com/wp-content/uploads/2023/09/15.webp',
'https://devanoda.com/wp-content/uploads/2023/09/16.webp',
'https://devanoda.com/wp-content/uploads/2023/09/17.webp',
'https://devanoda.com/wp-content/uploads/2023/09/18.webp',
'https://devanoda.com/wp-content/uploads/2023/09/19.webp',
'https://devanoda.com/wp-content/uploads/2023/09/20.webp',
'https://devanoda.com/wp-content/uploads/2023/09/21.webp',
'https://devanoda.com/wp-content/uploads/2023/09/22.webp',
'https://devanoda.com/wp-content/uploads/2023/09/23.webp',
'https://devanoda.com/wp-content/uploads/2023/09/24.webp',
'https://devanoda.com/wp-content/uploads/2023/09/25.webp',
'https://devanoda.com/wp-content/uploads/2023/09/26.webp',
'https://devanoda.com/wp-content/uploads/2023/09/27.webp',
'https://devanoda.com/wp-content/uploads/2023/09/28.webp',
'https://devanoda.com/wp-content/uploads/2023/09/29.webp',
'https://devanoda.com/wp-content/uploads/2023/09/30.webp',
'https://devanoda.com/wp-content/uploads/2023/09/31.webp',
'https://devanoda.com/wp-content/uploads/2023/09/32.webp',
'https://devanoda.com/wp-content/uploads/2023/09/33.webp',
'https://devanoda.com/wp-content/uploads/2023/09/34.webp',
'https://devanoda.com/wp-content/uploads/2023/09/35.webp',
'https://devanoda.com/wp-content/uploads/2023/09/36.webp',
'https://devanoda.com/wp-content/uploads/2023/09/37.webp',
'https://devanoda.com/wp-content/uploads/2023/09/38.webp',
'https://devanoda.com/wp-content/uploads/2023/09/39.webp',
'https://devanoda.com/wp-content/uploads/2023/09/40.webp',
'https://devanoda.com/wp-content/uploads/2023/09/41.webp',
'https://devanoda.com/wp-content/uploads/2023/09/42.webp',
'https://devanoda.com/wp-content/uploads/2023/09/43.webp',
'https://devanoda.com/wp-content/uploads/2023/09/44.webp',
'https://devanoda.com/wp-content/uploads/2023/09/45.webp',
'https://devanoda.com/wp-content/uploads/2023/09/46.webp',
'https://devanoda.com/wp-content/uploads/2023/09/47.webp',
'https://devanoda.com/wp-content/uploads/2023/09/48.webp',
'https://devanoda.com/wp-content/uploads/2023/09/49.webp',
'https://devanoda.com/wp-content/uploads/2023/09/50.webp',
'https://devanoda.com/wp-content/uploads/2023/09/51.webp',
'https://devanoda.com/wp-content/uploads/2023/09/52.webp',
'https://devanoda.com/wp-content/uploads/2023/09/53.webp',
'https://devanoda.com/wp-content/uploads/2023/09/54.webp',
'https://devanoda.com/wp-content/uploads/2023/09/55.webp',
'https://devanoda.com/wp-content/uploads/2023/09/56.webp',
'https://devanoda.com/wp-content/uploads/2023/09/57.webp',
'https://devanoda.com/wp-content/uploads/2023/09/58.webp',
'https://devanoda.com/wp-content/uploads/2023/09/59.webp',
'https://devanoda.com/wp-content/uploads/2023/09/60.webp',
'https://devanoda.com/wp-content/uploads/2023/09/61.webp',
'https://devanoda.com/wp-content/uploads/2023/09/62.webp',
'https://devanoda.com/wp-content/uploads/2023/09/63.webp',
'https://devanoda.com/wp-content/uploads/2023/09/64.webp'
];
const specialImage = 'https://devanoda.com/wp-content/uploads/2023/09/01.webp';
const specialImageCount = Math.floor(Math.random() * 6) + 1; // Angka acak antara 1 dan 6
// Fungsi untuk mengacak array
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
// Mengambil 10 gambar pertama dari baseImages untuk array sementara
let first10Images = baseImages.slice(0, 10);
// Menambahkan gambar khusus ke posisi acak dalam 10 gambar pertama
for (let i = 0; i < specialImageCount; i++) {
const position = Math.floor(Math.random() * first10Images.length);
first10Images.splice(position, 0, specialImage);
}
// Mengacak urutan first10Images
shuffleArray(first10Images);
// Gabungkan 10 gambar pertama yang sudah diacak dengan sisa gambar
const combinedImages = first10Images.concat(baseImages.slice(10));
// Render gambar ke dalam gallery
const gallery = document.getElementById('gallery');
combinedImages.slice(0, 10).forEach(image => {
const imgElement = document.createElement('img');
imgElement.src = image;
// Mencegah klik kanan pada gambar
imgElement.addEventListener('contextmenu', (e) => {
e.preventDefault();
});
gallery.appendChild(imgElement);
});
</script>
</body>
</html>
Penutup
Dengan script di atas, Anda sekarang memiliki solusi yang fleksibel untuk menampilkan galeri gambar yang berubah-ubah, menjaga tampilan website Anda tetap segar dan menarik bagi pengunjung.
Dengan mengombinasikan estetika visual dengan fungsi yang dinamis, Anda tidak hanya meningkatkan daya tarik visual situs Anda, tetapi juga meningkatkan peluang untuk pengunjung kembali dan melihat konten baru.
Selamat mencoba dan semoga website WordPress Anda semakin menarik bagi setiap pengunjung!
