• 1848
  • 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>

Опции
Хэш параметров. Все параметры являются необязательными.
borderintegerИзображения 'границы. По умолчанию: 0
durationintegerПродолжительность анимации. По умолчанию 800
perspectiveintegerPerpective высоту. По умолчанию: 140
minScalefloatМинимальный масштаб для изображения в спину. По умолчанию: 0,2
loadingClassstringCSS класс применен к элементу в то время как looading изображений. По умолчанию: NULL
beforefunctionФункция обратного вызова срабатывает прежде, чем идти к следующему изображению
afterfunctionФункция обратного вызова срабатывает после перехода к следующему изображению
Код:
<!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>

Можешь почитать и вот эту статейку "Красивое простое вертекальное меню для сайта"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element