Суббота, 31.10.2020, 21:58
Главная  Форум Регистрация Блог RSS
Приветствую Вас, Гость
Меню сайта

Наш опрос
Как вы относитесь к рекламе на сайте?


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

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


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

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

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

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

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


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

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



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

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

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

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

Фотогалерея на CSS3 и jQuery для фотоальбома на uCoz

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

Просто отличная фотогалерея, созданная на CSS3 и jQuery для фотоальбома на uCoz будет интересна многим, кто хочет сделать свой сайт привлекательным. Установка достаточно сложная, так что готовьтесь немного под задуматься над всем. Не забудьте скачать архив и загрузить файлы в нужные папки. Скрипт в /js , а картинки в /images. Если этого не сделаете, то и однозначно работать ничего не будет. Это как в строительстве, покупая подоконники ПВХ оптом нужно не забыть, что нужны и материалы для их установки и без них ничего не установить и не закончить. Так же в этом деле и скрипты с картинками.

В данном материале код представлен в ознакомительном порядке и для его работы необходимо прописать в коде фотогалереи пути до картинок, но используя свою фантазию можно прикрепить всю галерею уже к существующей оригинальной, но для этого потребуются неплохие знания html и css разметки сайта.

ВАЖНО! Скрипт из прикреплённого архива залейте в папку js, картинки в папку images

Пример работы кода: КЛИК

Установка пошаговая:

Сразу за кодом /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>


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



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


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


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

Хостинг от uCoz