регистрация
856материалов
3289комментариев
235тем на форуме
6854пользователя

Круглая галерея изображений через плагин Circle


Простая, но до жути оригинальная галерея для вашего сайта. Количество картинок ограничено, но, думаю, вы придумаете, подо что использовать этот плагин

Для начала посмотрите ДЕМО
Вот моё тестирование в фидле: КЛИК

Установка:

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jQuery.radmenu.min.js"></script>   
<script>   
jQuery(document).ready(function () {   
var posc = $("#radial_container").position();   
var left = $(window).width() / 2;   
if ($.browser.opera) {   
$("#big").css({   
"left": left - 122,   
"top": posc.top - 13   
});   
} else {   
$("#big").css({   
"left": left - 122,   
"top": posc.top + 3   
});   
}   
jQuery("#radial_container").radmenu({   
listClass: 'list',   
itemClass: 'item',   
radius: 220,   
animSpeed: 800,   
centerX: 0,   
centerY: 150,   
selectEvent: "click",   
onSelect: function ($selected) {   
var imgindex = $selected.index() + 1;   
$(".my_class").removeClass("selected");   
$(".img" + imgindex).addClass("selected");   
$("#big").css("background-image", "url('/images/" + imgindex + ".jpg')");   
},   
angleOffset: 0   
});   
jQuery("#radial_container").radmenu("show");   
});   
</script>

Следующий код в самый низ css:
Код
#radial_container {   
position:relative;   
margin: 0 auto;   
top: 80px;   
height: 20px;   
width: 20px;   
}   
.radial_div_item {   
}   
.radial_div_item.active {   
z-index: 100;   
}   
.my_class {   
cursor: pointer;   
height: 75px;   
width: 75px;   
border: 5px solid #333;   
-moz-border-radius: 45px;   
-webkit-border-radius: 45px;   
border-radius: 45px;   
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
position: relative;   
text-align: center;   
font-size: 12px;   
font-weight: bold;   
font-family:"Arial";   
}   
.my_class:hover {   
border-color: #0066cc;   
}   
.my_class:active {   
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);   
-moz-box-shadow: 1px 5px 1px rgba(0, 0, 0, .5);   
box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);   
top: 2px;   
border-color: #e3e3e3;   
}   
.img1 {   
background-image: url("Ссылка на картинку");   
}   
.img2 {   
background-image: url("Ссылка на картинку");   
}   
.img3 {   
background-image: url("Ссылка на картинку");   
}   
.img4 {   
background-image: url("Ссылка на картинку");   
}   
.img5 {   
background-image: url("Ссылка на картинку");   
}   
.img6 {   
background-image: url("Ссылка на картинку");   
}   
.img7 {   
background-image: url("Ссылка на картинку");   
}   
.img8 {   
background-image: url("Ссылка на картинку");   
}   
.img9 {   
background-image: url("Ссылка на картинку");   
}   
.img10 {   
background-image: url("Ссылка на картинку");   
}   
.selected {   
border-color: #0066cc;   
}   
#big {   
position: relative;   
border: 5px solid #0066cc;   
width: 300px;   
height: 300px;   
-moz-border-radius: 200px;   
-webkit-border-radius: 200px;   
border-radius: 200px;   
-webkit-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
-moz-box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
box-shadow: 1px 1px 10px rgba(0, 0, 0, .5);   
}   
#main {   
background: #0099cc;   
margin-top: 0;   
padding: 2px 0 4px 0;   
text-align: center;   
}   
#main a {   
color: #ffffff;   
text-decoration: none;   
font-size: 12px;   
font-weight: bold;   
font-family: Arial;   
}   
#main a:hover {   
text-decoration: underline;   
}

Не забудьте залить нужные картинки в папку images и прописать пути к ним в стилях сверху. Картинки должны быть с расширением .jpg

Следующий код туда, где будет галерея:
Код
<div id="radial_container">   
<ul class="list">   
<li class="item">   
<div class="my_class img1"></div>   
</li>   
<li class="item">   
<div class="my_class img2"></div>   
</li>   
<li class="item">   
<div class="my_class img3"></div>   
</li>   
<li class="item">   
<div class="my_class img4"></div>   
</li>   
<li class="item">   
<div class="my_class img5"></div>   
</li>   
<li class="item">   
<div class="my_class img6"></div>   
</li>   
<li class="item">   
<div class="my_class img7"></div>   
</li>   
<li class="item">   
<div class="my_class img8"></div>   
</li>   
<li class="item">   
<div class="my_class img9"></div>   
</li>   
<li class="item">   
<div class="my_class img10"></div>   
</li>   
</ul>   
</div>   
<div id="big"></div>

Скрипт из прикреплённого архива залейте в папку js


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.07.2013 в 02:00
Материал просмотрен: 1133 раза
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Сегодня к нам присоединился: 1 человек
Пользователи и гости сейчас онлайн: 4 Сегодня наш портал посетили: чел
Сейчас на сайте: ilja
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 3
Пользователей: 1