1

Тема: Версия сайта для слабовидящих.

Приветствую, сообщество!
Пару недель назад собрал версию сайта для слабовидящих и решил поделиться! Мало ли кому пригодиться!

Кстати, данная версия сайта для слабовидящих - это "разговорчивая" версия. Она проговаривает операции, которые проделываете на сайте. Нооо, есть такая штука, что бывает не срабатывает (У меня дома работает, а на работе нет. Не знаю с чем связано. Может с кодеками какими или ещё что-то! Разберётесь! )


В общем, начнём!
=================

Первое, в файл шаблона template.php вставить данный код:

<link rel="stylesheet" href="<?=$prefflp; ?>/assist/css/bvi.min.css" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="<?=$prefflp; ?>/assist/js/bootstrap.min.js"></script>
<script src="<?=$prefflp; ?>/assist/js/jquery.min.js"></script>
<script type='text/javascript' src='<?=$prefflp; ?>/assist/js/responsivevoice.min.js?ver=1.5.0'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var bvi = {"BviPanel":"1","BviPanelBg":"white","BviPanelFontSize":"18","BviPanelLetterSpacing":"normal","BviPanelLineHeight":"normal","BviPanelImg":"1","BviPanelImgXY":"1","BviPanelReload":"0","BviPanelNoWork":"0","BviPanelText":"\u0412\u0435\u0440\u0441\u0438\u044f \u0434\u043b\u044f \u0441\u043b\u0430\u0431\u043e\u0432\u0438\u0434\u044f\u0449\u0438\u0445","BviPanelCloseText":"\u041e\u0431\u044b\u0447\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u0441\u0430\u0439\u0442\u0430","BviFixPanel":"1","ver":"Button visually impaired version 1.0.3","BviCloseClassAndId":"","BviTextBg":"#e53935","BviTextColor":"#ffffff","BviSizeText":"14","BviSizeIcon":"30","BviPlay":"1"};
/* ]]> */
</script>
<script src="<?=$prefflp; ?>/assist/js/bvi-panel.js"></script>
<script src="<?=$prefflp; ?>/assist/js/bvi.min.js"></script>
<script src="<?=$prefflp; ?>/assist/js/js.cookie.js"></script>

Затем, распаковать архив vision.tgz на свой локальный компьютер. Потом берём оттуда папку assist и закидываем в корень вашего сайта.

Затем, в любом месте шаблона, где хотите выводить блок информации пропишите код:

<a href="#" class="bvi-panel-open"><p class="a btn-radius red-btn"><i class="fa fa-eye-slash"></i> Версия сайта для слабовидящих</p></a>

Кстати, класс: <p class="a btn-radius red-btn"> - это мой класс, прописанный в *.css, который отвечает за цвет кнопки. Font-awesome отвечает за вывод картинки, который отображается вместе с текстом на кнопке переключения.

Скачать: vision.tgz

Кому нужны красивые и цветные кнопки, можете скачать их тут: Цветные кнопки

З.Ы. Если кому интересно, можете глянуть мой Дэмо/прототип проекта

Всем спасибо и удачи! ;)

Отредактировал Dysha (03-07-2017 11:20:47)