Главная » Файлы » Прочие скрипты » jQuery

3D галерея для uCoz
24.06.14, 10:11:20

Скачать файл




Давно не было моей активности на этом сайте к сожалению, и сегодня я хотел бы это исправить.
Панель содержит слайды, где каждый состоит максимум из 4 элементов. При переключении слайда, анимируются некоторые разделительные строки "сетка" , корректируя размер панелей следующего слайда. Панели появятся с 3D-эффектом, который определен для каждой панели.

Это будет работать только в браузерах, поддерживающих новые свойства CSS. Скрипт был протестирован в последних версиях Safari, Mobile Safari, Chrome, Firefox. (но не так все гладко, как хотелось бы)


ДЕМО

Установка:

Html структура (в нужное вам место ставим):
Код
<ul id="sg-panel-container">  
<li data-w="60" data-h="55">  
<img title="Grexit" src="images/1.jpg" data-rotate-x="50" />  
<img title="Godwottery" src="images/2.jpg" data-rotate-y="-50" />  
<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />  
<img title="Etiquette" src="images/4.jpg" data-translate-z="250" />  
</li>  
<li data-w="50" data-h="100">  
<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />  
<div>  
<div class="sg-content">  
<h3>Proinde vos postulo</h3>  

Veggies sunt bona vobis, proinde...</p>  
</div>  
</div>  
</li>  
<!-- ... -->  
  </ul>

Далее подключаем css & jquery перед закрывающимся тегом /head :
Код
<link rel="stylesheet" type="text/css" href="css/style.css" />  
  <script type="text/javascript" src="js/modernizr.custom.69142.js"></script>


А этот код jquery ставим перед /body:
Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>  
<script type="text/javascript" src="js/jquery.transit.min.js"></script>  
<script type="text/javascript" src="js/jquery.imagesloaded.js"></script>  
<script type="text/javascript" src="js/jquery.ba-dotimeout.min.js"></script>  
<script type="text/javascript" src="js/jquery.gridgallery.js"></script>  
<script type="text/javascript">
$(function() {  

$( '#sg-panel-container' ).gridgallery();  

});  
</script>  
<script>


Подробнее:
data-w - ширина слайда(картинки/элемента)
определяется в процентах (%)
data-h - высота слайда(картинки/элемента)

data-rotate-x
data-rotate-y
data-rotate-z
- это 3D эффекты для элементов
data-translate-x
data-translate-y
data-translate-z


Источник: tympanus.net/codrops
Категория: jQuery | Добавил: Apocalypse | Теги: галерея, ucoz, для, 3D
Просмотров: 265 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: