828материалов
231тема на форуме
3032комментария
6247пользователей

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

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

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


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