Нужно разработать код Фотогалереи для последующего самостоятельного размещения на страницах сайта (сайт с табличной HTML-верской) tipgranit.ru.
Внешний вид Фотогалереи подобен Галерее на сайте auto.ru например тут https://auto.ru/cars/used/sale/toyota/corolla/1066503742-4d1f5e/
http://tipgranit.ru/agent_/index.php (пока оставил на сайте это кошмар))))
При открытии страницы сайта с кодом Фотогалереи в ее главное окно выводится первое фото. Остальные фото размещены в полосе превьюшек под главным, но курпнее, чем в оригинале
(точнее это подберем при разработке).
Если фоток в полосе много, то под ней выводится полоса прокрутки. Иначе - полоса прокрутки не выводится. Полоса - "общего вида" - "красота" не требуется.
При навердении курсора на главное фото на нем слева и справа выводятся знаки "стрелки" для просмотра фоток "по кругу" и знак "лупа".
При наведении курсора или клике по мелкому фото превью из полосы под главным фото оно выводится в главное окно.
При клике по главному окну (вне стрелок), оно выводится "на весь экран" (лупа) в увеличенном виде поверх остального изображения сайта (как в оригинале).
Как и в оригинале, слева и справа от увеличенного фото такие же стрелки позволяют листать все фото, но уже
в увеличенном виде "по кругу". Под увеличенным изображением также располагаются фото превьюшек (как в оригинале).
Если их много - то и полоса прокрутки. В правом верхнем углу увеличенного изображения - кнопка-крестик для закрытия увеличенного окна.
Необходимо предусмотреть возможность размещение на странице одного окна галереи или нескольких окон на одной странице "в столбец" (для нескольких подобных товаров).
Необходимо предусмортреть возможность изменения размера окна галереи под размер таблицы в верстке страницы, например , если сделать HTMK-таблицу
из трех столбцов, поместить галерею в средний столбец, а в 1 и 3 столбцах поместить текст с
общим описанием/содержанием страницы - обрамление фотогалереи.
Пока примем для работы "рабочие" размеры изображений на странице (даны примером "для справки" - обсудим позднее в ТЗ):
- главное фото галереи 600х 400 пкс
- превью 192х130 пкс (белые поля между превью, 3 шт. превью с полями кратны 1 главному)
- максимальное изображение открывается на весь экран с превью, превью тут же 192х130 пкс.
- исходные изображения (на вход скрипта): максимальный размер 4272х2848 (12 Мпкс), минимальный - 600х400 пкс
Скрипт должен обрабатывать (масштабировать и кадрировать) входные изображение до "рабочих".
Возможно, если это будет слишком долго происходить "динамичекски" - при показе галерея будет "тормозить" (особенно для больших исходных фото),
то можно предусмотреть механизм, когда скрипт после первого показа изобржений (первой их обработки) сливает обработанные файлы на сайт
в поддиректорию этого товара, чтобы в след раз обращаться для показа уже к "готовым" фото.
Я сам после создания страницы в 1-й раз буду "долго" просматривать новую галерею, заставляя скрипт подготовить новые изображения к просмотру.
Под полосой фоток на ширину окна галереи необходимо разместить 3 строки - поля "подписей" в котором может быть выведено:
1) Текстовое поле 1 (описание продукта).
2) Поле с таблицей цен N x M (макс 11 x 11 ячеек).
3) Текстовое поле 2 (скидки, пояснение к ценам).
В увеличенном виде галереи "на весь экран" эти поля не показываются.
Управление размещением информации в галерее.
Для новой группы товаров я завожу на сайте новую папку с файлами новой страницы этой группы товаров.
На новой странице я создаю HTML-таблицу в ячейки которой буду размещать "строку с кодом вызова"
в это место страницы окон фотогалереи c товарами.
Соответственно, я создам HTML-таблицу размерностью до 1 (столбец) х N (строк) шириной больше размера окна галереи указанного выше.
В этой же папке с новой странцей для фотогалереи №1 я создам папку, допустим, "tovar1" куда помещу фогографии
для первой фотогалереи товара 1 с именами 1.jpg, 2.jpg, 3.jpg ... и т.д.
В соответствии с этими именами скрипт будет сортировать порядок вывода фоток в галерее.
В этой же директории лежит файл price.xls (в формате Microsoft Exel 97/2000/XP).
В нем в перврй строке в ячейке 1A лежит текст для "Текстовое поле 1". Это как правило описание товара.
В во второй строке в ячейках от 2A до 2K лежит 1 строка таблицы цен. Это как правило размер тиража.
В третьей строке в ячейках от 3A до 3K лежит 2 строка таблицы цен. Это как правило цена за экземпляр.
Размерность таблицы: от 2 строки х 2 столбца, до 2 строки х 11 столбцов.(Тираж/цена + от 1 до 10 цен/тиражей. В файле примера дано 5 цен/тиражей)
В четвертой строке в ячейке 4A лежит текст для "Текстовое поле 2". Это как правило условия продажи скидки и т.п.
Остальные поля *.xls файла игнорируются. Если такого файла *.xls в директории нет - нет и полей под галереей.
Если в файле поле пустое - то оно не выводится - размер всего блока уменьшается на размер отсутствующих полей.
Для товара № 2 будет создана такая же поддиректория "tovar2" и т.п. Т.е. в новой директории группы товаров будут индивидуальные поддиректории
для каждого товара группы с фотками и файлом price.xls lkz для этого товара группы. (И, возможно, с обработанными скриптом готовыми файлами для показа)
Я должеен буду завести на новой странице для новой "группы товаров" HTML-таблицу нужного размера и конфигурации
и разместить в ее ячейках галереи для этих товаров.
Код скрипта можно (если нужно) каждый раз переписывать в новую директорию с новым товаром.
Управление скриптом.
Скрипт со всеми библиотеками должен быть независим и полностью располагаться на хосте.
Должны управляться размеры блока фотогалереи (для масштабтрования под размер таблицы на странице)
хотя бы тремя размерами "большая", "средняя", "маленькая". Эти размеры уточним в работе. Пример размеров я дал выше.
Должны управляться шрифт, его размер и цвет в полях подписи под галереей.
Управление может быть устроено в виде хорошо описанных переменных вынесенных в начало какого-либо *.ini файла.
