Сверстать страницу с превью картинок на основе имеющихся файлов

Надо сверстать страницу для вставки её html-кода (через админку интернет-магазина)во вкладку ОБИВКА.

Есть 3 папки с картинками обивок (видов тканей) диванов 

Папка A содержит 46 фото разных обивок.

Папка B содержит 140 фото разных обивок.

Папка C содержит 79 фото разных обивок.

• Исходя из содержимого папок надо сделать так же как тут: http://innoshop.hu/furninova-paso-doble-night-ulogarnitura (вот поясняющий скрин http://imgur.com/a/H0qv3 ). То есть каждый квадратик-превьюшка соответствует картинке из папок A/B/C. Данные на вышеуказанном сайте сильно устарели, просто скопировать оттуда содержимое не получится.
• Маленькие квадратики-превьюшки размером ~10x10 px надо сделать крупнее - такого же размера и ФОРМЫ как тут http://i.imgur.com/JNGsMLm.jpg (БЕЗ скругления углов).
• При наведении на превьюшку должно всплывать увеличенное фото обивки размером 300x300px (надо будет отдельно сделать картинки размером 300x300px, а не уменьшать в ширину-высоту имеющиеся фото обивок, т.к. они много весят).
• Подпись под всплывающим увеличенным фото обивки надо сделать точно такой же как название файла фото обивки (без расширения .jpg).

Использовать уже имеющиеся файлы стилей и все вставлять туда.

Надо использовать всю ширину вкладки ОБИВКА (700px).

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

Отсутствие блокировки скриптов разными рекламорезками.

Наличие минимум 5 отзывов по вёрстке на веблансере (без отзывов даже не пишите)!