Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 28 - июля Слайдшоу и анимация
3201 - 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>

Можешь почитать и вот эту статейку "Выводим Все новости"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

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

Статистика

  • Caйту: 3402 дня
  • Новостей: 549
  • Комменты: 254
  • Зарегистрированно : 577
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 32
  • Генерация страницы: 0.378сек
  • Потребление памяти: 4.963 Mb 
  •   яндекс.ћетрика