I am new in JS,please help me.I have 4 images with the same class name and a hidden div which is displayed when one of 4 images is clicked. How i can add to my div the image which one is clicked? I do not want to write a function for every image.Is it possible with my code?
<img onClick="show()"class="img" src="css/images1/img1.png">
<img onClick="show()"class="img" src="css/images1/img2.png">
<img onClick="show()"class="img" src="css/images1/img3.png">
<img onClick="show()"class="img" src="css/images1/img4.png">
<div class="gallery"></div>
<script>
function show(){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML='<img src=css/images1/img1.jpg>';
};
</script>
Pass in the "src" of the element that was clicked:
function show(src){
var x=document.getElementsByClassName('gallery')[0];
x.style.display="block";
x.innerHTML = '<img src="' + src + '">';
}
Then for your html <img/> tags pass in their src to show:
<img onClick="show(this.src)"class="img" src="css/images1/img1.png">
Edit: if you must select "gallery" by className, use getElementsByClassName as you originally had.
Related
I have a img tag like
<img src="Mesothelioma_image_1.jpg"/>
I want to replace this tag with something like
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>
By keeping the same src attribute value.
You can use querySelector() to find the image. It would be easier if the image contains an id attribute.
Then, use createElement() to create the dom element by name amp-img.
Use setAttribute() to assign attributes to the new elements such as class, src, width, erc.
Use insertBefore() to add new element to the page and remove() to remove the old image element.
NOTE: I am selecting the old image with its src, please change it as per your need.
var oldImage = document.querySelector('img[src="Mesothelioma_image_1.jpg"]');
var newImage = document.createElement('amp-img');
newImage.setAttribute("class","blog-image");
newImage.setAttribute("src", oldImage.getAttribute('src'));
newImage.setAttribute("width","50");
newImage.setAttribute("height","20");
newImage.setAttribute("layout","responsive");
oldImage.parentNode.insertBefore(newImage, oldImage);
oldImage.parentNode.removeChild(oldImage);
console.log(document.querySelector('amp-img[src="Mesothelioma_image_1.jpg"]')); // to find the appended new image
<img src="Mesothelioma_image_1.jpg"/>
Please see below code.
You will need to access img using parent class or Id.
i have did this work on a link click event, You can do this on document.ready or any other event as well.
jQuery('.clickMe').click(
function(e){
e.preventDefault();
var img = jQuery('.parent img').attr('src');
var newhtml='<amp-img class="blog-image" src="'+img+'" width="50" height= "20" layout="responsive"></amp-img>';
// console.log('IMG: '+ img);
jQuery('.parent').html(newhtml);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
<img src="https://mosthdwallpapers.com/wp-content/uploads/2016/08/Pakistan-Flag-Image-Free-Download.jpg"/>
</div>
<a class="clickMe" href="#">Click Me </a>
<amp-img class="blog-image" src="Mesothelioma_image_1.jpg" width="50" height= "20" layout="responsive"></amp-img>
I'm trying to use img src as background-image of its parent div (with the same class) with jQuery way, but I need to apply the concrete url of its img child to every div without changing or adding extra classes or id, so that each div parent applies a corresponding different background-image.
My HTML is something like this:
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src=“url-image-2” />
</div>
<div class="class">
<img src="url-image-3" />
</div>
… and jQuery:
$('.class').css('background-image', 'url(' + $('.class img').attr('src') + ')');
$('.class img').remove();
This code is grabbing the first element (url-image-1) every time; it does not know I want to apply each img to its parent container.
Thanks in advance! (And sorry for my bad english).
You can use
$('.class').each(function(){
$(this).css('background-image', 'url(' + $(this).find('img').attr('src') + ')');
$(this).find('img').remove();
})
The issue is because you're selecting all the .class img elements. Calling attr() on that will only ever get you the first item found in the set.
To fix this, you can provide css() with a function that you can use to find the img related to the current .class element. Try this:
$('.class').css('background-image', function() {
return 'url(' + $(this).find('img').prop('src') + ')');
});
Try each function .And select the children image with children('img')
$('.class').each(function() {
$(this).css('background-image', 'url(' + $(this).children('img').attr('src') + ')');
console.log($(this).children('img').attr('src'))
$(this).children('img').remove();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="class">
<img src="url-image-1" />
</div>
<div class="class">
<img src="url-image-2"/>
</div>
<div class="class">
<img src="url-image-3" />
</div>
Alright.
What I want to do is create a few buttons up top, which will hide/show elements.
If the user presses "350x150" it will hide all the images except for the "350x150" images.
1). User presses "350x150" 2). All images hide except for the
two "350x150"
I tried using some jQuery to hide images but it did not work. How would I do this?
The images are done like this:
<div class="Collage">
<img class="boom" src="http://placehold.it/1000x150">
<img class="ei" src="http://placehold.it/150x150">
<img class="boom" src="http://placehold.it/200x150">
<img class="ei" src="http://placehold.it/200x350">
<img class="350x150" src="http://placehold.it/350x150">
<img class="350x150" src="http://placehold.it/350x150">
<img class="boom" src="http://placehold.it/500x150">
<img class="ei" src="http://placehold.it/50x200">
<img class="boom" src="http://placehold.it/350x200">
<img class="ei" src="http://placehold.it/600x200">
</div>
You can add to your filter btns class let's say "filter-btn" and then their id's could be the same as the class you want to show, for example id="350x150" or id="boom" or id="ei"... I think you get the point :)
$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
$(".Collage img").show();
$(".Collage img").not(filterVal).hide();
});
Or you can first hide all and then show those that you need:
$(".filter-btn").click(function(){
var filterVal = "." + $(this).attr("id");
$(".Collage img").hide();
$(".Collage img").filter(filterVal).show();
});
EDIT or better cache your elements:
var $collageImages = $(".Collage").find("img"); // cache your elements!
$("#filter350x150").click(function(){
$collageImages.hide(); // Hide all
$(".350x150").show(); // Show desired ones
});
// other buttons here...
or with a more versatile code:
var $collageImages = $(".Collage").find("img"); // cache your elements!
$("[id^=filter]").click(function(){ // any button which ID starts with "filter"
var class = this.id.split("filter")[1]; // get the filterXYZ suffix
$collageImages.hide(); // Hide all
$collageImages.is("."+ class ).show() // Show desired ones
});
Try to use class name, which starts not with a number. I had a lot of troubles in case of it.
For example <img class="res350x150" src="" />
I have an image below a nav and the image changes depending on which nav item is hovered over. Here is the code:
$(document).ready(function() {
$('.nav-item').mouseenter(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
}).mouseleave(function() {
var img = $(this).attr('data-headerimg');
$('img#header-img').attr('src', img);
});
});
I'd like the image to be a link to it's corresponding page, but I'm not sure how to do that via jQuery. Any help would be greatly appreciated.
First, enclose the image in an anchor in your HTML: <a><img ....></a>. Put the link next to data-headerimg, in data-headerlink attribute.
Second, update the anchor's href to the same value you're setting the image's src:
var img = $(this).attr('data-headerimg');
var href = $(this).attr('data-headerlink');
$('img#header-img').attr('src', img).parent().attr('href', href);
Sorround it with a href tag in html like
<a id="headerimglink" href=""><img src="" /></a>
set the href attribute along with the src attribute, or you can hardcode it as well if that is not changing.
Why to send an image request and wait a server response with image data? (Some users find it very annoying)
In order to preload your images You can simply create the needed tags and just swap display (with fade?) on item hover.
Let's say:
<ul id="list">
<li>Football</li>
<li>Barbara</li>
</ul>
<div id="images">
<img src="foo.jpg" alt="Foo">
<img src="bar.jpg" alt="Bar">
</div>
#images a {
display:none;
position:absolute;
/* etc */
}
var $imgLink = $('#images a');
$('#list li').hover(function( e ) {
$imgLink.stop().fadeTo(300, 0);
if(e.type=="mouseenter") {
$imgLink.eq( $(this).index() ).fadeTo(300, 1);
}
});
I have a structure like:
<div id="so1" class="card over" data-direction="right" gal="gal1" >
<div class="front" >
<img src="img1.jpg" width ="100%;" height ="100%;" alt="">
</div>
<div class="back" style="background-color:#99ca3c;">
</div>
</div>
to recognize this sections I do
change_it = function (id,effect, img ) {
$('#' + id).toggleClass(effect);
$('#' + id).attr('img', img);
}
I call it
change_it ("so1", "flipping-right" ,"imgs/img1/2.jpg");
However it is not changing its value, How can I access this img attribute, if I only have id of parent div?
I mean, the structure is div->div->img
You need to find the image and change its src attribute:
change_it = function (id,effect, img ) {
$('#' + id).toggleClass(effect);
$('#' + id).find('img').attr('src', img);
}
Here so1 is div id but you are using
$('#' + id).find('img').attr('src', img);
for a div.
Here you need to find the image tag first existed in that div.Then change the src of that image.
If you want to assign img to div you can set its background image.
$('#' + id).css('background-img', 'url(' + imageUrl + ')'