0

I have an image slideshow that uses JavaScript to apply a class called .hide to all images but the first on page load. This hides all of the images but the first.

I noticed in Internet Explorer 8 (which I have to support) that when the slideshow is loaded, the first image displays correctly (because it's not hidden) but when I click "Next" and the hidden image is revealed, that image has zero dimensions.

After researching online, I saw that for IE 8, elements with display: none will not have any dimensions.

My JavaScript waits for the window and images to load before running, which I thought would allow the images to have a dimension in IE 8 before they were hidden:

window.onload = function() {
  // Hide all but first photo
  hidePhotos();
  addControls();
  progressSlides();
};

I read that visibility: hidden or opacity: 0 could be used instead. However, this leaves a lot of white space below the slideshow where the images are hidden.

HTML:

<div class="slideshow">
                <figure class="image">
                    <img src="https://c1.staticflickr.com/9/8584/16136057529_e7b64928d0_z.jpg"  />
                    <figcaption>This is an example of a really long caption. Here I go. Do I wrap to a second line? Wrap wrap wrap wrap. Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap Wrap</figcaption>
                </figure>
                <figure class="image">
                    <img src="https://c4.staticflickr.com/8/7495/16322256485_08ee0ee36f_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>
                <figure class="image">
                    <img src="https://c2.staticflickr.com/8/7474/16120961661_8dc12962dd_z.jpg" />
                    <figcaption>Insert caption</figcaption>
                </figure>

CSS:

.slideshow {
  position:relative;
/* To position slideshow buttons */
  max-width:920px
}


.hide {
  display: none;
}

.slideshow img {
  width:100%;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
  margin-top: 1em;
}

JS Fiddle: http://jsfiddle.net/amykirst/tnLLhu4j/

I tried to use absolute positioning to position the images at the top of the containing .slideshow div, but this caused two problems:

It gave .slideshow a height and width of 0 because its children were all absolutely positioned. The lack of dimensions allowed the slides to go beyond the layout, instead of being contained by .slideshow.

Any text on the page was obscured, so if there was text above or below the slideshow, the slideshow would appear on top of it.

Also, with absolute positioning, I couldn't set the slideshow container (.slideshow) to have a max-width of 100% to contain the images and make them responsive, because the slides were removed from the flow.

How can I hide the images on page load and have them retain their dimensions in IE 8 without leaving a bunch of white space below the slideshow, as opacity: 0 or visibility: hidden would do?

amylynn83
  • 187
  • 3
  • 19
  • I tried setting the .hide class to visibility:hidden and positioned the image absolutely at the top of the slideshow. It's still doing the same thing, where the hidden images don't have dimensions. – amylynn83 Jul 10 '15 at 11:24

1 Answers1

1

I found a solution that worked. 

.hide {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

I needed the hidden image to span the entire width of the slideshow (otherwise, when the hidden class was removed, IE 8 gave the image zero dimensions), so I used left and right positioning of 0.

Because absolute positioning was only used for elements that were hidden, it didn't cause problems with the layout that I mentioned earlier because only the hidden elements were affected.

amylynn83
  • 187
  • 3
  • 19