Галерея на CSS3
Создаем минимальную галерею изображений Lightbox с возможностью перехода по изображениям (слайды) с использованием CSS / CSS3 и простой HTML -разметкой.
Как использовать:
1. Подключаем стили:
|
1 |
<link href="cssbox.css" rel="stylesheet"> |
2. Код галереи:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="cssbox"> <a id="image1" href="#image1"> <img class="cssbox_thumb" src="thumbn-1.jpg"> <span class="cssbox_full"> <img src="full-1.jpg"> </span> </a> <a class="cssbox_close" href="#void"></a> <a class="cssbox_next" href="#image2">></a> </div> <div class="cssbox"> <a id="image1" href="#image2"> <img class="cssbox_thumb" src="thumbn-2.jpg"> <span class="cssbox_full"> <img src="full-2.jpg"> </span> </a> <a class="cssbox_close" href="#void"></a> <a class="cssbox_prev" href="#image1"><</a> <a class="cssbox_next" href="#image3">></a> </div> <div class="cssbox"> <a id="image1" href="#image3"> <img class="cssbox_thumb" src="thumbn-3.jpg"> <span class="cssbox_full"> <img src="full-3.jpg"> </span> </a> <a class="cssbox_close" href="#void"></a> <a class="cssbox_prev" href="#image2"><</a> </div> |
