Randomized showing of a BG-Image
from an Image Array
Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
function enqueue_random_background_script() {
// Define the folder containing your images
$image_url_folder = get_stylesheet_directory_uri() . '/images/backgrounds/';
$image_path = get_stylesheet_directory() . '/images/backgrounds/';
// Dateien mit den Endungen .jpg, .jpeg, .png, .gif finden
$files = glob( $image_path . '/*.{jpg,jpeg,png,gif}', GLOB_BRACE );
// Invalid directory or empty directory
if(empty($files)){
return;
}
// Dateien in URLs umwandeln
$file_urls = array_map( function ($file) use ($image_path, $image_url_folder){
return str_replace( $image_path, $image_url_folder, $file );
}, $files );
// Pass the image URLs to JavaScript
wp_enqueue_script('random-bg-script', get_stylesheet_directory_uri() . '/js/random-bg.js', array(), null, true);
wp_localize_script('random-bg-script', 'randomBgData', array(
'images' => $file_urls,
));
}
add_action('wp_enqueue_scripts', 'enqueue_random_background_script');random-bg.js
document.addEventListener('DOMContentLoaded', function () {
const element = document.getElementById('randomized');
if (element && randomBgData.images.length > 0) {
const randomImage = randomBgData.images[Math.floor(Math.random() * randomBgData.images.length)];
element.style.backgroundImage = `url(${randomImage})`;
console.log(randomImage);
}
});Showing the BG-Image of that weekday
// In Abhängigkeit von Wochentagen ein anderes Hintergrundbild zeigen
function schedule_bg_image() {
?>
<script type="text/javascript">
var imglocation = "/wp-content/uploads/";
function ImageArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '
}
}
image = new ImageArray(7);
image[0] = 'o2-7.jpg'; // Sunday
image[1] = 'o2-1.jpg'; // Monday
image[2] = 'o2-2.jpg'; // Tuesday
image[3] = 'o2-3.jpg'; // Wednesday
image[4] = 'o2-4.jpg'; // Thursday
image[5] = 'o2-5.jpg'; // Friday
image[6] = 'o2-6.jpg'; // Saturday
var currentdate = new Date();
var imagenumber = currentdate.getDay();
document.getElementById('weekday').style.backgroundImage = 'url(' + imglocation + image[imagenumber] + ')';
</script>
<?php
}
add_action( 'wp_footer', 'schedule_bg_image' );
// Ende Wochentags Scheduling