Three quick steps will get you up and running a CSS gallery in quick order.
- Include linking to the gallery.css and gallery.theme.css
- Then add the markup to your gallery with class and id calls.
- If you want to add autoplay, then include the autoplay class class="gallery autoplay items-3".
I ran both examples demonstrations in Chrome and IE8 and the IE8 example did not show the controls in the IE8 browser, but did display in Chrome, so there appears to be an issue that persists with control operator properties in IE.
If you want to learn more on how the CSS Gallery works, you can buy Ben's 40-minute screencast for $12 to view his advanced techniques including layout and setup, CSS transitions, CSS selectors, vendor prefixing, advanced use of SASS and SCSS, and CSS animation.The W3Schools CSS Image Gallery shown in Figure D uses a simple set of image div containers with inline display, margins, borders, auto height and width, and float left properties.
Figure Ddemo displayed in Figure E, the simple and clean code is actually responsive as well, as the images continue to float left as the screen size transitions to a smaller dimension. I've tested the code for the W3Schools CSS Image Gallery in IE8 and Chrome with successful results.
Figure EDynamic Drive CSS Image Gallery is another quite simply written example of CSS code that displays larger versions of gallery thumbnail images dynamically with mouse hovers, shown in Figure G below. HTML captions can be added to the enlarged image, and every aspect of the Image Gallery exists as plain HTML on the page. I've tested the code examples in IE8 and Chrome and the hover functionality works as expected. According to the documentation with the gallery, it works in IE6+, Firefox, and Opera 8+.
Another feature explained in the demo for the dynamic drive gallery is that it utilizes CSS's ":hover" pseudo class to cause an element to react with onMouseover events, and when that happens, an absolutely positioned container holding the enlarged image is anchored on the page by another container with a position set to relative.
The final example is the CodePen CSS Gallery, which is another simple example of pure CSS code that displays thumbnails of the images below the expanded current image. A mouse click is required to view the expanded images included within the gallery. I tested the demo code in Chrome with good results; however IE8 failed to perform the mouse-click function. Another example demo of the same style using CSS transitions is also available.
Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal government.