This question already has answers here:
Load Random Images from Directory
(5 answers)
Closed 7 years ago.
I currently have a stagnant image on my site:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/stylesheets/normalize.css" media="all" rel="stylesheet" />
<link href="/stylesheets/master.css" media="all" rel="stylesheet" />
<script>
window.onload = function () {
var images = [],
i=1, indexImages = true,
prefix = '../image/',
extension = '.jpg';
while (indexImages) {
var a = new XMLHttpRequest(); a.open('GET', prefix+i+extension, false); a.send();
if (a.status != 404) { i += 1; images.push(prefix+i+extension); } else {
indexImages = false;
localStorage['backgroundIndex'] = !localStorage['backgroundIndex']?0:+localStorage['backgroundIndex']+2>images.length?0:+localStorage['backgroundIndex']+1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
}
}
</script>
<style>
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
border-bottom: 8px solid #7D8A28;
}
</style>
</head>
<body>
<section id="card">
</section>
</body>
</html>
It's just that I want it to be a different image each time the page refreshes, so it auto changes to 2.jpg, 3.jpg, 10.jpg, whatever. (There are hundreds to choose from)
Could someone help me out with a solution? I'm not very good at this, and this is my first site.
Thanks.
I don't think CSS alone can do this, here's an answer:
Random
window.onload = function () {
var images = [
'image/1.png',
'image/2.png',
'image/3.png',
'image/4.png'
];
document.body.style.backgroundImage = 'url(' + images[Math.floor(Math.random()*images.length)] + ')';
}
This will load a random image every time you visit the page.
Specified Order
To load them in sequential order: First time image1, second time image2. The images don't need even have a number for this to work just fine. Do:
window.onload = function () {
var images = [
'image/A.png',
'image/B.png',
'image/C.png',
'image/D.png'
];
localStorage['backgroundIndex'] = !localStorage['backgroundIndex']?0:+localStorage['backgroundIndex']+2>images.length?0:+localStorage['backgroundIndex']+1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
Generating the Array (ONLY IF YOUR IMAGES HAVE A NUMBER AT THE END)
This will automatically generate the array for you and you don't have to provide the amount of images
window.onload = function () {
var images = [],
i = 1,
prefix = 'image/',
extension = '.png',
max = 1000;
function index() {
var a = new XMLHttpRequest();
a.open('GET', prefix + i + extension, false);
a.send();
a.onreadystatechange = function () {
if (a.readyState === 4) {
if (a.status != 404) {
i += 1;
images.push(prefix + i + extension);
i < max ? index();
} else {}
localStorage['backgroundIndex'] = !localStorage['backgroundIndex'] ? 0 : +localStorage['backgroundIndex'] + 2 > images.length ? 0 : +localStorage['backgroundIndex'] + 1;
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
}
};
}
index();
}
Most versatile solution
If you have PHP, this is probably the best solution in terms of working in many cases. But you really don't want to use PHP if you can avoid it. It will get all images in a directory to generate the array:
window.onload = function () {
var images = (JSON.parse("<?=scandir('../images')?>")||[]).filter(function (a) { return ['.', '..'].indexOf(a) < 0; });
document.body.style.backgroundImage = 'url(' + images[+localStorage['backgroundIndex']] + ')';
};
You can easily do it with JavaScript. You could define an array with all the images you have and then create a random number every time the page loads. Then use the random number to access the array's index to read the name of the image. Like so:
var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg"];
var randomNumber = Math.floor((Math.random() * images.length));
//images[randomNumber] contains your random image
Hope it helps.
Regards,
I see all these JS solutions but most likely you need a php one as I am sure you don't wanna put the names of hundreds of images in a file. So if you have some knowledge of programming in php then try this.
Generate a random number. Let's say it is 42
Read the file names one by one (http://php.net/manual/en/function.readdir.php)
Once you reach the 42nd file, pass it to the page.
You can either put the filename directly in the css or have a php page as a background image source which returns the images. Either case, the above steps will give you what you want.
The above works well if file names and types are different. However, if file names are numerical and all files are the same extension then just generating a number and just using it as the file name is slightly faster than the above method.
However, it is still faster than most JS solution. Remember that JS is on client side. That mean it will be executed after that page is loaded. With JS, files need to be as minimal as possible. Otherwise, the page would load and you wouldn't have a background until that request is returned. Considering all these delays, I wouldn't call JS efficient over PHP.
Although you can always make it nice and fade it in or something :)
No need for AJAX
Why you should use PHP
The added benefit of using PHP is we can make it so all you have to do is drop an image into a folder and it will automatically be added to the randomized list! Which is great for maintainability. You code it once, and leave it alone!
In my opinion, there is no added benefit to using AJAX. Any time you add an image, you would have to add it to your JS image array. However, I don't know your exact scenario.
Important
All the other solutions that mention PHP, so far, have failed to mention one very important part... the page you are working in must be parsed as a PHP file.
There are two ways to do so:
Parse html/htm page as php page via .htaccess (advanced)
Change your the page extension to '.php' (simple)
(My solution requires that your page is parsed as PHP)
Solution 1
I would use JavaScript to randomly select the image from a PHP generated list, then append CSS to apply the background image to the page before the window.onload event.
PHP with JavaScript Random
Append the following to page head:
<script type="text/javascript">
<?php
// Path to image can be a relative or absolute path. I recommend absolute.
// The following is my absolute path.
$img_dir_path = '/rand-img/images/';
// Get directory list. If using absolute, prepend $_SERVER['DOCUMENT_ROOT'] for php
$dir_listing = scandir($_SERVER['DOCUMENT_ROOT'].$img_dir_path, 1);
// array_diff() to remove '.' & '..' from front of $dir_listing array
$img_array = array_diff( $dir_listing, array('.', '..') );
?>
// JavaScript variables
var img_dir_path = '<?php echo $img_dir_path ?>';
var img_array = <?php echo json_encode($img_array) ?>;
var rand_index = Math.floor(Math.random() * img_array.length);
var img_path = img_dir_path + img_array[rand_index];
// no need to wait for window.onload if we append actual style tag
var css = 'body { background-image: url('+img_path+') !important; }',
head = document.head || document.getElementsByTagName('head')[0],
style = document.createElement('style');
style.type = 'text/css';
if (style.styleSheet){
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
head.appendChild(style);
</script>
Using PHP for random, will only work if the page is loaded without cache.
However, using JavaScript will randomize the image even if the actual page is cached.
Solution 2
In my experience, this solution will randomize the image the vast majority of the time. However, if the page is loaded via cache, the background image will not be re-randomized.
PHP Random
Append the following to page head:
<?php
// Path to image can be a relative or absolute path. I recommend absolute.
// The following is my absolute path.
$img_dir_path = '/rand-img/images/';
// Get directory list. If using absolute, prepend $_SERVER['DOCUMENT_ROOT'] for php
$dir_listing = scandir($_SERVER['DOCUMENT_ROOT'].$img_dir_path, 1);
// array_diff() to remove '.' & '..' from front of $dir_listing array
$img_array = array_diff( $dir_listing, array('.', '..') );
// Random number based off size of $img_array
$random_index = mt_rand(0, count($img_array)-1);
// Build image path
$image_path = $img_dir_path . $dir_listing[ $random_index ];
?>
<style type="text/css">
body {
background-image: url("<?php echo $image_path ?>");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
background-color: black;
border-bottom: 8px solid #7D8A28;
}
</style>
Related
At the moment I'm working with Elementor on Wordpress. What I'd like to do is have one of "modules" in Elementor filled with random images that also have each a different link to some page. I looked for a random image widget but those I found didn't provide a function to define a different link for each randomized image. So I decided to use the html widget on Elementor to use my own code. I'm not super skilled at this. So I have a code, the randomizing is working, so are the links but I don't know how to define a max. width for the images because they just fill the whole page with this code. My english isn't very good I hope someone might be able to help me and where to put something in the code to define the images size?
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var imageUrls = [
"IMAGE1“
, "IMAGE2“
, "IMAGE3“
];
var imageLinks = [
"LINK1“
, "LINK2“
, "LINK3“
];
function getImageHtmlCode() {
var dataIndex = Math.floor(Math.random() * imageUrls.length);
var img = '<a href=\"' + imageLinks[dataIndex] + '"><img src="';
img += imageUrls[dataIndex];
img += '\" alt=\"\"/></a>';
return img;
}
</script>
</head>
<script type="text/javascript">
document.write(getImageHtmlCode());
</script>
</body>
I have created a simple image slideshow for my website. Basically, it's just a Javascript function that runs every 5 seconds and updates a div element's CSS "background-image" property. It works good, however, I've noticed that it contacts the server every time that the function runs to verify the image is in the cache. This produces a 304 code from the server each time.
The images will certainly be in the cache since they are images that are already contained somewhere else on the same page. Therefore, they are already loaded into the cache when the website loads originally.
Here is a simplified sample of my code. As you can see, the image URL is just being pulled right from an img element already loaded on the page:
function update(img) {
var slideshow = document.getElementById("slideshow");
slideshow.style.backgroundImage = 'url("' + image + '")';
}
function advance() {
var img = document.getElementsByClassName("slidesource")[index].src;
update(img);
index++;
}
var index = 0;
advance();
setInterval(advance,5000);
Is there a way to update the CSS property without the browser having to verify that the images are in the cache?
Verifying that they exist wastes internet data (albeit only around 1.5kB per request) and will cause the slideshow to stop working if the internet is disconnected, even if the images are already in the cache.
I couldn't replicate your issue, trying your code with some img tags and a div tag.
However, I sort of could replicate if if I manually turned off cache in Chrome and turned it on again. Anyway, with the following code below, I didn't get any issues with the images trying to load again from the server.
CSS Solution
<style>
#slideshow {
width: 400px;
height: 400px;
}
.img1 {
background-image: url("https://picsum.photos/400/400")
}
.img2 {
background-image: url("https://picsum.photos/400/401")
}
.img3 {
background-image: url("https://picsum.photos/400/402")
}
</style>
<body>
<div id="slideshow"></div>
</body>
<script>
function update(imgclassName) {
var slideshow = document.getElementById("slideshow");
slideshow.classList.remove( slideshow.classList[0] );
slideshow.classList.add(imgclassName);
}
function advance() {
update('img'+index);
index++;
if (index > NUMBER_OF_IMAGES) {
index = 1;
}
}
var NUMBER_OF_IMAGES = 3;
var index = 1;
advance();
setInterval(advance,1000);
</script>
Psuedo Code:
if currentCondition is snow {
aFunction()
} else {
// something else
}
function aFunction {
look inside the snow folder at /images/condition/snow
chose random jpeg/jpg from that folder
use JQuery to set the css background-image property of a div
}
How would I make the above in JavaScript? I can accomplish everything except choosing the random picture inside the snow folder. Thanks.
EDIT: The files are incrementing (file_1.jpg, file_2.jpg, etc.)
Here's how to pick a random image, provided the number of images is set:
var totalBGs = 15;
var rnd = Math.floor(Math.random() * totalBGs) + 1; // 1 - 15
Next you need to set that as CSS background (jQuery):
$(document).ready(function () {
$("#some_element").css({ backgroundImage: "url(path/to/img/file_" + rnd + ".jpg)" });
});
This example shows you that, if you have image in 'images/' directory with all the images named as image_0.jpg, image_1.jpg, image_2.jpg incrementing ...
change the image file name structure according to your requirement. (Javascript directly cannot search file in server directory, as this might be helpful)
<img src="" align="middle" border="0" name="RandomImg" >
<script language="JavaScript">
// Genarate random value from 0-5, change 6 to any number you want
var rand_no = Math.floor(6*Math.random());
// This defines the source of the preview image (For example images/image_0.jpg)
document.images['RandomImg'].src="images/image_" + rand_no + ".jpg";
</script>
I am trying to learn JavaScript and have made a website which randomizes gifs onclick from an array.
What I would like to do now is insert a while loop so that it will compare the currentgif to the next randomized image so no duplicates are shown but I can't quite figure out what I am doing wrong, most likely a syntax issue.
HTML
<!DOCTYPE html>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<html>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">
<head>
<title>Randomizer</title>
</head>
<body>
<p>This image is random</p>
<a href="#" class="click">
<section>
<img>
<script>
getRandomImage()
</script>
</img>
</section>
</a>
</body>
</html>
JavaScript
var randomImage = new Array();
randomImage[0] = "images/1.gif";
randomImage[1] = "images/2.gif";
randomImage[2] = "images/3.gif";
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}
$(function() {
$('a.click').click(function(e) {
e.preventDefault();
var number = Math.floor(Math.random()*randomImage.length);
$(this).html('<img src="'+randomImage[number]+'" />');
});
});
You first need to get which image it is:
function returnImgNum(){
var imgNum = parseInt($('img').attr('src').split("/")[1].replace('.gif', ""));
return imgNum;
}
Then make a loopable function (or just make a while loop, I like doing it this way)
function placeRand(number){
if(number != returnImgNum()){
document.write('<img src="'+randomImage[number]+'" />');
} else {
placeRand(number){
}
}
Then add that comparator loop to your function:
function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
placeRand(number);
}
var random_images_array = ['smile.gif', 'frown.gif', 'grim.gif', 'bomb.gif'];
function getRandomImage(imgAr, path) {
path = path || 'images/'; // default path here
var num = Math.floor( Math.random() * imgAr.length );
var img = imgAr[ num ];
var imgStr = '<img src="' + path + img + '" alt = "">';
document.write(imgStr); document.close();
}
Check out this link. It tells you everything you need to know.
http://www.dyn-web.com/code/basics/random_image/random_img_js.php
Create array, put inside all image names (or their indexes if it's better for you) and then use something like this:
var images = ["/first.png", "/second.png", "/third.png", "/fourth.png", "/fifth.png"];
function takeImage() {
// if there is no more images in array, do something or return placeholder image
//if (!images.length) doSomething();
var image = images.splice(Math.floor(Math.random() * images.length), 1);
return image[0];
}
Basically, this function on each call will return one random image name (or index if you want) until there will be no images left in this array.
Simple, you save the last image out of the function. This makes a global variable. A global variable is a variable that exists in all functions, as a local variable only exists in the function itself (other functions cant use it).
// Define it outside of the function so the next time the called
// function gets it still has a value:
var lastNumber=0;
var imagesLength = randomImage.length; // don't recalc the amount of images every time
function getRandomImage(){
var number=0; // start a local variable
while( number == lastNumber){
number = Math.floor(Math.random()*imagesLength );
}
document.write('<img src="'+randomImage[number]+'" />');
}
To expand a bit on the local/global variables, lastNumber is global and can therefor be accessed in the function. var number however is local, it only exists in the function, console.log(number); outside the function would be undefined
To make a suggestion for improvement, document.write is best to be avoided. Browsers don't like them (*can't find doc's to support, feel free to edit), pre-create an image, even if its blank:
<img id="RandomImage" src="transparant.png" />
Now you make a global variable (this can only be done if the javascript is loaded after the image in the source, or with a document ready) to store the image, and use that:
// save reference to image, global (before the function):
var Image2Random = document.getElementById('RandomImage');
// place this instead of the document write.
Image2Random.src = randomImage[number];
This will be a lot faster. Javascript now knows what image to change, it doesn't have to create a new one every call (inserting elements to the DOM is expensive in resources), and the .src is really fast to change just the source.
as i want to send the file names which is included in <head> section e.g. css & js file name including it's container folder to the server side via ajax.
please note that, in given example the css & js are located inside of files folder.
so how can i get the css & js file names including it's container
<html> <head>
<link rel="stylesheet" href="files/sample.css"/>
<script type="text/javascript" src="files/jquery.js"> </script>
</head>
Now i need to consider about other things too, sample.CSS
#myImage {
background: url('image/lucy.jpg');
/* also i need to get these image file name including details with location */
}
this is to get the resources names (stylesheets and scripts) in your head element :
function filterName(path){
path = path.split('/');
return path[path.length - 1];
}
var styleSheets = [];
$('head link[rel=stylesheet]').each(function(){
styleSheets.push(filterName($(this).attr('href'));
});
var scripts = [];
$('head script[src]').each(function(){
scripts.push(filterName($(this).attr('src'));
});
It's rather hard to actual parse these files and compute their fullpath. To get all the images, you may consider to traverse all of the dom elements and check if they have any background-image attached to them through css :
function filterBgImage(n){
var m = n.match(/url\(["'](.*?)["']\)/);
if(m && m.length == 2)
return m[1];
return n;
}
var imgs = [];
$('*')
.filter(function(){
var a = $(this).css('background-image');
return a != '' && a != 'none';
})
.each(function(){
imgs.push(filterBgImage($(this).css('background-image')));
});
The good thing about this approach is that you do not have to transform the relative path into full path, because jquery is doing that for you.
Im not sure what you want to do is possible from a web browser - but there are tools that will do it without -> http://www.httrack.com/html/overview.html