Среда, 27.01.2021, 22:54
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Ваше любимое оружие в Counter Strike 1.6


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

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


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

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

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

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

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


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

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



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

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

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

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

Фото Галерея для uCoz портала

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

Очередное классное решение для модуля фото галерей от нашего любимого веб-мастера 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 портала



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


- Установить на свой сайт блок социальных закладок
Категория: Скрипты для uCoz | Добавил: scripts_for_ucoz
Просмотров: 6465 | Загрузок: 69 | Рейтинг: 1.0/1


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

Хостинг от uCoz