My blog posts live in a container that's 600px wide. When I have an image that's wider than 600px, I resize it via CSS (.post img {max-width: 600px}
)
I'd like users to be able to click on these re开发者_运维知识库sized images and see the full size version in a lightbox, but to do this I need to detect in Javascript which images have been thus resized (since I don't want to lightbox images that appear full size inline in the post)
You can check the image element's width
property to get the rendered width of the image. If it's 600
, the image is most likely to be shrinked. However, the image might originally as well be exactly 600 pixels wide.
If a browser supports the new HTML 5 naturalWidth
property, you can get the original image width (in pixels) and compare that with the value of clientWidth
.
I don't believe you can in the sense you are speaking as JS is going to read the image it is in the DOM. However what if you set the max-width
in the JS:
Just Psuedocode
onload
{
if (img.width > 600px)
{
img.style = max-width: 600px;
img.lightbox();
}
}
精彩评论