"Карусель" для портфолио
Аналогичного функционала я видел много разного, рассчитываю на адекватные ценовые предложения.
Учтите, пожалуйста, что это скрипт для простого html-сайта. Поэтому варианты PHP/Perl/MySQL прошу не предлагать. JS/XML/TXT + HTML/CSS в данном случае практически все. flash менее желателен из-за затруднений с индексацией ПС.
Вот описание, как этот функционал видит заказчик:
Термины:
- пассивное состояние: просто открыта страница с этим скриптом. Мышь находится за пределами картинок (превьюшек) скрипта;
- активое состояние: мышь наведена на облсть скрипта.
П.:
В "пассивном" состоянии одновременно должно выводиться 2 превьюшки.
Размер каждой подберите сами, исходя из пропорций существующей страницы. В левом и правом углах – кнопки прокрутки в виде треугольников-стрелок (только, пожалуйста, закруглите углы, также, как это сделано у всех элементов сайта).
По умолчанию эти две превьюшки должны перемещаться медленно – раза в 1.5-2 медленне, чем на сайте http://www.opticsplanet.com/. Кнопки прокрутки можно реализовать двумя способами:
1. При нажатии на стрелку происходит однократное смещение на одну превьюшку, т.е. две превьюшки просто перескакивают (а не проматываются). Например, для того, чтобы перейти от состояния, когда отображаются 2 и 3 превьюшка, к 4 и 5 превьюшке, нужно кликнуть на стрелку 2 раза.
2. При наведении на стрелку скорость промотки увеличивается раза в 2-3 и повышенная скорость сохраняется до тех пор, пока мышку не уберут за пределы стрелки.
То есть мы отслеживаем сразу 2 события - onClick и onHoverMouse (если правильно помню :)
При достижении последней превьюшки, за ней следующей превьюшкой должна быть первая, т.к. прокрутка должна идти без остановки по кругу.
Под каждой превьюшкой располагается текстовая подпись. В идеале - возможност использования html-тэгов. Но в любом случае подпись должна являться ссылкой на сайт, открывающийся в новом окне (у каждой превьюшки может быть свое описание и свой url перехода).
При наведении мышки на эту подпись, она должна каким-то образом реагировать (подсвечиваться или просто менять цвет). Увеличения превьюшки при этом не происходит.
А.:
В активном состояним – при наведении мыши на превьюшку, хочется, чтобы превьюшка увеличивалась раза в 2-3 и принимала вид и размер, как показано на наброске. Внизу картинки должно отображаться название, как и в превью, но тут оно должно быть не в каком-то отдельном блоке, а просто поверх картинки (можно использовать какой-то фон, но необязательно). При наведении мышки на название оно должно реагировать также, как подпись превьюшек при пассивном состоянии. При кликанье на название – соответствующий сайт открывается в новом окне. Для «сворачивания» большой картинки нужно просто вывести мышку за пределы картинки либо предусмотреть кнопку X
Стили всех элементов оставляю на ваше усмотрение. Главное требование – чтобы цвета, используемые в карусели, сочетались с цветовой гаммой сайта. Единственное, в карусели хочется избежать синих цветов, т.к. шапка сайта имеет достаточно большой размер насыщенного синего цвета. Я боюсь, что если в карусели тоже использовать синие тона, то страница будет смотреться очень однотонной. Я бы хотел попробывать сделать карусель в черно-серых и оранжевых тонах (как в нашем лого).
По поводу управления каруселью: обязательно иметь возможность добавлять/удалять/редактировать превьюшки, большие картинки, подписи (названия) и url. Речь не идет о создании полноценного бэкенда - достаточно, если эта информация будет парситься их xml- или txt-файла.
Параметры:
Все настройки скрипта максиально сделать редактируемыми в одном месте. То есть, чтобы исправлением одного параметра можно было поменять скорость прокрутки, двух парметров высоту и ширину превью, двух параметров высоту и ширину полно картинки и т.п.
То есть скрипт должен быть легко настраиваемым.