please tell me how to get image size of all images in the page using jquery or javascript
The only size you can get is the visible size. clientWidth and clientHeight are two DOM properties which do this. Example:
var image = document.getElementById("id");
var width = image.clientWidth;
var height = image.clientHeight;
If you're using jQuery, you can simply use $.width and $.height:
var width = $("id").width();
var height = $("id").height();
So, to get the size of all images, loop them through:
$("img").each(function()
{
console.log(this.width());
console.log(this.height());
});
If you need the real size, please see this question Get the real width and height of an image with JavaScript? (in Safari/Chrome)
$('img').each(function() {
$(this).width(); // current image's width
$(this).height(); // current image's height
});
please tell me how to get image size
of all images in the page using jquery
or javascript
You can use width() and height() method of jQuery:
$('img').each(function(){
alert('width=' + $(this).width() + '\nHeight=' + $(this).height());
});
More Info:
http://api.jquery.com/width/
http://api.jquery.com/height/
Related
I need to get Image height and width before loading the Image itself. So I am using jquery .load() method.
$('<img />').attr('src',someURL).load(function(){
console.log(this.width);
console.log(this.height);
})
But problem is that I need the height according to the fix width. Suppose Image is of size 400*417, I need the height according to 200 not 400. For that I add
$('<img />').attr({
'src':someURL,
'width':200}).load(function(){
//Get height and width
})
But Above code is again giving me height 417 not according to width of 200. I am looking for js/jquery/angualrjs. Please help.
Thanks In Advance :)
A bit of math will do the trick. Once you get the actual image dimensions, apply your ratio to get the height you want.
For instance :
$('<img />').attr('src',someURL).load(function(){
console.log(this.width); // prints out 400
console.log(this.height); // prints out 417
var widthIWant = 200;
var heightIWant = this.height * widthIWant / this.width; // Gives you 208.5
})
I have this image : <img style="border-bottom-right-radius:0px;" id="cover_image" src="Daft+Punk+Tron+Legacy.jpg" alt="cover" width="851" /> , I have set the width of the image and the photo automatically keeps aspect ratio and resize both width to 851 and height to a certain value, I want to grab the height value with Javascript but it's not working
So far I have tried this:
$(document).ready(function() {
alert($("#cover_image").height());
});
When I try
$(document).ready(function() {
alert($("#cover_image").width());
});
it works and it shows 851 which is the correct value of the width, but when I use height is returns 0.. can you point me in the right direction please ?
Use onload event of the image:
$("#cover_image").on('load',function(){
if(this.complete) alert($(this).height());
});
clientWidth and clientHeight are DOM properties that show the current in-browser size of the inner dimensions of a DOM element (excluding margin and border). So in the case of an IMG element, this will get the actual dimensions of the visible image.
var img = document.getElementById('imageid');
//or however you get a handle to the IMG
var width = img.clientWidth;
var height = img.clientHeight;
Thanks
AB
I want to get the height and width of an image that does not have its width and height tag specified in the HTML source.
ie
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
What I want to do is get the image's width and the height before it loads up. I am trying to achieve the following task, if you know a better solution please suggest me.
I want to do this because I would like to keep all of the images in my site to less than or equal to 600px. So if an image's width > 600px, I reduce it to 600px. Or else I leave its width unchanged.
My tryouts: None of the codes below work for this task, as they get the image's size once the image is loaded; initially they display zero for width.
<script type="text/javascript">
var img = document.getElementById('my_img');
var width = img.clientWidth;
var height = img.clientHeight;
alert('Width: ' + width + ' Height:' + height); // FAIL
var timg = document.getElementById('test').width;
alert(timg); // FAIL too
</script>
My HTML code:
<img src="http://www.mysite.com/imge.jpg" id="my_img" />
Hope this is clear.
Thank you.
jsFiddle
Why use JavaScript? With this CSS rule you can limit the width to 600px:
#my_img { max-width:600px; }
How to get them by using JS and jQuery?
I know $(window).innerWidth() can get. But I don't hope it contains the width or height of the scroll bar.
Thank you!
From the jQuery website:
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
If you add overflow:hidden to the body of this page (so there's no scrollbar), then run $(window).width() in a JS console, notice this value increases!
i Have found the best way is with Javascript.
<script type="text/javascript">
var height = document.body.offsetHeight;
var width = document.body.offsetWidth;
//code goes here
</script>
Bear in mind that when you use these, they return an integer so if you are going to use them to apply a style to another object or element then you will have to append them as so:
var newHeight=height + 'px';
var newWidth=width + 'px';
I have an image in a page that I am trying to get the width of.
<img class="zoomerIcon" src="zoomer.png" />
So I'm trying to get the width like this.
var imageWidth = $('.zoomerIcon').width();
However the value is 0 unless I set the width property in the tag.
Does width() only return a width greater than 0 if it's manually set in the property? You can see the whole script here.
http://www.wantedcreative.com/development/zoomer/index.html
Thanks
Update
Sorry, I should have looked at your source first. Here is how you need to change your code. The important thing to realize, is you can't get the width until the image has fully loaded. That is why I use a load event callback to retrieve the widths:
// Create the img element, add a load handler, then append it to the body
var $img = $('<img class="zoomIcon" alt="zoom icon" />').load(function(e){
// get icon image properties for use with animation
var imageWidth = $(this).width();
var imageHeight = $(this).height();
// ... any code that uses these variables needs to go in here ...
}).attr('src', zoomImage).appendTo( document.body );
Original Answer: This is general information.
You are probably putting this code in document.ready which will try to retrieve the width before the image has loaded. Try this instead:
$(window).load(function(){
var imageWidth = $(".zoomer").width();
alert( imageWidth ); // Should be correct
});