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

Спросите, почему именно этот способ? да потому что в модальных окнах на этой технологии можно использовать не только картинки и и flash и видео в формате wmv, я считаю это весьма интересным для веб-разработчиков, способные найти отличное применение этому multibox.

И так, для начала нам необходимо подключить стили, но тут возникает вопрос, будет ли эта галерея читаться всеми браузерами?- тут мы решаем этот вопрос подключением стиля ie6.css, этот стиль позволит корректно отображаться в internet explorer начиная с 6й версии. и так, следующие теги нам необходимо вставить между тегами <head> и </head> следующим образом:

Следующим этапом будет подключение java-скриптов:

  • multibox.js - основной JavaScript нашей галереи;
  • mootools.js - файл, с помощью которого сделана база нашей галереи;
  • overlay.js - JavaScript, отвечающий за правильность отображения всех элементов галереи.

Данной код Вам необходимо так же вставить между тегами <head> и </head>:

Далее нам нужно оформить нашу галерею, для этого мы будем использовать следующий html-код:

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

И на последок нам необходимо подключить следующий JavaScript-код:

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

На главную

Читайте также: