How to make a picture change randomly in a website? - javascript

I want to make a website that the user will decide something. The user will click what he or she chose.
I want to know how to make the picture change to a random other picture everytime the user clicks it.
Is there any way to do that?

create an array with all the urls of the images you wanna use.
e.g.
HTML:
<img id='the-image-to-change'/>
JS:
var imageUrls = [
'http://placehold.it/255x255&text=A',
'http://placehold.it/255x255&text=B',
// ... more
'http://placehold.it/255x255&text=Z'
];
if you're not using jQuery:
var img = document.getElementById('the-image-to-change');
img.addEventListener("click", function() {
this.src = imageUrls[Math.floor(Math.random() * imageUrls.length)];
});
if jQuery (has not been tested)
img = $('#the-image-to-change');
img.on('click', function() {
this.src = imageUrls[Math.floor(Math.random() * imageUrls.length)];
});

This should give you the type of effect you want. Basically you're storing your images in an array, then you're going to randomly pick an index, then display it.
var yourImages = ["image1.png","image2.png","image3.png"];
var randomImage = Math.round(Math.random()*yourImages.length);
function displayImage()
{
document.write(yourImages[randomImage]);
}
Here is an example that's more geared toward what you asked, after I read your question again. If the user clicks on the image, it'll change to a random one.
JS:
<img id="currentImage" src="defaultImage.png" onclick="changePicture()">
<script>
function changePicture(){
var yourImages = ["image1.png","image2.png","image3.png"];
var randomImage = Math.round(Math.random()*yourImages.length);
var setImg = document.getElementById("currentImage").src;
setImg = yourImages[randomImage];
}
</script>
jQuery:
<img id="currentImage" src="defaultImage.png">
<script>
$("#currentImage").click(function(){
var yourImages = ["image1.png","image2.png","image3.png"];
var randomImage = Math.round(Math.random()*yourImages.length);
$("#currentImage").attr("src", yourImages[randomImage]);
});
</script>

Create an array of your picture, and use
Math.random();
To select a random index from your picture array that will be shown??

Related

how can I create a list of background images' URLs and apply them on click function with jQuery?

I want the background image of the HTML body to be extracted from the list of images URLs and randomly or sequentially (sequentially preferred) a new image to be applied for each time a button on the page is clicked.
so it has to be something like this:
var images = ["URL1", "URL2", "URL3"];
$("button").onclick(function(){
//choose a random/sequential image from var images and use it as a background image for my body
// on another click choose a different background-image from images and use it as background
// and so on
});
you can do it randomly & next & prev like that:
var imagesArr = ["1.jpg","2.jpg"];
var selectedImage = 0;
$("button").click(function(){
var item = imagesArr[Math.floor(Math.random()* imagesArr.length)];
document.getElementById('body').style.backgroundImage = item;
});
$(".nextButton").click(function(){
if(selectedImage < imagesArr.length){
selectedImage++;
document.getElementById('body').style.backgroundImage = imagesArr[selectedImage];
}
});
$(".prevButton").click(function(){
if(selectedImage > 1){
selectedImage--;
document.getElementById('body').style.backgroundImage = imagesArr[selectedImage];
}
});

Change attributes of image in a new window

So I have a web page that has an image slide show of 6 different images 50x50 pixels. I would like to have it so that; when a user clicks the image, a new window pops up with the same images doing the same thing, but change the size to 200x200px. Is there an easy way to do this, am I close?
HTML:
JS:
var mainImg = document.getElementById("slide");
var imgArray = ["slicedImg_01.gif", "slicedImg_02.gif", "slicedImg_03.gif", "slicedImg_04.gif", "slicedImg_05.gif", "slicedImg_06.gif"];
var index = 0;
function imgCycle(){
mainImg.setAttribute("src", imgArray[index]);
index++;
if (index >= imgArray.length){
index = 0;
}
}
setInterval (imgCycle,500);
function fullSize(){
var big = window.open('assignment 1.1.html')
document.getElementById("slide").height="200";
}
You can access child element using your window object using plain javascript
var big = window.open('assignment 1.1.html')
big.document.getElementById("slide").height="200";
check this question and its answer, may it will help you.
how-can-i-access-the-dom-tree-of-child-window

Dynamically add pictures using javascript.

I've been working on a flowchart type program that changes various parts of the html each time a new question is posed (this question is represented by the 'state' variable below), things like Title, description and images.
Currently, my HTML for the images is:
<a id="imageLink" target="_blank" href=""><img class= 'right' id= 'imageBox' style ='max-height:50%;' src='' /></a>
<h3 id ='imageBoxText' ></h3>
and the image link and the legend for the image are found in imageArray which looks something like this:
imageArray = {'questionOne': ['www.link to image.com,'Legend for image']}
In this case 'questionOne' would be 'state'.
So far, I can load a single image asynchronously using:
document.getElementById("imageBox").src = "http://www.ktcagency.com/img/loader.gif"; // load spinner
var img = new Image(); // load image asynchronously
var newsrc = imageArray[state][0];
img.onload = function () { // onload handler
document.getElementById("imageBox").src = newsrc;
};
img.src = newsrc;
I also add the description and link to the image while I'm at it:
document.getElementById("imageLink").setAttribute('href',imageArray[state][0])
document.getElementById('imageBoxText').innerHTML = imageArray[state][1];
OK, so now what I need to do is write a function that can do this for multiple images, side by side, reading from a modified imageArray that looks like:
imageArray = {'questionOne': [['www.linktoimage1.com,'Legend for image1'],['www.linktoimage2.com,'Legend for image2']]}
The code should be able to handle up to three images, but I certainly wouldn't mind if it could do any more.
I tried to do it using a table to represent the images and used a for loop with the code from earlier. The image would never load, stuck on the spinner for ever and the images would all bunch up on one side of the screen.
Any help appreciated, thanks very much.
Well, I think I see what you're trying to do.
It sounds like you're trying to make a slideshow of some kind.
This is an example of how I would have done it.
Here's the jsfiddle so you can see what's going on. http://jsfiddle.net/VodkaTonic/4KWLr/
(function () {
var imageArray = {
link: [['http://i.imgur.com/7OfqRbF.jpg', 'http://i.imgur.com/AHbc6zO.jpg','http://i.imgur.com/gW144OQ.jpg'],['http://i.imgur.com/v0V8hrB.jpg', 'http://i.imgur.com/9l40vIT.png','http://i.imgur.com/ZXYUttz.png']],
label: [['Legend for image1','Legend for image2', 'Legend for image3'],['Legend for image4','Legend for image5', 'Legend for image6']]
},
doc = document,
question = 0,
img = doc.getElementsByClassName('images'),
links = doc.getElementsByClassName('links'),
label = doc.getElementsByClassName('label'),
button = doc.getElementById('button');
function add (state) {
var arr = imageArray.link[state],
arr2 = imageArray.label[state];
arr.forEach(function(value,index,array) {
img[index]['src'] = value;
links[index]['href'] = value;
});
arr2.forEach(function(value,index,array) {
label[index]['innerHTML'] = value;
});
question++;
}
window.addEventListener('load', add(question), false);
button.addEventListener('click', function () {
add(question);
}, false)
}());

change image and caption

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.

random image; without repeating?

First off I'm not very familiar with javascript, thus here I am.
I have this code for my site to draw a random image. Working from this, how can I make the images not repeat? Thanks in adv! Code:
<script type="text/javascript">
var banner_list = ['http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/LM_LogoMark4-4-2.gif', 'http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/logobg_dome.png', 'http://i1233.photobucket.com/albums/ff389/lxluigixl/Cargo/logobg_brain.png']; $(document).ready(function() { var ran = Math.floor(Math.random()*banner_list.length);
$(".logobg img").attr(banner_list[ran]);
}); $(document).bind("projectLoadComplete", function(e, pid){
var ran = Math.floor(Math.random()*banner_list.length);
$(".logobg img").attr("src", banner_list[ran]);
}); </script>
After you display the image splice it out of the array, you can use banner_list.splice(ran, 1);. The arguments are .splice(index, howManyToRemove, howManyToInsert). Inserting is optional, so you can just use splice to start at the index of the image you're displaying and remove one. Make sure not to remove it until you're done referencing it.
You can use Array.splice() as Robert suggest with 2 Arrays. One for unsused and one for used images. Check my JSfiddle.
var images = ["http://www.fowkesauto.com/products_pictures/nutsbolt.jpg",
"http://i01.i.aliimg.com/photo/v0/114511763/Fasteners_Bolts_and_Nuts.jpg",
"http://us.123rf.com/400wm/400/400/DLeonis/DLeonis0810/DLeonis081000018/3706757-bolts-and-nuts-on-white.jpg",
"http://static3.depositphotos.com/1003288/173/i/950/depositphotos_1737203-Nuts-and-bolts.jpg"],
usedImages = [];
setInterval(function () {changeImage();},500);
var changeImage = function () {
var index = Math.floor(Math.random() * (images.length)),
thisImage = images[index];
usedImages.push(thisImage);
images.splice(index, 1);
if (images.length < 1) {
images = usedImages.splice(0, usedImages.length);
}
$("#image").attr("src", thisImage);
}

Categories