Уже третья статья на эту тему. Она явялется продолжением статьи Галерея изображений в лайтбоксе. Часть 2

 

Здесь расскажу как сделать перелистывание фоток кликами на стрелки вправо и влево, закрытие лайтбокса при клике на Esc и листалка кликами по фоткам. 

 

Опубликовано в Js/jQuery

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

 

Там рассматривается вариант, когда есть большие картинки. На странице мы стилями сделами им маленькие размеры, а в лайтбоксе выводили оригиналы.

Теперь рассмотрим галерею в лайтбоксе для динамического сайта, на котором для картинок используется crop - обрезка до заданных размеров. 

 

Опубликовано в Js/jQuery

Делаем галерею изображений. На страничке выводятся маленькие картинки, при клике на любую из них, всплывает окно лайтбокса, в котором большое изображение, его описание, дата добавления (или любая другая информация). Также в лайтбоксе отображается счетчик изображений в виде 

"Фотография 1 из 10"

 

Опубликовано в Js/jQuery

Продолжаю серию полезных для сайта динамических эффектов. Ранее я подробно рассказывала о Реализация hightlighter, tabs, lightbox и закрытие блока при клике, в данной же статье рассмотрю такие эффекты:

  • Lightbox
  • Accordion
  • Scrolling text

 

Lightbox (лайтбокс) чаще всего используется для показа картинки в полном размере или для вывод формы - авторизации, регистрации и т.д.

Accordion (аккордион) может использоваться в информационных и других блоках, для вывода меню (например, категории товаров - сразу видны основные категории, а при разворачивании можно получить подкатегории) или для любого другого контента, для которого вначале можно показать только заголовки, а содержание пользователь может узнать, развернув аккордион.

Scrolling text - это текст "бегущая строка", в таком виде можно показывать анонсы новостей, акции, новости от партнеров и многое другое.

 

Опубликовано в Js/jQuery

В данной статье рассмотрим возможность простых реализаций таких популярных эффектов, как lightbox, hightlighter, tabs и на закуску блок с кнопочкой "Close". 

 

Смотреть демо

 

 

1.Highlighter

 

Тут все просто.

 

Опубликовано в Js/jQuery

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов