Responsive CSS3 Modal Gallery (no JavaScript)
This is version 1. Also see all other versions to see how this gallery evolved.
Click on an image below to bring the gallery to life (and resize the browser window for slinky responsiveness)...
Features
A CSS-only, responsive image gallery that;
- Opens an image enlargement in a modal overlay/lightbox (by using the :target selector)
- Has "previous" and "next" controls to cycle through the gallery from within the modal overlay/lightbox
- On a small screen, the "previous" and "next" controls become extra large tappable areas for easy finger jabbing
- Uses CSS3 transitions to animate a gentle fade effect (on thumbs and modal overlay/lightbox)
- Includes optional image captions (inside the modal overlay/lightbox)
Please view the source of this web page to grab the CSS and HTML markup.
Pros
- All gallery images are downloaded during initial page load, so there's no wait for larger images to open.
- You can bookmark or link to a larger image and it will load inside the modal overlay/lightbox (e.g. gallery-modal-rwd.htm#pic-1).
Cons
- Both big and small thumb images are downloaded during initial page load, which will impact upon page speed. To only download big pictures on demand, please see the Responsive CSS3 Modal Gallery (with JavaScript on-demand images).
- Extra markup for the IE7/8 workaround. You can use something like Selectivizr to make older IE recognise the :target selector, but then you're going out of the realm of CSS-only. If you're curious, here is a gallery demo using Selectivizr for IE8 support.
- Use of :target affects the browser history; Each big picture viewed will add something like "#pic-1" at the end of an URL, and will be cycled back through when the browser's back button is clicked.
Compatibility
- IE7+ *
- Chrome
- Safari
- Firefox
- Opera
- Android
- iOS
* The :target selector is not supported in IE7/8 but a bit of markup-mashing with IE conditional comments provides a workaround so those users can open image enlargements in a new browser window instead of the modal overlay/lightbox.
<!--[if gte IE 9]><!--><a href="#pic-1"><!--<![endif]-->
<!--[if lte IE 8]><a href="/path/to/big/image.jpg" target="_blank"><![endif]-->
<img src="/path/to/small/thumb.jpg" width="252" height="160" alt="" />
<span><b>Preview</b></span>
</a>
* IE7/8 users will not see the magnifying glass icon when they hover over a thumbnail. However, there is fallback for a plain "Preview" bar that they will see instead.
I haven't been able to test in other browsers/devices but feedback is always welcome. Contact me if you spot anything hinky.
Acknowledgement
Inspired by the "CSS3 Modal Popups" tutorial at Script Tutorials.
Related
- Version 2: Responsive CSS3 Modal Gallery (with JavaScript on-demand images)
- Version 3: Responsive CSS3 Modal Gallery (with JavaScript on-demand images + keyboard controls)
- Version 4: Responsive CSS3 Modal Gallery (with JavaScript on-demand images, keyboard controls + pagination)
- Version 5: PHP Responsive CSS3 Modal Gallery (with JavaScript on-demand images, keyboard controls + pagination)
Freebies
Looking for more freebies for your website? Grab a bunch of free PHP, CSS and JavaScript goodies, from flat file CMS' to RSS managers to responsive CSS menus, galleries and sliders.