HTML image elements mysteriously disappearing?

[immediate]

Please see here, scroll down to Product Gallery and there should be several large dress images but they are not displaying at all.

When I check the HTML code and they are all there and the images are all correctly showing up if I access them directly in the browser. However, when I use Firebug to examine the <img> elements they seem to be faded out or hidden or something.

I tried to add these CSS styles via Firebug to the <img> elements on .product_images_exhibit img:

display: inline !important;
visibility: visible !important;

But nothing happens. However if you go to the HTTP version (not HTTPS), the images are all displaying properly.

This is really weird to my understanding. What is wrong and what's actually preventing the <img> elements to be rendered?

Maybe Javascript? But I have no idea how to find out which JavaScript line is preventing these elements to be showing. How can I find them?

Any help would be very much appreciated!

 

[seemly]

Without looking at the gallery being used, it seems that there are no width/height values being added to the attributes on the images.

<img src="https://www.princessly.com/media/ca...ace-Blush-Pink-Tulle-Flower-Girl-Dress-31.jpg" width="848" height="1272" alt="" title="">

 

[Kari]

Without looking at the gallery being used, it seems that there are no width/height values being added to the attributes on the images.

<img src="https://www.princessly.com/media/ca...ace-Blush-Pink-Tulle-Flower-Girl-Dress-31.jpg" width="848" height="1272" alt="" title="">

The fact the height & width dimensions are not set isn't an issue as it would display at a 100% width & height if they are left unset

 

[seemly]

The fact the height & width dimensions are not set isn't an issue as it would display at a 100% width & height if they are left unset

Not if height is set to 0, it won't.

Setting the following in the css fixes this instance, but not sure what effects it will have elsewhere on your site:

.product_images_exhibit img {

max-width: 100%;
height: auto;​

}

 

[Kari]

To illustrate my point they can be removed to make the image size responsive, not in typoscript,
but they can be removed to make the image responsive based on their default sizes

http://stackoverflow.com/questions/11014165/remove-attributes-height-and-width-of-the-image-tag

 

[seemly]

As a front-end developer by trade, I realise that.

But I am assuming that a plugin is being used to render the image gallery and that the image dimensions are not being defined manually, so removing the attributes completely has the following issues;

1. Not possible without editing the script(s) - does the OP have knowledge/skill-set to do this?
2. Removing the attributes as you suggest actually makes the image overflow it's parent container = undesired effect, I would imagine.

Without access to the script(s) that generate the output, my CSS suggestion is a partial "fix" that at least displays output as expected, giving the OP time to investigate the script(s) in question, No?

 

[Kari]

thats true
however for some reason I didn't see your CSS suggestion

 

[spiderspider]

As it works on http:// and not https:// then is not something to do with how its being called?

You used to get a warning in old browser versions that said something like 'this page has secure and non secure elements, do you wish to display the non secure elements?'

So, are you images for the bottom of the page, in the secure (https) area?

 

[seemly]

That was my initial thought, SpiderSpider, but having investigated a little further, the images are being loaded fine, but they are not actually "displayed" because of the height attribute value being 0.