Главная » Файлы » Прочие скрипты » 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

Категория: jQuery | Добавил: Apocalypse | Теги: галерея, на, JQuery, Html, CSS3, замечательная
Просмотров: 435 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: