Воскресенье, 17.01.2021, 19:08
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Лайкнули наши группы в соц-ых сетях?


Всего ответов: 209

установить такой вид опроса
Статистика
Яндекс.Метрика
Онлайн всего: 10
Гостей: 10
Пользователей: 0


Зарегистрировано 31029 (сегодня + 0 новых, вчера + 1 новых), В каталоге файлов 1130 материала(ов), Оставлено 5155 комментариев, На форуме создано тем и ответов.

установить такую статистику

Блок CW результаты

Победы
Победы(10)

Поражения
Поражения(5)


Установить CW блок на свой сайт
Внимание!
Наш сайт адаптирован под браузер Mozilla Firefox
скрипты для uCoz
Скачать/Download
В остальных браузерах наш сайт может отображаться некорректно! (IE,Opera,Google Chrome и т.д)

установить такой блок
Поиск



установить такую кнопку twitter
или такую
красивая кнопка Twitter

Расскажи Друзьям!
Топ комментаторов

установить такой информер
VKONTAKTE

FACEBOOK
Главная страница » Помощь Вебмастеру » Категория Скрипты для uCoz » Добавлено [09.11.2013, 14:30]

Фотогалерея изображений для uCoz

Войти или Зарегистрироваться [скачивать файлы могут только зарегистрированные пользователи!]

Сайт без картинок - все равно что книга без картинок. Одно слово: скучно. Дизайнеры бьются над новыми оригинальными решениями расположения картинок и создания фото-галерей, а вот новинка от Ucoz заслуживает отдельного внимания. Так же и раскрутка сайтов становиться проще с такими красивыми дополнениями.

Во-первых, как и все продукты от Ucoz - она простая в использовании и доступная даже для начинающих владельцев сайтов и разработчиков. Во-вторых, что нас особенно порадовала - она круглая. В отличии от более привычных и стандартных галерей с горизонтальной прокруткой изображений, это, согласитесь, весьма интересный вариант. Плагин для галереи сделан с использование библиотеки JQuery, как и основной состав продуктов Ucoz. Галерея изображений через Circle Gallery хоть и имеет ограниченное количество картинок, но подойдет практически для любого сайта. В любом случае, рекомендуем скачать плагин и попробовать - галерея выполнена действительно качественно и красиво.

Мини-картинки расположены в круглых окошечках, а в середине большое, тоже круглое, окно полноценного просмотра. Переключая мини-изображения, вы можете просматривать их в укрупненном виде. Думаю, что на любом сайте, даже если у вас огромные библиотеки изображений, может найтись место для небольшой демонстрационной галереи - тогда выбирайте Circle Gallery, но нужно иметь ввиду, что она работает только с изображениями типа .jpg.

Важно! Все картинки загрузите в папку images и пропишите пути к ним в стилях сверху. Картинки должны быть с расширением .jpg. Скрипт из прикреплённого архива залейте в папку js!


Установка:

После /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;
}


Следующий код туда, где будет галерея:
<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>



При копирование материалов с сайта необходимо указать активную ссылку источника - Скрипты для uCoz 2013 и Фотогалерея изображений для uCoz



Расскажи друзьям интересные новости:


- Установить на свой сайт блок социальных закладок
Категория: Скрипты для uCoz | Добавил: scripts_for_ucoz | Теги: фото, изображений, фотоальбомы, фотогалерея
Просмотров: 6064 | Загрузок: 18 | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Для добавления необходима авторизация

Хостинг от uCoz