Is there a tool that lets me use one URL (mysite.com/random-image for example) that dynamically updates the image in that URL to a random image of let's say 200 images at specific intervals? I'd like to display a random image on my site on every page load, or every minute, but don't want to code in 200+ image URLs in the HTML. Thanks for the help! Edit: If JavaScript is needed that's fine
Generating a random image with a link
Random images on 'refresh' in HTML without JavaScript - Stack Overflow
Display random image with fitting link - javascript
Choosing random image to display from one URL image link?
This is possible by delegating the randomness to the server that serves the images. Consider the service provided by PlaceIMG. Setting any <img/> tag to one of their URLs will let your show a "random" image. What is actually happening is that the backend gets a request for an image and serves any image it wants.
You can do this with your own, self-hosted image server and in basically any server-side language and without client-side JavaScript. However, there has to be logic somewhere to do the randomness:
<img src="https://placeimg.com/640/480/any" />There are many sites that serve as random image source, for example https://picsum.photos.
Working example (refresh to see the effect):
<img src="https://picsum.photos/200">Generalize your list of images so that that it can be multi-purposed - you can add additional information later. Then surround the image by an anchor tag (<a>) and use the following.
<div id="box">
<a name="imagelink"><img id="image" /></a>
</div>
<script type='text/javascript'>
var images = ["knife","fork","spoon","chopsticks",];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = "images/"+images[x]+".png";
document.getElementById('imagelink').href="products/"+images[x]+".html";
}
</script>
randImg();
Try doing something like this example. Like all these other guys have said, it's better to store this info in a database or something, but to answer your question, put the values you need into an object in the array and reference the properties of the object instead of just having a string array.
<div id="box">
<a id="a"><img id="image" /></a>
</div>
<script type='text/javascript'>
var images =
[
imageUrlPair = { ImgSrc:"http://www.dansdata.com/images/bigknife/bigknife1280.jpg", Href:"http://reluctantgourmet.com/tools/cutlery/item/267-chefs-knife-choosing-the-right-cutlery" },
imageUrlPair = { ImgSrc:"http://www.hometownsevier.com/wp-content/uploads/2011/01/fork.jpg", Href:"http://eofdreams.com/fork.html" },
imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/9/92/Soup_Spoon.jpg", Href:"http://commons.wikimedia.org/wiki/File:Soup_Spoon.jpg" },
imageUrlPair = { ImgSrc:"http://upload.wikimedia.org/wikipedia/commons/6/61/Ouashi.jpg", Href:"http://commons.wikimedia.org/wiki/Chopsticks" },
]
function randImg() {
var size = images.length;
var x = Math.floor(size * Math.random());
var randomItem = images[x];
document.getElementById('image').src = randomItem.ImgSrc;
document.getElementById('a').href = randomItem.Href;
}
randImg();
</script>
Is there a tool that let's me use one URL (mysite.com/random-image for example) that dynamically updates the image in that URL to a random image of let's say 200 images at specific intervals? I'd like to display a random image on my site on every page load, or every minute, but don't want to code in 200+ image URLs in the HTML. Thanks for the help! Edit: If JavaScript is needed that's fine
Wombleton's answer is what I would do. However, there is another way to do it. In the body markup, wherever you are going to put that random image, put a script that does a document.write with the markup for the image. Make sure you have an array of image URLs and substitute, like so:
<html>
<head>
<title>Test</title>
<script type="text/javascript">
var imageURLs = [
"http://www.myserver.com/images/image1.png"
, "http://www.myserver.com/images/image2.png"
, "http://www.myserver.com/images/image3.png"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Some alt text\"/>';
return img;
}
</script>
</head>
<body>
<script type="text/javascript">
document.write(getImageTag());
</script>
</body>
</html>
Again, this is not ideal, but is useful if you don't want to use any kind of onload event, not just the one you put in the <body> tag.
Adapted from jQuery's ready function, and making some assumptions about the image types:
(function() {
var urls = ['1', '2', '3', '4'];
function swap() {
document.getElementById('theImage').setAttribute('src', urls[Math.round(Math.random() * urls.length)] + '.jpg');
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
window.addEventListener( 'load', swap, false );
// If IE event model is used
} else if ( document.attachEvent ) {
window.attachEvent( 'onload', swap );
}
})();
I'm trying to create a simple page, on a site that allows limited HTML but no scripting or other advanced stuff. To spice things up, I thought it would be fun to have pictures which are randomised when you reload the page.
A while ago, I discovered Unsplash Source, an API for linking to pictures from the stock photo site Unsplash. With this nifty tool, I could make a collection of pictures on their site, and link to a random picture from the collection. Just <img src=https://source.unsplash.com/collection/9357731/x1>, and I'd have a random picture!
Sadly, the whole thing has apparently been shut down, so now I need something else that allows me to sneak a randomiser into an img-tag. Ideally somewhere I can upload or link to my own pictures, rather than just picking from that one stock photo site.
I do have a little home server, so it's presumably possible to set up my own randomiser. But I'm a beginner at web development, and haven't managed to figure out SSL, so my self-hosted pictures are rejected by the site in question for not using HTTPS. Much frustration!
Are there image hosting sites that use a similar clever linking interface? Can I somehow funnel my self-hosted pictures through someone else's HTTPS? Any other clever tricks for accomplishing this?