| Главная » Файлы » Прочие скрипты » jQuery |
Замечательная галерея на css3, HTML 5 и jQuery
| 23.06.14, 09:25:53 | |
 Очень красивая и грамотно оформленная галерея на HTML 5, Jquery и CSS3! Для начала посмотрите ДЕМО Установка: После /head на нужных вам страницах вставляйте: Код <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> Следующий код в то место, где будет ваша галерея: Код <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> Далее залейте два скрипта из прикреплённого архива в папку js, три стиля в папку css и все картинки в папку images Материал подготовлен Apocalypse | |
| Просмотров: 506 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |