+7(495) 505-73-35

+7(495) 505-73-35

+7(495) 505-73-35

Создание сайта фотографа Сергея Ананьева

Тип сайта:

  • Сайт портфолио
  • Личная страница

Использованные технологии:

  • modx
  • html
  • css3
  • jquery
  • bootstrap3

Что сделано:

  • верстка
  • написание скриптов jquery
  • подключение CMS
  • реализация функционала средствами CMS

Задание

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

Функционал сайта

  • Вывод текстовой и графической информации (базовый функционал)
  • Вывод графических элементов (фотогалерея)

Описание работы

Мои мысли по реализации задания:
Сделать сайт на системе управления сайтом Modx Revolution, а в качестве инструмента для вывода фотографий - модуль "Gallery".

Реализация:
Пустился я на поиски аналогичных работ по просторам сети Интернета. Потратив не мало времени понял, что сайты-галереи на Modx+Gallery ни кто не делал, а если и делал, то рецептов не выкладывал. Но, тем не менее, найдя немного зацепок по реализации отдельного функционала решил идею не менять и выполнить задуманное.

Задумка заказчика:
На стартовой странице сайта вывод главного меню в виде выезжающих слева направо квадратиков. Каждый квадратик - это пункт меню. При наведении на один из квадратиков фон сайта меняется, и по щелчку на него осуществляется переход в соответствующий раздел.

Реализация
Перерыв немало материалов, выложенных в Интернете, я понял, что готовой реализации такого появления пунктов меню найти не смогу. Было принято решение написать скрипт на jquery самостоятельно. Выкладываю это решение для системы управления сайтом Modx Revo с применением jquery.
Открыть описание решения новом окне.

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

Реализация
Как и в прошлый раз готового решения не нашлось. Часть вывода была найдена, а реализация просмотра была написана с начала и до конца. Открыть описание решения новом окне.

Посмотреть сайт

Открыть сайт в новом окне.
Комментировать