Страница 1 из 11
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Скрипт шикарного слайдера изображений сайта ucoz
Скрипт шикарного слайдера изображений сайта ucoz
Kosten
Дата: Четверг, 14.02.2013, 14:01 | Сообщение # 1
Администраторы
Сообщений:12706
Награды: 39




Скрипт шикарного слайдера изображений сайта ucoz. Он и вправду красив и неординарен. Можно с него сделать фотоальбом так как картинки там не мелкие. И будит шикарно вписываться в ваш дизайн сайта.
Приступаем:
Стили прописываем там где вы хотите видеть этот слайдер.
Код
<style>     
#container {width: 100%; height: 100%;}  
.clear {clear: both; line-height: 0px; height: 0px;    font-size: 0px;}  
#menu {padding: 0px 15px 20px 15px; text-align: left;}  
#menu .collections {float: left;}  
#menu .pages {float: left;}  
#menu ul li.highlight {background-color: #f1f1f1;}  
#menu ul li {float: left; padding: 3px 6px; margin: 0px 3px 0px 0px; -moz-border-radius: 3px; -webkit-border-radius: 3px;}  
#menu a, #menu a:visited {font-size: 14px; font-weight: 200; color: #333; width: 100%; -webkit-transition-duration:.5s; -webkit-transition-timing:ease-out; -moz-transition-duration:.5s; -moz-transition-timing:ease-out;}  
#menu .pages a {color: #999;}  
#menu li:hover {background-color: #EAEAEA; color: #666; text-shadow:1px 1px 0px rgba(255,255,255,0.7); -webkit-transition-duration:.5s; -webkit-transition-timing:ease-out; -moz-transition-duration:.5s; -moz-transition-timing:ease-out;}  
#menu .squares {float: right; display: none;}  
#menu .squares a {cursor: pointer; float: left; height: 10px; width: 10px; border: 1px solid #999; margin: 8px 0px 0px 4px;    -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 2px;}  
#menu .squares a:hover, #menu .squares a.active {background-color: #ddd;}  
#slideshow {overflow: auto; margin: 0 auto; padding: 0px; width: 100%; overflow: hidden; position: relative;}  
#photos {width: 100%; height: 500px; overflow: hidden;}  
#photos.loading {background: transparent url(http://zornet.ru/ZORNET/loading.gif) center center no-repeat;}  
#photos .photo {height: 500px; float: left; margin: 0px 0px 0px 10px;}  
#photos .photo img {max-height: 500px;    width: auto; display: block;}  
.arrow {width: 32px; height: 32px; position: absolute; top: 543px; cursor: pointer;    -moz-border-radius: 3px; -webkit-border-radius: 3px; display: none;}  
#prev {left: 20px; background: #fff url(http://zornet.ru/ZORNET/previous_arrow_black.gif) center center no-repeat;}  
#next {right: 20px; background: #fff url(http://zornet.ru/ZORNET/next_arrow_black.gif) center center no-repeat;}  
.arrow {opacity: 0.5;}  
.arrow:hover {opacity: 1.0;}  
</style>


Как прописали стили, ниже их прописываем код:
Код
<div id="container">  
<div id="menu">  
<div id="mini" class="squares"></div>  
<div class="clear"></div>  
</div>  
<div id="slideshow">  
<div id="photos" class="photos loading clearfix"></div>  
</div>  
<a class="arrow" id="prev"></a>  
<a class="arrow" id="next"></a>  
</div>  
<script src="http://zornet.ru/ZORNET/horizontal.js"></script>  
<script>  
var galleryData = [{"image":"Ссылка на изображение 1"},{"image":"Ссылка на изображение 2"},{"image":"Ссылка на изображение 3"}];  
</script>


Потом просто добавляем картинки - изображение. Если вам показалось мало изображений просто добавляем код.
Код
{"image":"Ссылка на изображение 4"},{"image":"Ссылка на изображение 5"}


На этом все!
Прикрепления: 5243723.jpg(162Kb)


OLYA
Дата: Суббота, 17.10.2015, 15:35 | Сообщение # 2
Пользователи
Сообщений:1
Награды: 0


Хороший слайдер, только он картинки отображает без рамки. Это можно как то исправить?
И какого размера должны быть фото?

Добавлено (17.10.2015, 15:35)
---------------------------------------------
И еще как сделать так, что б слайдер автоматически листал изображения?

Kosten
Дата: Суббота, 17.10.2015, 16:24 | Сообщение # 3
Администраторы
Сообщений:12706
Награды: 39


OLYA, но там рамки не какой не вижу.

Kosten
Дата: Суббота, 17.10.2015, 16:25 | Сообщение # 4
Администраторы
Сообщений:12706
Награды: 39


Цитата OLYA ()
И какого размера должны быть фото?

Думаю он должен сам подгонять, но если поставили, вам видней будет, как они будут смотреться.


Scheme
Дата: Пятница, 18.03.2016, 01:55 | Сообщение # 5
Пользователи
Сообщений:106
Награды: 1


Не когда не понимал эти слайдеры, но для какой то тематике они нужны больше чем какая то статистика.
Сафрон
Дата: Пятница, 18.03.2016, 06:06 | Сообщение # 6
Пользователи
Сообщений:161
Награды: 0


kvyntin, не чего ты не понимаешь в них, но как можно представить какой то официальный сайт без слайдера. Есть такие, но основном ресурсы по продаже, а там они нужны, даже для видимости, что такой сайт.
Форум про uCoz » Раздел uCoz » Скрипты и коды uCoz » Скрипт шикарного слайдера изображений сайта ucoz
Страница 1 из 11
Поиск: