21774

Разработка раздела «Фотогалерея» и создания модуля просмотра фотографий

Лабораторная работа

Информатика, кибернетика и программирование

А также добавили два новых раздела в «меню». Остался пустым раздел «Фотогалерея», состоящий из трех подразделов. Приоритетной задачей при разработке данного раздела является создание понятного интерфейса для пользователя, то есть необходимо объекты на страницы расставить таким образом

Русский

2014-03-24

1.31 MB

10 чел.

Лабораторная работа №2.

Тема: Разработка раздела «Фотогалерея» и создания модуля просмотра фотографий.

В прошлой лабораторной работе вы разработали дизайн сайта и сверстали его каркас/ На его основе вы выполнили задание по созданию таких разделов:

  •  Список группы;
  •  Куратор;
  •  Преподаватели;
  •  Расписание;
  •  Культ-массовая работа;
  •  Научная работа.

А также добавили два новых раздела в «меню». Остался пустым раздел «Фотогалерея», состоящий из трех подразделов. Приоритетной задачей при разработке данного раздела является создание понятного интерфейса для пользователя, то есть необходимо объекты на страницы расставить таким образом, чтобы пользователю было:

  1.  удобно,
  2.  понятно.

Из прошлой лабораторной работы вам стало известно, что перед тем, как верстать новый раздел, необходимо его изобразить на бумаге или нарисовать в графическом редакторе. Представим, что вы уже нарисовали и ваш раздел «Фотогалерея» получился таким как представлен на рисунке 1.

Рис.1. Графическое представление раздела «Фотогалерея»

Для создания данного раздела воспользуемся ранее сверстанным каркасом.    Итак, в блоке DIV,  ID которого является «osnov», все должно быть стерто и его вид должен быть следующим:

В блоке «osnov» будут располагаться фотографии в маленьком размере. При наведении на фотографию, курсор должен менять свой стиль на «рука», а при клике поверх страницы, должен лечь новый блок серого полупрозрачного цвета, занимающий всю страницу. Поверх полупрозрачного блока должен выводиться блок, осуществляющий работу модуля по увеличению изображения и по его смене, не закрывая только что открытый блок.  Для того, чтобы при верстки и программировании задача была ясна, необходимо  результат модуля изобразить в виде графического изображения.

Пусть будущий дизайн модуля выглядит как  на рисунке 2.

Рис.2. Дизайн модуля для увеличения фотографий

  После графической разработки модуля, необходимо переходить непосредственно  к верстке и программированию. Логично начать с верстки страницы, для этого нам понадобится тег <img>. Но прежде чем начать верстку, необходимо в папке images создать новую папку под названием fotogalery, а в ней соответственно папку 1_kurs и поместить туда восемь фотографий, имеющих расширение JPG. Каждое изображение должно  иметь имя в виде цифры. Названия изображений должны быть следующими; 1.jpg, 2.jpg и так до девяти. То есть у вас в папке должно быть восемь изображений имеющие следующие названия:

  1.  1.jpg,
  2.  2.jpg,
  3.  3.jpg,
  4.  4.jpg,
  5.  5.jpg,
  6.  6.jpg,
  7.  7.jpg,
  8.  8.jpg.

После того как картинки подготовлены, можно переходить к верстке страницы.   Для этого  нам понадобится тег <img>. В нашем случае синтаксис будет выглядеть следующим образом:

<img src="images/fotogalery/1_kurs/1.jpg"  class="foto" >

 Заметьте, мы назначили картинке класс для того, чтобы назначить единые параметры всем изображениям в разделе «фотогалерея», используя файл css.css.

Как представлено на рисунке 2, в одну строку помещается  два изображения, то есть код раздела «фотогалерея» будет выглядеть следующим образом:

          

<img src="images/fotogalery/1_kurs/1.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/2.jpg"  class="foto"><br>

<img src="images/fotogalery/1_kurs/3.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/4.jpg"  class="foto" ><br>

<img src="images/fotogalery/1_kurs/5.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/6.jpg"  class="foto"><br>

<img src="images/fotogalery/1_kurs/7.jpg"  class="foto">

<img src="images/fotogalery/1_kurs/8.jpg"  class="foto" ><br>

Данный код необходимо вставить в блок «osnov», сохранить затем открыть код css.css и ввести следующие значения:

 

Теперь необходимо сохранить и проверить результат в браузере. Если все работает верно, то переходим к созданию модуля, для этого создайте новый файл в папке «js» под названием «fotography.js», а в файле  1_kurs.html в теге <head> прикрепите новый модуль, как   это было сделано для модуля отвечающего за меню. Пример кода, который нужно поместить в тег <head>  представлен ниже:

<script src="js/fotography.js"></script>

Сохраните и откройте в блокноте файл   fotography.js. Прежде чем писать программный код, давайте разберемся с логикой будущего модуля и его задачами.

Задача нашего модуля проста, необходимо при нажатии на изображение в разделе «фотогалерея», увеличивать его и да ть возможность просматривать фотографии, используя стрелки перехода, как представлено на рисунке 2.

Логика модуля следующая:

  •  создать прозрачный блок;
  •  создать блок с фоновым цветом #5a5044;
  •  вывести во второй блок изображение размером  503х393;
  •  вывести в заголовке блока количество фотографий на странице и номер открытой фотографии;
  •  создать кнопки переключения фотографий;
  •  создать кнопку, которая закрывает созданные блоки.

Теперь переведем словесный алгоритм в программный код. Давайте начнем с самого первого задания в нашем списке- создадим прозрачный блок и блок с фоном такого цвета #5a5044;

 

 

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

 

 

Теперь, сохраните все и откройте в браузере, кликнув мышкой по любому изображению. Должно   открыться окно, как представлено на рисунке 2.  Переходим к следующему значению из списка - программируем кнопки Сначала запрограммируем кнопки переключения фотографий:

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

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

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

Сохраните и проверьте.

Самостоятельное задание.

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


 

А также другие работы, которые могут Вас заинтересовать

38989. Численные методы 2.17 MB
  Из полученных данных видно, что метод подобластей имеет наилучший результат вычислений из всех остальных методов. Во-первых, даже при небольшом количестве разбиений он дал точность на 2 порядка лучше, чем второй по полученной точности метод Галеркина. Во-вторых, точность при количестве дискрет n=12 уже не укладывалась в разрядную сетку персонального компьютера.
38990. Икона Рождества Христова 33 KB
  Зубок с указкой в руке стоит у доски показывая на иллюстрации Рождественских событий Зубок: Ребята сегодня я буду учителем. Отвечайте на мои вопросы: Кто изображен на этом рисунке Родившийся МладенецХристос Зубок: Кто явился пастухам на поле Ангел Зубок: Какую весть принес ангел Что родился Бог в пещере Зубок: Кто едет на верблюдах по пустыне Звездочеты с дарами Зубок: Что привезли волхвы в подарок Иисусу Христу Золото ладан и смирну Зубок: Здорово мне нравиться быть учителем Матильда Леонардовна: Здравствуйте ребята...
38991. Совинформ. Праздник Крещения Господня – Богоявление 33 KB
  Беседа жителей Шишкиного леса Шуня раскладывает сувенирчики Енот Енотович приносит баночки с водой. Шуня: Какая я счастливая сколько мне подарков на святках подарили Енот Енотович: А ты Шунечка дарила другим радость в эти святые дни Шуня: Да конечно только не могу вам рассказать что и кому а то Матильда Леонардовна говорит что я все свои добрые дела растеряю. Шуня: Здорово что есть Господь которому можно доверить все свои тайны А что это у вас в руках за тайна такая Енот Енотович: Никакая это ни тайна а просто вода. Шуня: А...
38992. Притча о неразумном богаче. Советы Енота Енотовича. Думай о других 35.5 KB
  Советы Енота Енотовича. Оборудование: иллюстрации к притчам о добром самарянине неразумном богаче куклы котенка Коксика Енота Енотовича. Чему же хотел научить нас Господь Был ли жадным богач Какое решение он принял когда собрал большой урожай Смог ли он насладиться своим богатством что случилось с ним Советы Енота Енотовича: Думай о других. Коксик: Енот Енотыч Енот Енотыч – закричал котенок вбегая в комнату.
38993. Сретение Господне 35 KB
  Шуня: Тетушка Матильда что еще сделать Матильда Леонардовна: Вещи все сложила на место Шуня: Да. Матильда Леонардовна: Игрушки все убрала Шуня: Конечно. Матильда Леонардовна: Пыль везде вытерла Шуня: Вездевезде Матильда Леонардовна: Тогда принеси мне пожалуйста связку свечей из тумбочки. Зубок: Ухты как у нас чисто и красиво А что у нас завтра праздник какойто Может день рождения у когото Шуня: А вот и нет а вот и не угадал Совсем не день рождения Зубок: А к чему это вы так готовитесь Матильда Леонардовна: Открываем...
38994. Масленица. Прощеное воскресенье 41 KB
  Оборудование: иллюстрации к рассказу о насыщении Господом 5 тысяч человек куклы котенка Коксика Енота Енотовича мышки Шуни волчонка Зубка. Беседа обитателей Шишкиного леса Коксик и зубок рисуют чернобелые рисунки Коксик: Какая скука настроение серое. Зубок: Да все надоело в игры играть не хочется чем бы заняться Коксик: Может в хоккей сыграем Зубок: Да ну холод какой на улице Коксик: Может снеговика слепим Зубок: Лапы морозить не хочется Коксик: Да зима уже надоела Шуня: Что это вы ребята делаете Зубок: Грустим....
38995. О помощи Христа людям. Чудесные исцеления 33.5 KB
  Кто подал нам пример поста в пустыне Иисус Христос После какого события Господь постился После Крещения О каком чуде сотворенном Иисусом Христом мы говорили ранее Как Господь накормил 5 тысяч человек 2 рыбками и 5 хлебами Рассказ о чудесах Господних. Сразу же после чуда с хлебом и рыбой Иисус сказал Своим ученикам войти в лодку и отправиться раньше Него на другой берег пока Он отпустит людей. На рассвете пошел к ним Иисус идя по морю. Но Иисус заговорил с ними и сказал: Ободритесь; это Я не бойтесь.
38996. Доброе дело – бесценное богатство. Лукошко сказок: «Свободный город» 32 KB
  Лукошко сказок: Свободный город. Оборудование: телепередача Свободный город диск Цикл телевизионных передач для детей Доброе слово. Для этого мы побываем в Свободном городе. Почему город называется Свободным О чем мечтал Яков Как горожане спасали город Просмотр телепередачи 12 минут.
38997. Вход Господень в Иерусалим. Тайная вечеря и распятие 36.5 KB
  Эта традиция уходит корнями в те времена когда по земле ходил Господь Иисус Христос. Однажды заболел Его друг – Лазарь а Господь находился в другом селении. Господь прослезился и сказал открыть гроб. Пальмовая ветвь – символ победы в сражениях а Господь победил смерть.