Download
User Rating: 0/5 ( 0 votes)
CSS3 Lightbox Image Gallery is a fancy Lightbox that is to have some thumbnails that are clickable, and once clicked, the respective large image is shown, and all this is by just using CSS3.
Source: bestofjqueryplugins.com
1. INCLUDE CSS FILES
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/lightbox.css" />
2. HTML
<body id="page">
...
<ul class="lb-album">
<li>
<a href="#image-1">
<img src="img/lightbox/thumbs/1.jpg" alt="image01">
<span>Pointe</span>
</a>
<div class="lb-overlay" id="image-1">
<a href="#page" class="lb-close">x Close</a>
<img src="img/lightbox/full/1.jpg" alt="image01" />
<div>
<h3>pointe <span>/point/</span></h3>
<p>Dance performed on the tips of the toes</p>
<a href="#image-10" class="lb-prev">Prev</a>
<a href="#image-2" class="lb-next">Next</a>
</div>
</div>
</li>
<li>
...
</li>
...
</ul>
...
</body>
In the markup, give the body the ID page, and create a ul list with the class lb-album, inside it, we're gonna create the thumbnails, the overlays, the images and the descriptions as a block of li : start by creating an achor with the href of the ID of the overlay div that contains the big image, inside this anchor the thumbnail image and a span containing the image label, and for the overlay div, give it the class lb-overlay and the ID you've already specified in the achor's href, inside it, create an other anchor with href #page and class lb-close, then create an img element for the big image to display, then create a div containing an h3 for the label and an optional span for an extra label, a p for the description of the image, and two achors for the previous and next buttons, each one has an href of the ID of the previous or next image.
JS Tutorial
