Tagged: random image
Hello,
is it possible to install a “random-image”-function?
This means that the background image of a section should change each time the page is reloaded from a previously defined set of images.
Thanks for help :)
give a unique ID to your color-section – here in my case it was: randomized
this is for only one page of mine so there is the is_page conditional.
upload the images via ftp into a given folder ( here it is a folder on uploads-folder: random-images
then put only the image-filenames into the array.
function randomize_bg_image() {
if(is_page(34024)){
?>
<script type="text/javascript">
(function($){
var images = ['o2-7.jpg', 'o2-1.jpg', 'o2-2.jpg', 'o2-3.jpg', 'o2-4.jpg', 'o2-5.jpg', 'o2-6.jpg'];
$('#randomized').css({
'background-image': 'url(/wp-content/uploads/random-images/' + images[Math.floor(Math.random() * images.length)] + ')'
});
})(jQuery);
</script>
<?php
}
}
add_action( 'wp_footer', 'randomize_bg_image' );
Hi, thanks, this is great and it works.
One other thing: now the image is always shown full in 100% size. Can I use the CCS “background-size: contain;” to show the whole image? And where would I put this snippet in?
Thanks again!
– oh, I see, I can just manage this in formatting the “#randomized”-tag. THANKS!
Hi,
Glad Guenni007 could help, thank you Guenni007, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.
Best regards,
Mike