I've tried to change a main image when clicking on a thumbnail, but I can't seem to have two different instances of the code together; only one will work at a time. Can someone tell me what I'm doing wrong, please?
My Javascript -
function changeImage(img) {
document.getElementById("img").src = img.src.replace("_t", "_b");
}
function changeImage(img) {
document.getElementById("img1").src = img.src.replace("_t", "_b");
}
My HTML -
<img src="images/AGM/events_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img src="images/AGM/events1_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img id="img" src="images/AGM/events_b.jpg" width="650">
<img src="images/BLACSBF/events_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img src="images/BLACSBF/events1_t.jpg"
onclick='changeImage(this);'
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5">
<img id="img1" src="images/BLACSBF/events_b.jpg" width="650">
Create one changeImage function and pass two parameters, the image and the target div.
function changeImage(img,target) {
document.getElementById(target).src = img.src.replace("_t", "_b");
}
Then call it like onclick='changeImage(this,'img1');' or onclick='changeImage(this,'img');'
Related
I have a site with many different gallery categories that display a smaller thumbnail size until the screen width is below 1200px, after which I would like to display the full size instead.
The images are displayed like so:
<section class="gallery category1">
<img id="cat1img1" src="cat1/small/img-1.jpg" alt="blah">
<img id="cat1img2" src="cat1/small/img-2.jpg" alt="blah">
etc...
</section>
<section class="gallery category2">
<img id="cat2img1" src="cat2/small/img-1.jpg" alt="blah">
<img id="cat2img2" src="cat2/small/img-2.jpg" alt="blah">
etc...
</section>
And all I want to do is use a JS media query with some jQuery to remove the "small/" from each tag without listing every single img so they can be freely added and removed without modifying the code again.
This is what I've tried but it's not changing the img url, though it does trigger my size change check:
function galleryBreak(x) {
if (x.matches) {
$('.gallery').children('img').attr('src').replace('/small','')
console.log('size change check');
};
};
var x=window.matchMedia('(max-width: 1200px)')
galleryBreak(x)
x.addListener(galleryBreak)
You have multiple (2) galleries and multiple images. You need to iterate over all images for all galleries. Something like this
function changeImagePaths(theGallery) {
var images = theGallery.querySelectorAll('img');
images.forEach( image => {
console.log('Path before: ', image.src)
image.src = image.src.replace('/small','')
console.log('Path AFTER: ', image.src)
});
};
var x=window.matchMedia('(max-width: 1200px)')
var myGalleries = document.querySelectorAll('.gallery')
myGalleries.forEach( gallery => {
if(x.matches) {
changeImagePaths(gallery)
}
});
<section class="gallery category1">
<img id="img1" src="cat1/small/img-1.jpg" alt="blah">
<img id="img2" src="cat1/small/img-2.jpg" alt="blah">
</section>
<section class="gallery category2">
<img id="img1" src="cat2/small/img-1.jpg" alt="blah">
<img id="img2" src="cat2/small/img-2.jpg" alt="blah">
</section>
JsFiddle to play with here
Now all of that said, if you can change the HTML please use Responsive images which will show you all you need can be set right in the image tag like:
<img srcset="elva-fairy-320w.jpg,
elva-fairy-480w.jpg 1.5x,
elva-fairy-640w.jpg 2x"
src="elva-fairy-640w.jpg"
alt="Elva dressed as a fairy">
add resize event listener on window so that on each window / browser resize this event will be fired
const galleryBreak = () => {
if (window.matchMedia('(max-width: 1200px)').matches) {
const images = document.querySelectorAll('.gallery img');
Array.from(images).forEach(img => {
const imgSrc = img.src.replace('/small', '');
img.src = imgSrc;
console.log(imgSrc);
});
}
};
window.addEventListener('resize', galleryBreak);
How do I have JavaScript telling me the current image name with an ONCLICK event... and I need to do this with alert() for some reasons.
function imgName() {
window.alert()
}
HTML
<figure>
<img src="aster.jpg" alt="aster" onclick="window.alert()">
<figcaption><span>I am aster</span></figcaption>
</figure>
Thanks
Giving an id to image for query from js code.
and just writing:
alert(document.querySelector('#imageId').alt) //supposed alt as name.
Change:
onclick="window.alert()"
to:
onclick="imgName(this)"
and within your imgName function change:
window.alert()
to
alert(foo.src)
where foo is the argument you pass to the function via function imgName(foo)
function imgName(foo) {
alert(foo.src)
}
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName(this)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Or you could just ditch the function and alert the src directly via:
<figure>
<img src="aster.jpg" alt="aster" onclick="alert(this.src)">
<figcaption><span>I am aster</span></figcaption>
</figure>
Please see below -
<html>
<body>
<script language="javascript" >
function imgName() {
var fullPath = document.getElementById("img1").src;
window.alert(fullPath)
}
</script>
<img src="aster.jpg" alt="aster" id="img1" onClick="imgName()">
</form>
</body>
</html>
In "onclick" you are not calling the function "imgName()".
Do this:
<figure>
<img src="aster.jpg" alt="aster" onclick="imgName()">
<figcaption><span>I am aster</span></figcaption>
</figure>
If "current image name" means that you want the alt attribute ("aster"), the code of function need to be this:
function imgName() {
var nameOfPics = document.getElementsByTagName("img")[0].getAttribute("alt");
alert(nameOfPics);
}
The problems is when you click the image, you didn't call the related function.
Change onclick="window.alert()" with the related function to return window alert.
<img src="aster.jpg" alt="aster" onclick="window.alert()">
Change with :
<img src="aster.jpg" alt="aster" onclick="imgName()">
I Hope its can help you, pardon me if this is not the best answer
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'm using onerror feature to detect broken links and replace those with an image, the problem is that in my code images that are okay are clickable.
So I want to make it in that way that when the function imageOnError is called to make that image impossible to click.
I tried to do it like this (img).unbind("click");
Lik this also: img.class = "blocked";
but it doesn't work?
<img class="img img-click not-selected " src="" onerror="return imageOnError(this);" />
countImgReplaced = 0;
function imageOnError(img) {
img.onerror = '';
img.src = 'https://dummyimage.com/256x256?text=Broken%20images%20.';
(img).unbind("click");
countImgReplaced ++;
return true;
}
And also I want to get the number of times that the image is replaced I did that with countImgReplaced , but it gives me the total number of images :/
I'm really confused. Can somebody help me?
You can apply pointer-events: none; to them via a class. You can apply that using the classList API
i.e.
img.classList.add('blocked');
You can just do this in HTML tag.
<img src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
$(document).ready(function(){
$("img").click(function(){
alert("Valid");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="clear:both;"><lable>Click in image(Invalid img):</lable>
<img width=200px height=200px src="../resources/images/Image1.jpg" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" />
</div>
<div style="clear:both;"><lable>Click in image (Valid img):<lable>
<img width=200px height=200px src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQzltPjpuUfCzEsYbhTYTm4xab4wfmCTFoNllbU5ljLLEAb3VvJXkgpWvU" onerror="this.src='https://www.google.co.in/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png';this.style='pointer-events: none'" /></div>
i have problem. i don't no how to fix that problem
HTML Code:
<div class="image">
<a href="#">
<img src="images/image1.jpg" id="mainimg-1">
</a>
</div>
<div class="otherthumbnailcontainer">
<div class="thumbnailimages" id="thumbnailcont-1">
<img src="images/image1.jpg" id="thumbnail-1" onMouseOver="changeimage('images/image1.jpg','mainimg-1','thumbnail-1','thumbnailcont-1');" class="thumbsmallimg selectedthumb">
<img src="images/image2.jpg" id="thumbnail-2" onMouseOver="changeimage('images/image2.jpg','mainimg-1','thumbnail-2','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image3.jpg" id="thumbnail-3" onMouseOver="changeimage('images/image3.jpg','mainimg-1','thumbnail-3','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image4.jpg" id="thumbnail-4" onMouseOver="changeimage('images/image4.jpg','mainimg-1','thumbnail-4','thumbnailcont-1');" class="thumbsmallimg">
<img src="images/image5.jpg" id="thumbnail-5" onMouseOver="changeimage('images/image5.jpg','mainimg-1','thumbnail-5','thumbnailcont-1');" class="thumbsmallimg">
</div>
</div>
Here is code:
function changeimage(thumburl,mainimgid,thumbnailimg,thumbmaindiv)
{
$('#'+mainimgid).attr("src", thumburl);
// $('#'+thumbnailimg).add("thumbsmallimg selectedthumb");
$('#'+thumbnailimg).removeClass("selectedthumb").addClass('thumbsmallimg');
// $('#'+thumbnailimg).toggleClass("selectedthumb");
}
Now what i would like to do on the website page is completely load the first image with these two class "thumbsmallimg selectedthumb" but when mouse goes over on another image the class "selectedthumb" will switch from one image to another.
EDIT:
http://jsfiddle.net/nZMpW/ Check this link. its like a product image gallery when you hover mouse on down image its come in big image. but first down image is selected if you move on another image its come in big image but is not select. css this ":hover" option only work when you mouse on that image but i don't want to do this
remove all you onmouseover events and use this jquery code in the $(document).ready() section
$(".thumbsmallimg").mouseover(function() {
$("#mainimg-1").attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
and, if you want it to work with several sets of thumbnails/bigImages, you can use data() attributes:
<img src="http://www.yoono.com/static/yoono_com_v8/img/iphone_yoono.png" id="thumbnail-1" class="thumbsmallimg selectedthumb" data-big-image="mainimg-1">
<img src="http://www1.pcmag.com/media/images/302835-apple-iphone-5-sprint.jpg" id="thumbnail-2" class="thumbsmallimg" data-big-image="mainimg-1">
.....
and in jqQuery:
$(".thumbsmallimg").mouseover(function() {
$("#" + $(this).data("big-image")).attr("src", this.src);
$(".selectedthumb").removeClass("selectedthumb");
$(this).addClass("selectedthumb");
});
here is your Fiddle updated again
instead having selectedthumb, in your css put those styles inside .thumbsmallimg:hover{
.thumbsmallimg:hover{
/* the styles that wrere in class .selectedthumb */
}