|Sylvia 1406d757d4 Bootstrap compatibility fixes||5 years ago|
|LICENSE||6 years ago|
|README.md||6 years ago|
|cssbox.css||5 years ago|
A simple, pure-CSS Lightbox replacement.
An example page is available in the gh-pages branch, or online on GitHub Pages.
Upload cssbox.css to your server and add a stylesheet link to it in your CSS.
Add your images like this:
<div class="cssbox"> <a id="image2" href="#image2"><img class="cssbox_thumb" src="image_thumb.jpeg" /> <span class="cssbox_full"><img src="image_full.jpeg" /></span> </a> <a class="cssbox_close" href="#void"></a> <a class="cssbox_prev" href="#image1"><</a> <a class="cssbox_next" href="#image3">></a> </div>
In the example above, you add an image with id image2 (make sure that appears consistently in the a tag), with a close button, a previous button which switches to image1 and a next button which switches to image3.
If you do not need the previous and next buttons, just leave the a elements out. If you NEVER need gallery functionality, you may want to look in the v1 branch, which contains a smaller version without gallery functionality.
When a visitor clicks the tumbnail, the fullsize preview will appear in the center of the screen and they can navigate through images.
Note: We use #void in the HTML to not jump to the top of the page when closing the gallery. This is a hack, but should work as long as you don't have any div with ID void on your page. If you do, choose another name.
Creative Commons Attribution-ShareAlike 4.0
Credits do not need to be on your website, just leave them in the CSS.