Lightbox without jQuery or Javascript
I was working with a clients webpage and needed to create a lightbox-similar function and would like to do that without using any jQuery or Javascript. This is the result after about an hour of fiddeling.
The effect is achieved by setting tabindex=”1″ on the wrap-2 div, which means it can be targeted by css:focus. When the div is focused it changes the appearence of the image inside of itself. Clicking anywhere else on the page removes the focus from the div and hence everything returns to normal.
Pros
- No JS (!)
- Works in IE9 (!) and almost in IE8
- Did i mention no JS?
Cons
- No gallery navigation with arrows (it can be done tho, i just can’t be arsed). Tabbing works tho.
- Large thumbnails (the thumbnails need to be the full image, which is loaded when the page loads and not when requested by the browser)
This was mainly used as a test to see if it could be done, i wouldn’t recommend using this (at least not this version of it) in production.
Code below:
[codepen_embed height=”600″ theme_id=”0″ slug_hash=”mPvQZW” default_tab=”html” user=”emillinden”]See the Pen <a href=’https://codepen.io/emillinden/pen/mPvQZW/’>mPvQZW</a> by Emil (<a href=’http://codepen.io/emillinden’>@emillinden</a>) on <a href=’http://codepen.io’>CodePen</a>.[/codepen_embed]