Замечательная галерея на CSS3, HTML5 и jQuery
|
1 2 3 4 5 |
<link rel="stylesheet" href="/css/grid.css" type="text/css"> <link rel="stylesheet" href="/css/html5.css" type="text/css" /> <link rel="stylesheet" href="/css/master.css" type="text/css" /> <script type='text/javascript' src='/js/fancyzoom.js'></script> <script type='text/javascript' src='/js/demo.js'></script> |
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 34 35 36 37 38 39 40 41 |
<div class="span-18 column rounded"> <div class="span-6 column rotated"> <a id="image1" class="cms-editable polaroid" href="#pic-1" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 1" alt="image" /> </a> </div> <div class="span-6 column rotated"> <a id="image2" class="cms-editable polaroid" href="#pic-2" rel="lightbox" title="second image"> <img src="Ссылка на уменьшенное изображение 2" alt="image" /> </a> </div> <div class="span-6 column rotated last"> <a id="image3" class="cms-editable polaroid" href="#pic-3" rel="lightbox" title="third image"> <img src="Ссылка на уменьшенное изображение 3" alt="image" /> </a> </div> <div class="span-6 column rotated"> <a id="image4" class="cms-editable polaroid" href="#pic-4" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 4" alt="image" /> </a> </div> <div class="span-6 column rotated"> <a id="image5" class="cms-editable polaroid" href="#pic-5" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 5" alt="image" /> </a> </div> <div class="span-6 column rotated last"> <a id="image6" class="cms-editable polaroid" href="#pic-6" rel="lightbox" title="first image"> <img src="Ссылка на уменьшенное изображение 6" alt="image" /> </a> </div> <div id="pic-1"> <img src="Ссылка на увеличенное изображение 1" alt="image" /> </div> <div id="pic-2"> <img src="Ссылка на увеличенное изображение 2" alt="image" /> </div> <div id="pic-3"> <img src="Ссылка на увеличенное изображение 3" alt="image" /> </div> <div id="pic-4"> <img src="Ссылка на увеличенное изображение 4" alt="image" /> </div> <div id="pic-5"> <img src="Ссылка на увеличенное изображение 5" alt="image" /> </div> <div id="pic-6"> <img src="Ссылка на увеличенное изображение 6" alt="image" /> </div> </div> </section> <div style="clear:both;"></div> |
