Web Developer Reading List: Image Galleries

Teaching digital media classes with an emphasis on graduate portfolios, I have a great many students interested in creating image galleries for their final sites; as a result, I’ve designed and coded many different image gallery concepts on this blog. This reading list pulls them all together, using the same structure as other articles in this series.

Prerequisites: HTML & CSS. Some galleries also use JavaScript and/or PHP.

Total time: 12 hours

Captions

Image captions animated with filters and transforms

1. HTML5 Transitioned Image Captions
2. Captioned Domino Image
3. Animated Inset Caption with Filter
4. Sliding Door Reveal
5. Filtered Caption with Dynamic Clip

---

On-hover Galleries

Image galleries with large image revealed on hover/touch for their associated thumbnails. Generally speaking, the simplest kind of gallery to make.

1. Simple CSS Rollover Gallery
2. Cross-fade and Slide
3. Card Fan Gallery
4. Hover Effect from Different Directions
5. object-fit Gallery

On-click Galleries

Image galleries with the large image activated on a click or touch on the thumbnail; also features galleries with preset and “persistent” images.

1. Animated Gallery w/ Persistent Images
2. Alternative Persistent Image Gallery
3. Simple PHP Image Gallery
4. Accessible Image Gallery
5. Quad-Image Gallery

---

Flexbox Galleries

Galleries that use flexbox for display; also see filtered, random and columnar galleries.

1. Better Responsive Galleries with Flexbox
2. Modern Masonry with Flexbox & JS

Lightboxes

Galleries where the full-size image completely dominates the browser window.

1. Lightbox in Pure CSS
2. Lightbox in 12 Lines of JS

---

Sliders & Carousels

1. Animated Image Slider
2. Responsive Slider
3. Responsive Slider With Captions
4. CSSslidy: Auto-Generated Responsive Image Slider
5. CSSslidy 2.0

---

3D Image Galleries & Effects

1. Origami: CSS3D Foldout Image Gallery
2. ImgDex: Rolodex-Style 3D Image Gallery
3. Simple CSS 3D Carousel Gallery
4. Advanced CSS 3D Carousel
5. Image Flip Gallery With Dynamic Shadows

---

Filtered Galleries

Layouts with UI to filter and sort images.

1. Auto-Filter Image Gallery
2. Visual Database Gallery
3. Sorting Images with JS
4. Filtered Flexbox

---

Image Comparators

Techniques for creating easy “before and after” image comparison on web pages to display PhotoShop retouching, sketch to finished product, etc.

1. “Before And After” Image Comparison
2. Mobile-Ready Before-and-After

---

Columnar Layout

Techniques to display images in columns

1. Pinterest-Style Layout in Pure CSS
2. Easy Masonry Layout with Flexbox
3. Easy Responsive Grid With Flexbox

Randomized Images

Images that appear in random order on each page load.

1. Random Images w/ Flexbox & JS
2. Random Images w/ PHP

Ken Burns Effects

Full-screen (or full-element) effects that introduce images with a familiar zoom, pan and fade.

1. Random Ken Burns Effect
2. BurnsBox

Sequential Faders

Techniques for making images appear one after another on a page.

1. Sequential Fade-In With JQuery & CSS
2. Sequential Image Fade-In with JS & CSS

---

Caption Creation

Auto-generating image captions using JavaScript & PHP.

1. Auto-Caption Using Filenames
2. Auto-Caption Using GET
3. Auto-Generated Captions with JS