| admin | Дата: Суббота, 21.12.2013, 15:37 | Сообщение # 1 |
 Главный админ
Группа: Администраторы
Сообщений: 336
Награды: 0
Репутация: 1
Статус: Offline
| Фотогалерея для uCoz с плавным увеличением фото (lightbox)
Просто великолепный материал совсем недавно адаптировал для сайтов uCoz. Это красивая фотогалерея, на которой фотографии плавно увеличиваются при просмотре, а так же есть затемнение, а даже скорее просветление картинок, когда вы наводите на них мышкой. Отличный материал, будет полезен многим. Например, при хорошем знание html эту галерею можно оптимизировать по существующий фотоальбом на вашем uCoz сайте, или же можно использовать её просто, в таком виде как она тут выложена. Не забудьте, в коде фотогалереи прописать пути до картинок, иначе ничего работать не будет. Есть вопросы? Пишите комментарии и мы постараемся вам написать ответ и помочь.
В данном материале нету ни одного скрипта, что облегчает работу сайта. Всё сделано на Css3 и HTML.
Установка фотогалереи на сайт uCoz:
В самый низ вашего css вставляйте: код найдёте в прикреплённом архиве.
Следующий код в то место, где будет галерея:
Код <section> <ulclass="lb-album"> <li> <ahref="#image-1"> <imgsrc="Ссылка на миниатюру"alt="image01"> <span>Заголовок на миниатюре</span> </a> <divclass="lb-overlay"id="image-1"> <ahref="#page"class="lb-close">x Close</a> <imgsrc="Ссылка на большую картинку"alt="image01"/> <div> <h3>Заголовок</h3> <p>Описание</p> </div> </div> </li> <li> <ahref="#image-2"> <imgsrc="Ссылка на миниатюру 2"alt="image02"> <span>Заголовок на миниатюре 2</span> </a> <divclass="lb-overlay"id="image-2"> <ahref="#page"class="lb-close">x Close</a> <imgsrc="Ссылка на большую картинку 2"alt="image02"/> <div> <h3>Заголовок 2</h3> <p>Описание 2</p> </div> </div> </li> </ul> </section>
charset="utf-8">
data-yashareType="button" data-
yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится
|
| |
| |
