find img attribute and change src value inside divs - javascript

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 + ')'

Related

Use images as background and apply to div parents with the same class

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>

How can I hand over an <image id> for jquery?

When the user clicks on a picture on my site. Now the jQuery should get the id of the clicked image and change the image to another image:
Here's my jquery:
function changeCircle() {
// div "holen" var object =
// var object = document.getElementById("Kuchen");
// var id = obj;
// object.src="img/icon-check.png";
// $("#GarantienFrage1").attr('src', "img/icon-check.png");
$("id").attr('src', "img/icon-check.png");
// $(this.id).attr('src', "img/icon-check.png");
}
Here's my HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Kuchen">
<img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle();" />
</div>
How can I get the image to change when I click on it?
perhaps you need to know who is this
in your case is not being the <img> tag
therefore, I've put a target param to your function
function changeCircle(target) {
console.log('this is: ' + this);
console.log('BEFORE: ' + $(target).attr('src'));
$(target).attr('src', 'img/icon-check.png');
console.log('AFTER: ' + $(target).attr('src'));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="Kuchen">
<img id="GarantienFrage2" class="maus_pointer" alt="AAA" src="img/icon-uncheck.png" style="height: auto; width: auto;" onclick="javascript:changeCircle(this);" />
</div>
Your selector is not targeting the image, its targeting the first <id> element on your DOM.
Change this:
$("id").attr('src', "img/icon-check.png");
to this:
$("img.maus_pointer").attr("src", "img/icon-check.png");
This selects that <img> element who's class is maus_pointer and changed the value of its src attribute.
Also, make sure that your new image source is relatively accessible from the page's location as you're not using an absolute path to target the new image.

How to make change the height of all images inside a div?

How to make change the height of all images inside a div?
I have
$('.images img').each(function() {
$('img').attr('height', element.parent().attr('imgheight'));
});
<div imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
It does not seem to do anything - see https://jsfiddle.net/yu51a5/527gn64n/4/. How to make it work?
I cannot use "height=100%" because normally these images come with captions, so the image should be shorter that the div.
You haven't defined element. Access the node from inside the each function.
$('.images img').each(function(i, node) {
$('img').attr('height', $(node).parent().attr('imgheight'));
});
Working fiddle.
I suggest you to use HTML5 data- attribute with your custom attribute imgheight
<div data-imgheight="300px" class="images">
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg " />
<img src=" http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg " />
</div>
And JS can be as easy as this:
$('.images > img').css('height', $('.images').data('imgheight'));
Check fiddle
But, if you have multiple .images div, you would do like this
$('.images img').each(function() {
$(this).css('height', $(this).closest('.images').data('imgheight'));
});
or better
$('.images').each(function() {
$(this).find('img').css('height', $(this).data('imgheight'));
});
Change element to $(this) and you're good.
https://jsfiddle.net/wh85afq7/
Change the 2 references within the each function to the images to $(this)...
$('.images img').each(function() {
$(this).css('height', $(this).parent().attr('imgheight'));
});
You can use data-height attribute and get value by element.data("height")
here is the working example below
$( document ).ready(function() {
$('.images img').each(function() {
$(this).attr('height',$('.images').data("height"));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div data-height="300px" class="images">
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/goldenhorseman.jpg" />
<img src="http://www.yu51a5.com/wp-content/uploads/2015/01/bronze-horseman.jpg" />
</div>

Adding an image via pure JS

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.

How can I add a link to an image that changes on hover via jQuery?

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);
}
});

Categories