On my website index, I'm currently displaying 18 random images, here's the code I currently use to display these images:
Here's my website I want to implement this feature on:
http://www.freevatars.co.uk
HTML:
<script type="text/javascript">
document.write(getImageTag());
</script>
JS:
var imageURLs = [
"css/images/avatars/1.png"
, "css/images/avatars/2.jpg"
, "css/images/avatars/3.png"
, "css/images/avatars/4.png"
, "css/images/avatars/5.png"
, "css/images/avatars/6.png"
, "css/images/avatars/7.png"
, "css/images/avatars/8.jpg"
, "css/images/avatars/9.jpg"
, "css/images/avatars/10.png"
, "css/images/avatars/11.jpg"
, "css/images/avatars/12.jpg"
, "css/images/avatars/13.jpg"
, "css/images/avatars/14.png"
, "css/images/avatars/15.jpg"
, "css/images/avatars/16.png"
, "css/images/avatars/17.jpg"
, "css/images/avatars/18.jpg"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
// Images in JS code go up to 410, so I have only placed 18 here to shorten it.
I was hoping to achieve a download button or a like system on the hover, however, with the image being displayed randomly with JS, I'm not able to use the standard HTML ahref download code because I would need an absolute path to the image.
Does anybody know how I could achieve this and keep the random images?
Thanks in advance!
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 am trying to make it so that clicking each randomize images will link to the respective url that it belongs to, i.e. clicking on facebook image will go to facebook.com, and clicking on twitter will go to twitter.com
Currently my code here is:
<p id="background" style="width:12%;height:23%"></p>
<script type="text/javascript">
function randomImage() {
var fileNames = [
"image1.png",
"image2.jpg",
"image3.png"
];
var randomIndex = Math.floor(Math.random() * fileNames.length);
document.getElementById('background').style.background = 'url(' +
fileNames[randomIndex] + ')';
}
randomImage();
setInterval(randomImage, 2000);
</script>
I've tried adding in various other methods to add the url, however my image will always disappear after adding. Thank you for looking at this post.
it is not displaying because you set height of image in a percent, below is the working example:
<div style="height: 100vh;"><p id="background"style="width:12%;height:23%" ></p></div>
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 don't think I explained this properly, but I ended up answering my own question, basically I was looking remove the head code because it made the document look ugly and was very tedious everytime when it came to scrolling, I put the head javascript code into it's file and removed the code from index head section and it seems to be working just fine.
Thanks all for the help!
/close
/answered
Can anybody point towards an easier method to load random images on my index.html page?
This is the current method I'm using
In the head section:
// It currently goes to css/images/images/410.png, I have just put six here so it isn't long and annoying
<script type="text/javascript">
var imageURLs = [
"css/images/avatars/1.png"
, "css/images/avatars/2.jpg"
, "css/images/avatars/3.png"
, "css/images/avatars/4.png"
, "css/images/avatars/5.png"
, "css/images/avatars/6.png"
];
function getImageTag() {
var img = '<img src=\"';
var randomIndex = Math.floor(Math.random() * imageURLs.length);
img += imageURLs[randomIndex];
img += '\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
</script>
In the body section:
<!-- RANDOM IMAGE 1 -->
<script type="text/javascript">
document.write(getImageTag());
</script>
<!-- RANDOM IMAGE 2 -->
<script type="text/javascript">
document.write(getImageTag());
</script>
I currently have 410 images altogether so you can image how annoying it is within the head section code
If your images are all named like that, this should work:
<script type="text/javascript">
var imagesCount = 410;
function getImageTag() {
var img = '<img src=\"css/images/avatars/';
var randomIndex = 1+Math.floor(Math.random() * imagesCount );
img += randomIndex;
img += '.png\" alt=\"Oh no, the image is broken!\"/>';
return img;
}
</script>
I am trying to work out a way to change the text that goes along with an image that is changed with javascript...
var x = 0;
var images = new Array(".jpg", ".jpg", ".jpg", ".jpg", ".jpg");
var i = setInterval(auto, 10000);
function auto() {
x++;
if (x == images.length) x = 0;
document.getElementById('bigImage').src = images[x];
}
function changeImage(img, imagetitle) {
document.getElementById('bigImage').src = img;
/* document.getElementById('mainimagetitle').innerHtml = imagetitle; */
}
The commented part is how i suppose I could possibly change the text that goes with the image. How do i code the html. Should i use a with the id mainimagetitle?
If so, where and how do i add the different texts i want to show and hide?
As I see from your posting, this should do the job.
<img id="bigImage" src="img1.jpg" alt="" />
<div id="mainimagetitle"></div>
Be sure to add a (filled) src tag or you will get strange results in IE. As you start with the second image (x++ before the change) this will be no problem. Happy accident I think. ;-)
// Edit: Of course any element will do as long as you use the right id. But you didn't tell us what html you use (xhtml/html5/...).
You could potentially have another array that stores the captions for each of the images
var captions = ['Caption 1', 'Caption 2', ...];
Assuming the mainimagetitle is an id of a <p> element, you could do:
function changeImage(img, imagetitle) {
document.getElementById('bigImage').src = img;
document.getElementById('mainimagetitle').innerText = imagetitle;
}
You can see the full example, based on your code here.