МУЛТИМЕДИЯ и ОСНОВИ НА WEB ДИЗАЙНА

УПРАЖНЕНИЕ 2 - задача 2

Задача 2.2 показва изграждането на фотогалерия чрез технологията Lightbox 2.04. Lightbox и Lightbox версия 2 е JavaScript приложение, за представянето на големи изображения чрез използването на модални прозорци. Скриптът е широко разпространен, което се дължи на елегнатния му вид и лесно вграждане.

  1. Lightbox 2 използва прототипова стуктура и скриптовокапсулирана библиотека с ефекти. Необходимо е да се зададе връзка към следните три JavaScript файлове в <head></head> секцията на HTML документа.
    2. <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script>
  2. Вмъкнете и Lightbox CSS файла, за да приложите външния вид на Lightbox прозореца.
    3. <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
  3. Вмъкнете в HTML документа мини изображенията на снимките от папка images. Задайте линк от тях към реалните изображения.
    4. <a href="images/image-1.jpg"> <img src="images/thumb-1.jpg" width="100" height="40" /></a> <a href="images/image-2.jpg"> <img src="images/thumb-2.jpg" width="150" height="113" /></a> <a href="images/image-3.jpg"> <img src="images/thumb-3.jpg" width="110" height="128" /></a> <a href="images/image-4.jpg"> <img src="images/thumb-4.jpg"width="150" height="113" /></a> <a href="images/image-5.jpg"> <img src="images/thumb-5.jpg" width="150" height="100" /></a>
  4. Прибавете rel="lightbox[roadtrip]" към линк тага, за да активирате приложението. Прибавете към атрибута title текста, който искате да излезе под изображението.
    5. <a href="images/image-1.jpg" rel="lightbox[roadtrip]" title="Изображение 1"> <img src="images/thumb-1.jpg" width="100" height="40" /></a> <a href="images/image-2.jpg" rel="lightbox[roadtrip]" title="Изображение 2"> <img src="images/thumb-2.jpg" width="150" height="113" /></a> <a href="images/image-3.jpg" rel="lightbox[roadtrip]" title="Изображение 3"> <img src="images/thumb-3.jpg" width="110" height="128" /></a> <a href="images/image-4.jpg" rel="lightbox[roadtrip]" title="Изображение 4"> <img src="images/thumb-4.jpg" width="150" height="113" /></a> <a href="images/image-5.jpg" rel="lightbox[roadtrip]" title="Изображение 5"> <img src="images/thumb-5.jpg" width="150" height="100" /></a>

Приложете Lightbox галерията страницата JavaScript галерия на сайта от упражнение 1. Променете цвета на затъмнението в Lightbox, стила на прозореца (от файла lightbox.css) и надписите за поредност на изображението (от lightbox.js).

РАЗГЛЕДАЙ ПРИМЕРА