Hi Slider

Назначение программы

Hi Slider – программа предназначена для создания слайд-шоу из картинок и видео, которые демонстрируются в сети Интернет. Программа предлагает много готовых шаблонов по структуре слайдера и его стилю. Каждый выбранный шаблон поддается юстировке по массе параметров, включая типы переходов между изображениями, времени демонстрации изображения, цветовому оформлению, размерам…
Продвинутые программисты скажут, что свой слайдер можно написать на JavaScript. Полупродвинутые скажут, что готовый слайдер можно скачать в виде JavaScript-библиотеки. Они по-своему будут правы.
Hi Slider же предлагает визуально очевидную и очень быструю работу над вашим проектом. А разнообразие шаблонов и настроек удовлетворит любого взыскательного пользователя. Таким образом, программа предназначена для самого широкого круга – от "чайников" до гуру веб-разработки.

Как работать

Работа начинается в добавления изображений в проект. На первом экране также есть несколько популярных параметров – если вы не знаете заранее какие значения они могут принимать, то не обращайте внимание, эти параметры и многие другие можно отредактировать в дальнейшем. Также изображения можно в процессе работы добавлять/убирать.

После этого откроется основной интерфейс программы, где на левой панели вы сможете подобрать шаблон на закладке Template. Чтобы новый шаблон вступил в силу надо по нему совершить двойной клик.
На той же панели, но уже на закладке Skin выбирается стиль (оформление элементов интерфейса) текущего шаблона. Если вам этого окажется мало, то на третьей закладке Custom открываются довольно глубокие настройки. Некоторые будут вам интуитивно понятны. Другие придется осваивать методом тыка, что, кстати, очень интересно. Здесь можно даже управляющие кнопки кастомизировать.

Предпросмотр вашего слайдшоу осуществляется в центральном окне, которое трудно не заметить. Если вам во время работы мешает постоянная смена картинок, то вы ее можете остановить: Custom > Auto Play > False. Перед публикацией можете эту настройку вернуть назад, если вам действительно нужно автоматически прокручивать картинки в проекте.
Предпросмотр также можно производить в браузере, если выбрать браузер в сдвоенной кнопке [Preview] на верхней панели.
Внизу основного окна выстроились в рядок изображения и видео, участвующие в слайд-шоу – это слайды. У каждого слайда есть свои личные настройки – их можно видеть внизу справа. Тут можно задать название и описание слайда, выбрать тип перехода (только для него или для всех разом), назначить какую-то интерактивность в виде гиперссылки или запуска скрипта JavaScript.

Обратите внимание, что изменения произведенные вами на закладке Custom и внизу справа для слайда, вступают в силу в окне предпросмотра только после нажатия на кнопку [Refresh] на верхней панели. Дополнительно обратите внимание, что если вами произведены какие-то корректировки, требующие перегрузки окна предпросмотра, но вы его не перегрузили, то кнопка [Refresh] мигает красным.

Завершающей операцией является публикация проекта по кнопке [Publish]. Любители CMS будут приятно удивлены, что есть возможность сохранить слайд-шоу не только в стандартный веб-набор html, js, css, media файлов, но и в виде плагина к самым популярным CMS: Wordpress, Joomla и Drupal.
Для пользователей, разбирающихся в веб-технологиях, подскажу, что править опубликованный проект также можно: контентные данные находятся в файле index.txt, а настройки хранятся в файле config.js

Рекомендую также сохранять проект в формате программы. В файл этого формата записывается вся метаинформация и сами изображения, что очень удобно для копирования проекта на другой компьютер всего одним файлом. Потом проект можно редактировать и дорабатывать.

Пример

Вот за считанные минуты (картинки и текстовки созданы заранее) я набросал презентацию на 8 слайдов по теме "Инструменты для HTML5 презентаций и слайдшоу". Наведите курсор мыши на слайд для появления кнопок переключения слайдов, или воспользуйтесь левым меню:

На что тут обращаем внимание:

1. В настройках я сразу отключил автономное проигрывание (выставил Auto Play в False), потому что это не просто фотки зырить, а скрин рассматривать и текст читать. Тем не менее, пользователь может запустить автоматическое проигрывание, если наведет мышь на слайд и нажмет кнопку ►. Интервал смены картинок выставлен в 6 сек и автор слайдшоу его может изменить в Custom > Interval of auto play. В режиме Auto Play отведите курсор мыши от слайда, потому что действует настройка остановки проигрывания при наводке курсора на слайд.
2. Слева находится список слайдов с превью и текстами. Текст складывается из Title и Description, которые даются для каждого слайда в отдельности. Кнопками △ и ▽ вы передвигаете только ленту превью, эти кнопки не для перехода между слайдами. Клик на превью – переход на слайд.
3. Также можно последовательно передвигаться между слайдами в режиме выключенного Auto Play, если наводить мышь на слайд и манипулировать кнопками [<] и [>].
4. На весь экран можно раскрыть презентацию, если навести курсор на слайд и нажать кнопку-компьютер в верхнем правом углу.
5. Каждый слайд снабжен гиперссылкой на обзор той программы, которой слайд посвящен.
6. Эффект перехода между слайдами выставлен в значение Random – это значит, что каждый раз эффект будет назначаться случайным образом (список эффектов для Random может быть переназначен).
7. Последнее замечание по текущему варианту презентации - вверху справа находился полупрозрачный водяной знак HiSlider. Чтобы его убрать понадобилось отредактировать файл hisliderCore.js так: заменить opacity:0.15 на opacity:0.00 - именно так, с сохранением количества символов в файле (иначе слайдер перестанет отображаться), ибо в коде есть проверка на количество символов в качестве защиты от редактирования.

Стоит отметить еще раз, что буквально каждый элемент слайдера поддается кастомизации. Есть даже прогресс-бар с настраиваемыми высотой, цветом и прозрачностью, который индицирует время показа слайда в режиме включенного Auto Play.

Шрифты

Естественно, шрифты тоже можно менять, но не очень удобно искать в дереве параметров на закладке Custom. Я поступил так: набрал слово font в поле Search на закладке Custom – в списке параметров остались только те, которые относятся к шрифтам, правда, без указания, в каком месте интерфейса они используются. Но легкий анализ ситуации показал, что в выбранном шаблоне есть 4 места для шрифта: заголовок и описание в ленте превьюшек, заголовок и описание на слайде. Именно в такой последовательности параметры отфильтровались. Поменял их у Font Family.

На локальном компьютере, на котором выбранные шрифты установлены, все отображается корректно. Но у пользователей интернета, которые смотрят вашу презентацию через ваш сайт, нестандартные шрифты не обязаны быть. Это недоразумение легко исправить, если в индексный файл вашей публикации в область между тэгами <head> и </head> вставить строку типа:

<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet">

Здесь мы загрузили с сайта Гугла шрифт Roboto Slab, который используется в нашем слайдере.

Скачать и посмотреть