Очередное классное решение для модуля фото галерей от нашего любимого веб-мастера Apocalypse, который, кстати, накануне записался на Microsoft курсы, которые будут полезны любому новичку и профессиональному веб разработчику. Как же описать действие этого материала? Пожалуй всё более детально и подробно можно рассмотреть в Демо и на картинке, которая есть в материале.
Самое главное не забывайте, что любой материал нужно настроить под себя и под дизайн Вашего замечательного uCoz сайта. А так же не забудьте сделать Backup ваших шаблонов на тот случай если что-то пойдёт не так, как планировалось. Эту галерея очень стандартная, но в этом и есть её привлекательность, которую и смогут оценить все Ваши посетители. Изначально появляются лишь картинки в уменьшенном положение, при клике на одну из фотографий, она плавно увеличивается до нужных размеров экрана. Так же хочу обратить Ваше внимание на то, что необходимо скачать сам скритп и загрузить его на свой сайт через файловый менеджер в папку js. Если у Вас такая папка отсутствует, тогда её необходимо будет создать. Надеюсь с этим у Вас проблем не будет. Далее необходимо будет скопировать код в любое место вашего шаблона CSS и самый последний код копируйте в то место, где Вам хотелось бы увидеть самую эту Галерею. Не забудьте отредактировать код и вставить рабочие ссылки на уменьшенные и увеличение изображения. Внимание: без редактирования кода, фото галерея работать не будет.
При желании можно вставить вместо ссылок коды картинок Укоз - $ IMAGE1 $ , $I MAGE 2$ и т.д., но при условии, что в материале Вы загрузите фотографии через поле Изображение и сделаете информер с разными материалами. Это только лишь Вам как пример, где и как Вы можете приспособить эту Фото Галерею. Всем спасибо за внимание, не забудьте рассказать об это материале своим друзьям в социальных сетях.
Для начала посмотрите ДЕМО
Установка:
После /head на нужных страницах вставляйте: <script src="/js/core.js" type="text/javascript"></script>
Следующий код в самый низ вашего css:#images {
list-style: none;
}
#images li, #images li a, #images li a img {
float: left;
}
#images li {
padding: 7px;
margin-right: 4px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background: #fff;
}
.dn {
display: none;
}
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
z-index: 10000;
}
#lightbox {
text-align: left;
padding: 10px;
z-index: 999999;
background: #fff;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: fixed;
top: -999999em;
left: 50%;
}
#lightbox-wrapper {
background: #111;
}
#lightbox-content {
overflow: hidden;
text-align: center;
position: relative;
}
#lightbox-tools {
height: 25px;
position: relative;
bottom: 0;
line-height: 0;
}
#lightbox-close, #lightbox-tools .paging {
width: 16px;
height: 16px;
text-indent: 999999em;
overflow: hidden;
background-image: url(/images/pagination.png);
background-repeat: no-repeat;
display: none;
position: absolute;
top: 5px;
}
#lightbox-prev, #lightbox-prev-inactive {
left: 5px;
}
#lightbox-next, #lightbox-next-inactive {
left: 25px;
}
#lightbox-prev {
background-position: 0 0;
cursor: pointer;
}
#lightbox-prev-inactive {
background-position: 0 -16px;
cursor: default;
}
#lightbox-next {
background-position: 0 -32px;
cursor: pointer;
}
#lightbox-next-inactive {
background-position: 0 -48px;
cursor: default;
}
#lightbox-close {
background-position: 0 -64px;
cursor: pointer;
display: block;
right: 5px;
}
#lightbox-title {
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
background-color: #000;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
position: absolute;
bottom: 15px;
padding: 6px 20px;
color: #fff;
font-style: italic;
}
.preloader {
width: 50px;
height: 50px;
padding: 10px;
background: #262626;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -25px;
margin-left: -25px;
}
Следующий код в то место, где должна быть галерея:<ul id="images">
<li>
<a href="Ссылка на большое изображение" rel="gallery" title="Carnival" class="lightbox">
<img src="Ссылка на маленькое изображение" alt="Carnival" width="150" height="83" />
</a>
</li>
<li>
<a href="Ссылка на большое изображение" rel="gallery" title="Carnival" class="lightbox">
<img src="Ссылка на маленькое изображение" alt="Carnival" width="150" height="83" />
</a>
</li>
<li>
<a href="Ссылка на большое изображение" rel="gallery" title="Carnival" class="lightbox">
<img src="Ссылка на маленькое изображение" alt="Carnival" width="150" height="83" />
</a>
</li>
</ul>
Скрипт из прикреплённого архива залейте в папку js, картинки в папку images
При копирование материалов с сайта необходимо указать активную ссылку источника -
Скрипты для uCoz 2013 и
Фото Галерея для uCoz портала
Расскажи друзьям интересные новости:
-
Установить на свой сайт блок социальных закладок
| 
