3713
- 0
- Автор: --------------
- Адаптировал: irbees2008
- Уровень сложности исполнения: нужны навыки css hmlt
Интересное слайд шоу 3D
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
2.Распаковываем
3.Заливаем в шаблон вашего сайта
4.Подключить Javascript и CSS файлы в документ между head.
5.Отредактировать CSS файл и исправить пути к изображениям и изменение цветов, чтобы соответствовать теме вашего сайта.
Важно: не забудьте включить Javascript файлы в определенном порядке, как в примере ниже.
Код:
<link rel="stylesheet" media="screen" type="text/css" href="{tpl_url}/css/spacegallery.css" />
<script type="text/javascript" src="{tpl_url}/js/eye.js"></script>
<script type="text/javascript" src="{tpl_url}/js/utils.js"></script>
<script type="text/javascript" src="{tpl_url}/js/spacegallery.js"></script>Вызов кода
Подготовьте элемент уровня блока с некоторыми изображениями внутри. Все что вам нужно сделать, это выбрать элементы в JQuery путем и вызвать плагин.
Код:
<script type="text/javascript">$('#myGallery').spacegallery({loadingClass: 'loading'});</script>Опции
Хэш параметров. Все параметры являются необязательными.
| border | integer | Изображения 'границы. По умолчанию: 0 |
| duration | integer | Продолжительность анимации. По умолчанию 800 |
| perspective | integer | Perpective высоту. По умолчанию: 140 |
| minScale | float | Минимальный масштаб для изображения в спину. По умолчанию: 0,2 |
| loadingClass | string | CSS класс применен к элементу в то время как looading изображений. По умолчанию: NULL |
| before | function | Функция обратного вызова срабатывает прежде, чем идти к следующему изображению |
| after | function | Функция обратного вызова срабатывает после перехода к следующему изображению |
Код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Spacegallery - jQuery plugin</title>
<link rel="stylesheet" media="screen" type="text/css" href="http://www.eyecon.ro/spacegallery/css/layout.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://www.eyecon.ro/spacegallery/css/spacegallery.css" />
<link rel="stylesheet" media="screen" type="text/css" href="http://www.eyecon.ro/spacegallery/css/custom.css" />
<script type="text/javascript" src="http://www.eyecon.ro/spacegallery/js/jquery.js"></script>
<script type="text/javascript" src="http://www.eyecon.ro/spacegallery/js/eye.js"></script>
<script type="text/javascript" src="http://www.eyecon.ro/spacegallery/js/utils.js"></script>
<script type="text/javascript" src="http://www.eyecon.ro/spacegallery/js/spacegallery.js"></script>
<script type="text/javascript" src="http://www.eyecon.ro/spacegallery/js/layout.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Spacegallery - jQuery plugin</h1>
<ul class="navigationTabs">
<li><a href="#about" rel="about">Демо</a></li>
</ul>
<div class="tabsContent">
<div class="tab">
<h2>Демо</h2>
<p>Нажмите на изображение ниже, чтобы увидеть его в действии.</p>
<div id="myGallery" class="spacegallery">
<img src="http://www.eyecon.ro/spacegallery/images/bw3.jpg" alt="" />
<img src="http://www.eyecon.ro/spacegallery/images/lights3.jpg" alt="" />
<img src="http://www.eyecon.ro/spacegallery/images/bw2.jpg" alt="" />
<img src="http://www.eyecon.ro/spacegallery/images/lights2.jpg" alt="" />
<img src="http://www.eyecon.ro/spacegallery/images/bw1.jpg" alt="" />
<img src="http://www.eyecon.ro/spacegallery/images/lights1.jpg" alt="" />
</div>
</div>
</div>
</div>
</body>
</html>
Можешь почитать и вот эту статейку "Теги datalist"
Это тоже интересно
30.10.13JQuery анимация кнопок
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.