Prevent hidden image from affecting layout of page

[sehsarah]

Fade invisible element to display: none

Fade invisible element to display: none by using fadeOut rather than fadeTo (which currently leaves the hidden opacity 0 elements on page so can mouseover them etc)

From the docs http://api.jquery.com/fadeout/

The .fadeOut() method animates the opacity of the matched elements. Once the opacity reaches 0, the display style property is set to none, so the element no longer affects the layout of the page.

No other functionality changes except for opacity: 0 elements are also display: none with this change

---

My issue without this patch

• mouseover small image shows + icon (can zoom)
• mouse outside small image doesn't show + icon (can't zoom) 👍
• click on small image to "zoom in"
• large/zoomed image shows magnified larger than small image container, mousing around moves zoomed image 👍
• click to "zoom out" back to small image visible & large image hidden
• mousing over small image shows + icon (can zoom)
• mouse outside small image shows + icon (can zoom) = BUG 👎
  • This BUG is because large hidden image is not display: none, it is just opacity: 0 and still present in the layout

Therefore this patch fixes my issue

---

Hope this helps someone :)

[sehsarah]

Note, realised this patch needs to be extended to ensure display: none on load too.

For now (in a rush) I've used this patch + the callback config as:

callback: function () {
    $(this).css('display', 'none');
}

Will come back to this. Still mergeable tho IMO