yandex_exam

Это публичный репозиторий для хранения экзаменационного задания Школы Разработки Интерфейсов (ШРИ) Яндекса.

Для разработчиков интерфейсов

Реализовать галерею картинок. Альбом с картинками и видео для примера http://yadi.sk/d/qs3ySEz-3PcmM.

Технические требования:

jQuery 1.9

Поддержка только последних версий браузеров:

MSIE 9 (MSIE 10 не надо)
FF 19
Yandex браузер 1.5
Опера 12

Как должно работать:

При первой загрузке — появляется первая картинка из альбома
При движении курсора в окне браузера — появляются стрелки (слева/справа) и исчезают при уходе курсора от окна браузера
Галерея картинок расположена внизу окна браузера и появляется при наведении курсора
Галерея картинок внизу должна прокручиваться колесиком мыши или тачпадом
Большая картинка должна быть отцентрирована по вертикали и горизонтали
Если картинка меньше ширины или высоты окна браузера она должна ужиматься пропорционально
Дизайн стрелочек — на ваш вкус. Можно сделать как у нас, можно сделать свой
Анимацию желательно сохранить
Количество предазгруженных и предзагружаемых картинок в процессе листания, а также прелоадеры картинок больших/маленьких — на ваш вкус
Возможно вы захотите использовать API Яндекс.Фоток
Запоминать текущий кадр, так чтобы при перезагрузке страницы мы попали на ту же картинку

Разработку вести на github. Результатом экзаменационного задания должна быть ссылка на репозиторий.

Установка:

Скопировать содержимое репозитория командой:

git clone https://github.com/tormozz48/yandex_exam.git

Открыть файл index.html в браузере

Инициализация галереи производиться созданием объекта класса Gallery

new Gallery({
 	url: 'http://api-fotki.yandex.ru/api/top/',
		order: 'updated',
		limit: 50,
		thumbnail_size: 'XXS',
		image_size: 'L',
		switch_duration: 300
	});

Здесь можно указать параметры конфигурации:

url - адрес загрузки изображений с Yandex API
order - порядок выдачи (см. документацию Yandex API)
limit - количество изображений для загрузки (0 - 100)
thumbnails_size - размер для уменьшенных изображений. Рекомендованные значения ('XXXS' и 'XXS')
image_size - размер основного изображения. Рекомендованые значения ('M', 'L', 'XL')
switch_duration - время переключения между изображениями

Достоинства:

Выполнение всех поставленных условий задачи
Простая DOM модель
Возможность задания параметров конфигрурации при инициализации галереи
Дополнительное переключение изображений с помощью клавиатурных стрелок
Использование механизма $.Deferred для организации выполнения асинхронного кода
Разделение модели и представления
Использование Yandex API
Документированый код

Недостатки:

Использование дополнительного плагина jquery.scrollTo https://github.com/flesler/jquery.scrollTo
Использование чужого решения для организации прокрутки галереи с помощью колеса мыши
Одновременная загрузка всех thumbnails
Возможное поддтормаживание перелистывания картинки
Возможно не совсем оптимальное использование $.Deferred

Возможные улучшения:

Инициализация галереи внутри определенного контейнера и превращение в полноценный jQuery плагин с возможность вызова типа $('#elem').gallery()
Реализация центрирования превью выбранного изображения внутри контейнера при смене изображения
Ленивая загрузка изображений с использованием индикаторов загрузки
Возможность задания дополнительных параметров для инициализации галереи, например для конфигурирования типов анимаций и направлений движения при смене изображений в галерее

tormozz48 / yandex_exam