We Keep Coding

When to retrieve height for element with image in it?

In my web app, I want to display popup element which has <img> element in it. Image source is usually bigger than I need it, so it get's resized in css. And before I display it, I need to know it's outerHeight.
The popup looks something like this:
<div class="popupContainer">
<div class="popupHeader">Header</div>
<img class="popupImage" src="source" />
<div class="popupMessage">message</div>
</div>
After I append it to another element, I'v tried retrieving it's height in two ways: simply popup.outerHeight(true) and using imagesLoaded library:
imagesLoaded(popup, function () {
popup.outerHeight(true)
})
In most caes, both options return the same and expected result (like how tall the element actually is in browser). But there are times when option #1 returns height that is too small, because the image source hasn't been loaded yet, whereas option #2 returns height that is way too big, because the css hasn't been applied yet. (I think that those are the reasons). So I wanted to know, which is the best time to retrieve it's height? When the image will be loaded and element will be formatted correctly accoring to css.

You should do when the image will be loaded.

why image display below when click on image in Jquery?

can you please tell me why my image display below when I click the thumb nail image.I am using lightbox plugin I study doc from here
https://github.com/lokesh/lightbox2/
In example it show image above the image..which css file I am missing ?
fiddle
http://jsfiddle.net/xnhtg1t1/
<a class="example-image-link lightbox" href="https://dl.dropboxusercontent.com/s/51wtwmqnnokotj6/image-1.jpg?dl=0" data-lightbox="example-1"><img class="example-image" src="https://dl.dropboxusercontent.com/s/w85pcbopymjzn76/thumb-1.jpg?dl=0" alt="image-1" /></a>

Remove the GET variable ?dl=0 from your JS and CSS urls and it works. jsFiddle Demo
That is Dropbox's download parameter, while although it is set to false.. it is still causing the issue.

Make position of the Lightbox absolute instead of relative.
.lightbox {
position: absolute;
}
Or even FIXED. And then it will appear on top of the page. Then you can construct the lightbox styles however you like.
http://jsfiddle.net/xnhtg1t1/2/

Using JavaScript and CSS to create hovers and onclicks

I have 4 thumbnail images on the bottom of my page with a main, large image above it. I want to be able to click the thumbnail and have it load into the big image. Additionally, I want to be able to hover over the thumbnail and have a black border appear around it.
I have 40 pages that have the exact same setup (4 thumbs, 1 main image) but all different images (products). The thumbs are all in class="bottom-pic".
It seems easy enough, but perhaps I'm wrong. I'm thinking CSS for the hover, JS for the clicking? I'm VERY new to JS.
Here is the source code:
<a href=""img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo" >
<img src="images-large/cobra-dark-wood.jpg" alt="" name="photo-bottom-one" class="bottom-pic" id="photo-bottom-one">
<img src="images-large/cobra-dark-wood-one.jpg" alt="" id="photo-bottom-two" class="bottom-pic">
<img src="images-large/cobra-black.jpg" alt="" id="photo-bottom-three" class="bottom-pic">
<img src="images-large/cobra-black-one.jpg" alt="" name="photo-bottom-four" class="bottom-pic" id="photo-bottom-four">

Based on your code, and not requiring anchor tags etc, here is the JavaScript you could use.
NB: This examples assumes you are using jQuery
$(document).ready(function() {
$('.bottom-pic').on('click', function(){
$('.bottom-pic').removeClass("active"); //Removes class from all items
$(this).addClass("active"); //Adds class only to the currently clicked on item
$('#main-photo').attr('src', $(this).attr('src')); //Changes the source of the image tag
});
});
To see a working demo, I created this fiddle for you.
http://jsfiddle.net/2ZgjR/
Please note that the images don't match up because they are being dynamically loaded from a server, but the effect is exactly what you're asking for, just use this code with your images!
I also added an "active" style if you want the border to stay on the item you've clicked on. Simply add some CSS to the style .active { }
Hope this helps

Yes, I would use CSS for the border on hover. You may have to use box-sizing: border-box to make sure things don't jump around a bunch.
First, your main image should be something like this:
<a href="whatever_link">
<img src="images-large/cobra-dark-wood.jpg" alt="" id="main-photo">
</a>
Since you're using jQuery, it would be easy enough to get the switch out the source of the main image on click. Something like this:
$('.bottom-pic').on('click', function(){
var imgSrc = $(this).attr('src');
$('#main-photo').attr('src', imgSrc);
});
That's just off the top of my head. I haven't tested it.

jQuery image width not working

I am trying to get image width of image with class product-thumbnail. There are several images with this width but all of them have the same width. So this is my javascript:
$(document).ready(function() {
alert($('img').('.product-thumbnail').width());
});
and these are image tags
<img src="img/produkt1.png" title="Názov produktu" class="product-thumbnail">
<img src="img/produkt2.png" title="Názov produktu" class="product-thumbnail">
however it doesnt work and I am not getting any alerts. There should be no problem with the selectors (jquery is included) and I want to use this so I can set div width acording to image width but the image width changes with browser windows width. Do you know a solution for this? Maybe I have only som syntax error there.

alert($('img').('.product-thumbnail').width());
That is invalid jquery, the selector should all be inside the $(''), like a CSS selector, so it should be
alert($('img.product-thumbnail').width());
You also need to pick which image to get the width of, for the first one, you would do:
alert($('img.product-thumbnail')[0].width());

You should be doing:
alert($('img.product-thumbnail').width());
But even so, it's problematic since you will get an array back. In any case, the syntax you are using is wrong.

How to hide img elements that do not have src attribute, until the attribute is added?

My JS code includes some images that are empty at the beginning
(without src attribute specified at all + display:none).
When added to sites with CSS1 compatibility I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Any idea how I can hide the broken image icons?
Notes:
I don't want to load empty images.
I tried width and height= 1px or 0px . didn't work.
specifying src="" also gives empty image icons.
Edit:
I found the solution:
add style="display:none" to the img definition (Not in CSS)

Have you tried wrapping the images inside a div and hiding the div instead?

My JS code includes some images that are empty at the beginning (without src attribute specified
That's not a valid state for an image. Best use a placeholder transparent image or leave the image out of the DOM until you can set a ‘real’ src attribute.
I see broken image icon where the image should be even though the images are supposed not to be displayed (display:none).
Doesn't happen for me, either ‘display: none’ or ‘visibility: hidden’ removes the visible image from the page. Example code demonstrating the problem, and which browser(s)?

The solution is quite simple:
add style="display:none" to the img definition (Not in CSS)

how about just having a placeholder div tag and replacing it with an image when the time comes to show the image? any decent ajax framework (e.g. jQuery) will make this easy to do so it works across all major browsers

in addition to display:none, maybe try setting visibility:hidden

If you are using a JavaScript library it may be worth applying a class to name to all of these images and letting the library handle it. Prototype example using a class name of myImages would be
var images = $$('.myImages');
if (image != null)
{
for (int i = 0; i < images.Length; i++)
{
images[i].hide;
}
}
You would still need to add the style attribute style="display: none;" to the images