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

Оригинальная 3D галерея через плагин rotate3Di на jQuery для uCoz
23.06.14, 14:36:28

Скачать файл




Интересная галерея, в которой картинки повсёрнуты в 3D плоскости

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<link rel="stylesheet" href="http://ruseller.com/lessons/les1016/demo/js/theme/jquery.ui.all.css">
<script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/jquery-ui-1.8.7.custom.min.js"></script>
<script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/jquery-css-transform.js"></script>
<script type="text/javascript" src="http://ruseller.com/lessons/les1016/demo/js/rotate3Di.js"></script>
<script type="text/javascript">
$(function() {  
$( "#slider" ).slider({  
value: -100,  
min: -100,  
max: 0,  
step: 1,  
slide: function( event, ui ) {  
$(".img").css("margin-left", ui.value + "px");  
}  
});  

$("img").rotate3Di(45);  

$("img").click(function() {  
var str = $(this).attr("style");  
var index = str.indexOf("skew");  
var substr = str.substr(index+5, 10);  
var split = substr.split(", ");  
var val = parseFloat(split[1])  
if ((val == 0)) {  
$(this).rotate3Di(45, 1000);  
} else {  
$(this).rotate3Di(0, 1000);  
}  
});  
});  
</script>
<style type="text/css">
#container {  
padding: 50px;  
margin-top: 20px;  
}  
#images {  
padding: 40px;  
}  
#images img {  
margin-left: -100px;  
background: #e9e9e9;  
padding: 10px;  
cursor: pointer;  
}  
#images img:hover {  
background: #333;  
}  
#slider {
width: 380px;  
}  
</style>


В то место, где должна быть галерея, вставляйте:
Код
<div id="slider"></div>
<br/>
<div id="images">
<img class="img_main" src="Ссылка на картинку"/>
<img class="img_main" src="Ссылка на картинку"/>
<img class="img_main" src="Ссылка на картинку"/>
<img class="img_main" src="Ссылка на картинку"/>
<img class="img_main" src="Ссылка на картинку"/>
<img class="img_main" src="Ссылка на картинку"/>
</div>


В прикреплённом архиве находятся все файлы на случай, если ссылка на них станет битой

Источник материала: http://ruseller.com/

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: галерея, rotate3Di, Через, ucoz, на, плагин, JQuery, Оригинальная, для, 3D
Просмотров: 255 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: