Develop Reference

how to get the height and width of image in javascript?

I have a code where I am trying to get all images tag height and width.
var img = $('.data').find('img');
$.each($(img), function() {
console.log('first', this.height, $(this).height, $(this).height());
console.log('second', $(this).clientHeight, $(this).naturalHeight);
console.log('third', $(this)[0].height, $(this)[0].clientHeight, $(this)[0].naturalHeight);
console.log($(this).attr('height'), $(this).prop('height')); });
Even i tried for img in loop.
tried the same with width , the result will be either 0 or undefined.
tried same thing for width.
Can you tell me where I am doing wrong

You are passing $(img) this should be only img inside you $.each.Also you where printing console.log('first',.. instead of this if your image has name attribute use that .
Here is demo code :
var img = $('.data').find('img');
$.each(img, function() {
console.log($(this).attr("name") + "-> Height: " + $(this)[0].height + " Width:" + $(this)[0].width);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="data">
<img name="image1" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain#2x.jpg" style="height:70px;width:70px">
<img name="image2" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain#2x.jpg" style="height:40px;width:40px">
<img name="image3" src=" https://twimg0-a.akamaihd.net/a/1350072692/t1/img/front_page/jp-mountain#2x.jpg" style="height:50px;width:50px">
</div>

i was not getting the height and width of an image because the image load event happens very late in the load process
Finally I found an answer
var img = $('.data').find('img');
$.each(img, function() {
$(this).bind('load', function() {
console.log($(this).height);
}
});
it worked for both img and $(img)

Smooth Sliding background image

I am having a PhP page where i would like to set the background image as follows.
body id="indexbody" background="<?php echo base_url(); ?>images/Images03.png"
style="background-repeat:no-repeat;background-size:cover;position: relative;
background-size:100% 100vh;"
Now, this shows the background image well. I want the background image to smoothly keep fading in and out one after the other.
<script>
window.onload = function() {
var images = [
"http://images/Images01.png",
"http://images/Images02.png",
"http://images/Images03.png"
]
var imageHead = document.getElementById("indexbody");
var i = 0;
$('#indexbody').fadeTo('slow', 0.3, function()
{
$(this).css('background-image', 'url(' + images[i] + ')');
i = i + 1;
if (i == images.length) {
i = 0;
}
}).delay(1000).fadeTo('slow', 1);
</script>
This is not working. Can anyone suggest how to accomplish this. Either fadein fadeout or left to right sliding

mind using plugin?
this plugin worked for me

Change background url of div via HTML tag

I have a div (CSS - height: 250px, width: 70%) and I have set a background via CSS. I want to change the background onhover.
That's simple, I know. But I want to get sources of backgrounds from the HTML tag.
Ex.:
<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>
Can anyone help me please?

If you're not using jQuery you can achieve the desired effect using basic Event Listeners. https://jsfiddle.net/gnu9utos/3/
// first get the element that we'll be interacting with
var element = document.querySelector('.somediv');
// assuming we managed to successfully get the element from the document
if(element) {
var before = element.getAttribute('data-imgbefore');
var after = element.getAttribute('data-imgafter');
if(before && after) {
element.style.background = 'url(' + before + ')'; // set the initital state
element.addEventListener('mouseover', function(event) {
element.style.background = 'url(' + after + ')';
});
element.addEventListener('mouseout', function(event) {
element.style.background = 'url(' + before + ')';
});
}
}
You might want to add a check for mouseleave to revert the image back to it's original state and add a little bit of css.
I hope this was helpful.

you can do this with this simple JQ
maybe it's not the best solution but it works.i added background-color so you can see the change. but you can remove that and leave only background-image
see here
jsfiddle
made 2 variables and assigned them to each image ( before and after img ) to each div with class .somediv
add an initial background-image to the div
then at hover, the background-image of the div changes between imgbefore and imgafter
jq :
$(".somediv").each(function(){
var imgbef = $(this).data("imgbefore"),
imgaft = $(this).data("imgafter")
$(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});
$(this).hover(function(){
$(this).css({'background-image': 'url(' + imgaft + ') ','background-color':'blue'});
}, function(){
$(this).css({'background-image': 'url(' + imgbef + ')','background-color':'red'});
});
});
HTML :
<div class="somediv" data-imgbefore="img1.png" data-imgafter="img2.png"></div>
CSS :
.somediv {
height:250px;
width:70%;
}
let me know if it helps

You can easily achieve that with javascript. You can also add an onmouseleave function, but this time, passing this.dataset.imgbefore as second argument.
changebg = function(el, i) {
var t = "url("+i+")";
el.style.backgroundImage = t;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="somediv" id="mydiv" data-imgbefore="http://lorempixel.com/400/200/sports" data-imgafter="http://lorempixel.com/400/200/animals" onmouseover="changebg(this, this.dataset.imgafter)">Lorem</div>
</body>
</html>

You can add all the div that you like and change only the data-imgbefore and data-imgafter !!!
$(document).ready(function(){
$('.somediv').each(function( index, value ) {
var img = $(this).attr('data-imgbefore');
$('.somediv').css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
});
//$('.somedive').css({'background-image':'url("http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png")', 'background-size':'200px 200px'});
$('.somediv').hover(
function () {
var img = $(this).attr('data-imgafter');
$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
},
function () {
var img = $(this).attr('data-imgbefore');
$(this).css({'background-image':'url('+ img +')', 'background-size':'200px 200px'});
}
);
});
.somediv {width:200px;height:200px;border:1px solid #F2F2F2;border-radius:4px;display:block;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>
<div class="somediv" data-imgbefore="http://www.palladio-tv.it/Internet/siti_gec/2B/Manzan_Disney/codice/Pippo.png" data-imgafter="http://www.filastrocche.it/contenuti/wp-content/uploads/2001/04/pippogoofy_352.jpg"></div>
Cheers!!!

Not sure if I understand what you are trying to accomplish. Why don't you abandon the HTML tag requirement and just try css :hover?
#somediv {
background: url(...);
}
#somediv:hover {
background: url(...); /* different url */
}
http://www.w3schools.com/cssref/css3_pr_background.asp

Assign an image as a css background image

I'm working on a responsive slider, it's not that easy. Basically it must works from 320px to 1920px, with a fixed height.
So its giving me a headache, I have an easy fix : instead of using the a > image, I will assign the image url as background image for the a, then set the image opacity to 0. So, I will be able to use the cover+center background properties and my slider will be perfect.
But I have problems doing that because I'm unsure how to do it, I spent time yesterday but couldn't assign the image as background.
Here is what the markup looks like (I removed unecessary blocks, just keeping the most importants)
<div class="slide-image">
<a href="xyz.com">
<img src="image.com/img.jpg">
</a>
</div>
<div class="slide-image">
<a href="zxy.com">
<img src="image.com/img2.jpg">
</a>
</div>
etc ..
I tried that code which doesnt work, the variable gets a value but nothing is assigned :
$(function() {
if ($('.slider').length) {
$('.slider').slick({});
$('.slide-image').each(function() {
var img = $('img', this).attr('src');
$('a', this).css('background-image', 'url(' + img + ')url');
};
}
});

You're trying to read "src" attribute, but you've set "url" in your HTML. Change your JS:
var img = $('img', this).attr('url');
Also you're assigning wrong style. It should be:
$('a', this).css('background-image', 'url(' + img + ')');

Note you have an error in this line:
$('a', this).css('background-image', 'url(' + img + ')url');
------------------------------^
It must be
$('a', this).css('background-image', 'url(' + img + ')');
And <img> tag is bad,
<img url=""> BAD
<img src=""> GOOD

Displaying A Remote Image Over Screen

I have a simple 16x16 grid of thumbnail images and when one is clicked, I want to display the full sized one with the background dimmed and the image in a div appearing to float above the dimmed background.
I don't want to prepopulate a list of the full-sized
$('#photo-grid').on('click', 'a', function(event) {
$.getJSON($(this).attr('href'), function(data) { // Gets the URL of full-sized image
$('.page-cover').css('opacity', 0.6).fadeIn(300); // Makes background appear to fade
$('#lightbox-img').attr('src', data.url); // Sets image src in hidden DIV
$('#lightbox-img').one('load', function() {
var lbi;
lbi = $('#lightbox-img');
console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0
console.log("lbi: " + (lbi.width()) + " x " + (lbi.height())); // always 0
$('.image-display').css('width', parseInt(lbi.css('width')).toString() + "4px")
.css('padding-left', '2px');
$('.image-display').css('height', parseInt(lbi.css('height')).toString() + "4px")
.css('padding-top', '2px');
return $('.image-display').css('opacity', 1.0).fadeIn(300);
});
return $('#lightbox-img').each(function() {
console.log("triggering for cached image " + this.complete);
if (this.complete) {
return $(this).load();
}
});
});
return false;
});
So here is where I'm failing to understand things. At the point where I do lbi = $('#lightbox-img'); I know that the image has loaded either from the server or the local cache. However, neither the query width() and height() functions, nor the CSS ever show any width or height for the image. I've stepped through this in the Chrome and Safari debuggers and can't see that these attributes are actually set when the image is loaded.
I know there are tons of modal lightbox plugins but this is such a simple piece of code it seems like overkill to use one. I have exactly one image to display per click and I can do all the layout stuff in a few lines of code.
What am I missing here?

You're doing some thing where I'm not quite sure why. For example, .css('width', parseInt(lbi.css('width')).toString() + "4px") basically multiplies the width by ten then adds 4.
However, when I throw your code in a fiddle, http://jsfiddle.net/X9GWp/ , I don't get the issue you report, so I can't say much about why it doesn't work for you. I've had to make some guesses about the css, html and data, so that might be why it's different. If you provide your own fiddle I could have a look.
Anyway, here is a very basic lightbox loosely based on your codesnippet, but without getting the image-url from a JSON request.
javascript:
/* when lightbox is clicked, fade out */
$('.page-cover').on('click', function(){
$(this).fadeOut(400);
$('#lightbox-img').hide();
});
/* when image is loaded, fade in */
$('#lightbox-img').load(function(){
$(this)
.css('top', ($(window).height()-$(this).height())/2)
.fadeIn(300);
});
/* when thumbnail is clicked, load href as image source and fadein lightbox-background*/
$('#photo-grid').on('click', 'a', function(event) {
event.preventDefault();
$('#lightbox-img').attr('src', $(this).attr('href'));
$('.page-cover').fadeIn(300);
});
css:
.page-cover {
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
background:rgba(0,0,0,0.6);
display:none;
}
#lightbox-img
{
position:relative;
display:block;
margin:auto;
}
html:
<div id="photo-grid">
<img src="http://lorempixel.com/40/40/nature/1" />
</div>
<div class="page-cover"><img id="lightbox-img" /></div>
http://jsfiddle.net/xLQpZ/