Круглая галерея изображений через плагин Circle
827материалов
228тем на форуме
3003комментария
6151пользователь

Круглая галерея изображений через плагин 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
Материал просмотрен: 936 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

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

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


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта