I have the following HTML and JavaScript. There are three pictures and three links. Clicking on one link shows one picture and hides the other two.
This works. However, I'd like it so that when a picture is shown, it is shown as if the other two pictures don't exist, instead of being pushed somewhere down the page. Is that possible?
HTML
<div id="content">
<div id="left">
show image1
show image2
show image3
</div>
<div id="right">
<img id="img1" src="berlin.jpg" height="200px"/>
<img id="img2" src="london.jpg" height="200px"/>
<img id="img3" src="madrid.jpg" height="200px"/>
</div>
</div>
JavaScript
function showImage(id) {
var images_id = new Array("img1", "img2", "img3");
for (var i = 0; i < images_id.length; i++) {
setImageVisible(images_id[i], false);
}
setImageVisible(id, true);
}
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Instead of this:
img.style.visibility = (visible ? 'visible' : 'hidden');
Use this:
img.style.display = (visible ? '' : 'none');
Related
I want to make a button that simply change photo src from given src of image
<div id="main_photo">
<img class="card-img-top" src="/img/new0.JPG" alt="Avatar" >
</div>
I have new1.JPG to new6.JPG photo which should be changed on this image source on click of a button
All photos are in my /img/ folder
And here is my HTML code for the button to change src with onclick.
<button id="changeimg" > Change </button>
As #Teemu said (in comments), if you have the list of the new images you want to change to, you can do it by js code.
<div id="main_photo">
<img class="card-img-top" id="mainImage" src="/img/new0.JPG" alt="Avatar" >
</div>
<button id="changeimg" onclick="changeImage()"> Change </button>
<script>
var imageIndex = 0;
var imageCount = 6; // Can be also an array of images names ["/img/new0.JPG", "/img/new1.JPG", ..., "/img/new6.JPG"]
function changeImage() {
var imageContainer = window.getElementById("mainImage");
imageContainer.src = "/img/new" + (imageIndex++) + ".JPG";
// Make sure you validate the counter so it won't overflow
}
</script>
I have a demo for you if you have the list of images. And I believe that you can have that by simple code to get all images in your local folder.
const listSources = [
'/img/new0.JPG',
'/img/new1.JPG',
'/img/new2.JPG',
'/img/new3.JPG',
'/img/new4.JPG',
'/img/new5.JPG',
'/img/new6.JPG',
]
var currentIndex = 0;
$('#changeimg').click(function() {
// increase index to show the next image
currentIndex++;
// reset if reach the last image
if (currentIndex == listSources.length) currentIndex = 0;
// set image src
$('#main_photo>img').first()
.attr('src', listSources[currentIndex])
.attr('alt', listSources[currentIndex]); // change alt to show changes in demo
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="changeimg">Change</button>
<div id="main_photo">
<img class="card-img-top" src="/img/new0.JPG" alt="/img/new0.JPG">
</div>
I can't for the life of me figure out how to add an exit feature to my code. I want it so the user can click anywhere on the screen to make the image go away. Can someone help please?
HTML
<body>
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
JS
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
The default is visible. You need to set to hidden when you want to hide it.
And you need to bind your code on the click event.
var hidden = false;
window.document.addEventListener('click', function() {
document.getElementById("image").style.visibility = hidden ? "" : "hidden";
hidden = !hidden; // comment out this line if you do not want to show again on click
}, false);
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
Update 2, if you want the timeout code to show the image after 2 seconds (as mentioned in comments) and then when you click anywhere to hide it for ever use
var image = document.getElementById("image");
setTimeout(function() {
image.style.visibility = 'visible';
window.document.addEventListener('click', function() {
image.style.visibility = 'hidden';
}, false);
}, 2000);
#image {
visibility: hidden;
}
<img id="image" src="https://dummyimage.com/200x200" height="200" width="200">
<div align="center">
<img id="image" src="image1.png" height="200" width="200">
</div>
<script>
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility = "visible" ? "hidden" : "visible";
},2000);
</script>
Use jQuery to make it simple..
Codepen
$(document).ready(function(){
$('body').click(function(){
$('#image').hide();
})
})
you could use this.
$(window).click(function() {
//Hide the menus if visible
document.getElementById("image").hide();
});
var hidden = false;
setInterval(function(){
document.getElementById("image").style.visibility= hidden ? "visible" : "";
hidden = !hidden;
},2000);
function myremove(){
document.getElementById("image").style.display = "none";
}
<body onclick="myremove()">
<div align="center">
<img id="image" src="http://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded&a" height="200" width="200" style="display:block;">
</div>
</body>
On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:
<html>
<body>
<div>
<img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" />
<img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
<img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>
<div id="container">
<img id="img" src="1a.gif" />
</div>
</html>
</body>
It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.
As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:
#container {background:url('loading.png') no-repeat; }
In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).
Showing it right before loading the gif did not help as well:
<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />
There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.
Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long.
window.onload = function() {
var img = document.getElementById('img');
var container = document.getElementById('container');
var showImage = function showImage() {
img.style.display = "inline";
container.style.backgroundImage = "";
};
img.addEventListener('load', showImage);
img.addEventListener('error', showImage);
var thumbs = document.getElementsByClassName('thumb');
for (var i = 0, z = thumbs.length; i < z; i++) {
var thumb = thumbs[i];
var handler = (function(t) {
return function clickThumb() {
container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
img.style.display = "none";
img.src = t.dataset['image'];
};
})(thumb);
thumb.addEventListener('click', handler);
}
};
<div>
<img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
<img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
<img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>
<div id="container">
<img id="img" class="main" />
</div>
This happens bacause the second img is not loaded yet!
I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!
I am new to JavaScript and I'm working on something. This is what I've reached so far and here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Image Editor V 1.0</title>
<script>
function changeOpacity(newValue) {
document.getElementById("span").innerHTML = newValue*100 +'%';
document.getElementById("image1").style.opacity = newValue;
}
var color = true;
function imgColor() {
if (color) {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
color = false;
} else {
document.getElementById("image1").style.WebkitFilter = "none";
color = true;
}
}
function colorImg() {
document.getElementById("image1").style.WebkitFilter = "none";
}
function greyImg() {
document.getElementById("image1").style.WebkitFilter = "grayscale(100%)";
}
function userImage() {
var link = document.getElementById("userImg").value;
document.getElementById("image1").src = link;
}
</script>
</head>
<body>
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()" >Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages" id="image1" src="image4.jpg">
<img class="myImages" id="image2" src="image2.jpg">
<img class="myImages" id="image3" src="image3.jpg">
</body>
</html>
So far, the "Colored", "Greyscale", and "Alternate" buttons along with the opacity slider work as intended only on the first image (image1.jpg). Also, when the user inputs his own image, it replaces the first image and the functions work on it as intended. Here is what am trying to do:
1 - Let the user select which of the three images he wants to edit by clicking on it, then apply a border around it and use it in the other functions (greyscale and opacity). Here's what I tried (but didn't work):
<img class="myImages" id="image1" src="image4.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image2" src="image2.jpg" onclick="selectImg(this.id)">
<img class="myImages" id="image3" src="image3.jpg" onclick="selectImg(this.id)">
function selectImg(imgID) {
document.getElementById("imgID").style.border = 50px;
}
2 - When the user inputs his own image, I want it to replace all the 3 images I have displayed by default.
Your help is greatly appreciated. Thanks in advance!
You are missing quotes both on the id and the 50px. But it is better to define a style for the selection.
Then let a click handler first remove that style from all the images, except the clicked image, where it should set that style. The functions .classList.add and .classList.remove can be used for that.
Where you currently have document.getElementById('image1'), you would do instead:
document.querySelector('.selected')
Then you should also make sure that the page loads with one image selected, i.e. with the selected class.
Some other improvements make sure that when changing the selection, the opacity slider is also brought in line with that image's current opacity setting.
Here is a snippet that does all that:
function changeOpacity(newValue) {
document.getElementById("span").textContent = newValue*100 +'%';
document.querySelector(".selected").style.opacity = newValue;
document.querySelector('input[type=range]').value = newValue;
}
function getOpacity() {
return parseFloat(document.querySelector(".selected").style.opacity || '1');
}
function isColor() {
return document.querySelector(".selected").style.WebkitFilter !== "grayscale(100%)";
}
function imgColor() {
document.querySelector(".selected").style.filter =
document.querySelector(".selected").style.WebkitFilter =
isColor() ? "grayscale(100%)" : "none";
}
function colorImg() {
if (!isColor()) imgColor()
}
function greyImg() {
if (isColor()) imgColor()
}
function userImage() {
document.querySelector(".selected").src = document.getElementById("userImg").value;
}
// Add this function, and call it on click on an image
function select(img) {
Array.from(document.querySelectorAll('.myImages')).forEach(
myImg => myImg === img ? myImg.classList.add('selected')
: myImg.classList.remove('selected')
);
// bring opacity slider in line with selected image
changeOpacity(getOpacity());
}
.selected {
border: 1px solid;
}
<button onclick="colorImg()">Colored</button>
<button onclick="greyImg()">Greyscale</button>
<button onclick="imgColor()">Alternate</button><br><br>
Opacity :<input type="range" min="0" max="1" value="1" step="0.2" onchange="changeOpacity(this.value)"/>
<span id="span">100%</span> <br><br>
Try your own image! <input id="userImg" type="text" placeholder="Enter url here">
<button onclick="userImage()">Go!</button>
<br><br>
<img class="myImages selected" id="image1" onclick="select(this)"
src="//cdn.sstatic.net/Sites/stackoverflow/company/img/logos/se/se-icon.png?v=93426798a1d4">
<img class="myImages" id="image2" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
<img class="myImages" id="image3" onclick="select(this)"
src="http://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/sf/sf-icon.png?v=6c3100d858bb">
First - you are not using that imgID, but String like that variable. Change to:
function selectImg(imgID) {
document.getElementById(imgID).style.border = 50px; //notice no quotes for imgID
activeImage = imgID; //set activeImage ID
}
And then when you are doing something to an image, don't use "image1", but activeImage that is global variable (defined outside and before functions).
And as for new uploaded image:
Put it into another div and work with such algorithm -
when (uploaded_new)
hide default pics
show DIV with new image
activeImage = uploadedPic
Using JavaScript or jQuery, how can I display an image of a selected class (and hide all other images of that class) by changing the value of a seekbar (input range slider) ?
When value1 is selected, image1 should be shown, and all other images hidden, etc.
Welcome to StackOverflow. Try this JS Bin for a demo.
When the value of the input slider element changes, we use that value as an index for the images with the class-name "image". Then we hide all of those images, and show the image that corresponds with the selected index.
You can use either vanilla Javascript (no jQuery) or jQuery.
JAVASCRIPT
var slider = document.getElementById('image-slider');
slider.addEventListener('change', function(){
var images = document.getElementsByClassName('image');
var index = this.value;
for (var i = 0; i < images.length; i ++) {
images[i].style.display = 'none';
}
images[index].style.display = 'block';
}, false)
JQUERY
$('#image-slider').on('input', function(){
var index = this.value;
// hide all the images first
$('.image').hide();
// show selected image
$('.image').eq(index).show();
});
HTML
<div>
<input id="image-slider" type="range" min="0" max="4" step="1" value="1">
<img class="image" src="http://www.funnycatpix.com/_pics/Whaaa_Hahaha244_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/This_Pizza_Box_Is_Great_t.jpg" alt="">
<img class="image" src="http://www.funnycatpix.com/_pics/Kitten_Cuddlers_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/First_Time_In_The_Grass_t.jpg" alt="" hidden>
<img class="image" src="http://www.funnycatpix.com/_pics/Play_With_Me_Instead435_t.jpg" alt="" hidden>
</div>