Установка скрипта «Версия сайта для слабовидящих»

Введение


Пользователи Вашего сайта нуждаются в версии для слабовидящих?

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

    Особенности:
  • простота в установке,
  • бесплатен,
  • несколько вариантов отображения,
  • несколько языковых версий,
  • возможность указать необходимый набор размеров шрифтов,
  • возможность включить/отключить управление отображения изображениями,
  • возможность включить/отключить управление фоном сайта,
  • возможность изменить внешний вид панели управления версией для слабовидящих.

Первый шаг: установка


Этап 1. загрузка файлов на сайт


Зайдите в Панель управления » Файловый менеджер

Создайте папку «js» в корне сайта, после чего скопируйте в эту папку файл «uhpv-full.min.js», находящийся в папке «скрипты».

Этап 2. установка скрипта


Перейдите в Панель управления » Дизайн » Управление дизайном (шаблоны)

И установите на все страницы Вашего сайта после тэга «<body>» следующий код: 
<style>
 #hpvgd,.h-mdiv,.h-mdiv2,.h-ldiv,.h-rdiv {background:#EAEAEA; color:#6D6D6D;}
 #hpvgd {width:100%; z-index:100; width:100%; border-bottom:2px solid rgb(230,230,230);}
 .h-mdiv {display:none; position:relative; margin:auto; text-alegn:center;}
 .h-mdiv2 {display:none; position:fixed; margin:auto; text-alegn:center; width:400px; height:200px;}
 .h-ldiv {float:left; padding:7px 10px 7px 0px;}
 .h-rdiv {position:absolute; top:7px; right:0px; text-align:right;}
 .h-ni {display:none !important;}
 a.hcmaf {color:red; margin-left:5px; font-size:20px; font-weight:bold;}
 a.h-anl {color:#2a72cc;}
 a.h-al {color:#ED664B;}
 .h-fi {font-weight:bold; border-radius:50%; padding:0px 8px; margin-right:5px; font-size:19px;}
 .h-background-1 {color:#fff !important; background:#000 !important;}
 .h-background-2 {color:#000 !important; background:#fff !important;}
</style>
<script src="/js/uhpv-full.min.js"></script>
<script>
var 	uhe 	= 2,
	lng 	= 'ru',
	has 	= 0,
	imgs 	= 1,
	bg 	= 1,
	hwidth 	= 0,
	bgs 	= ['1','2'],
	fonts 	= ['17','19','21'];
$(document).ready(function(){uhpv(has)});
</script>
После установки кода, Вам необходимо установить кнопку для включения версии: 
<span id="uhvb" style="display:none;"><a href="javascript://" onclick="uvcl()"><b>Версия для слабовидящих</b></a></span>
Установить кнопку Вы можете в любом удобном месте.

Установить скрипт сразу на все страницы сайта Вы можете воспользовавшись функцией «Быстрая замена», либо с помощью «Глобальных блоков»
Подробнее о Быстрой замене - http://forum.ucoz.ru/forum/24-31884-1
Подробнее о Глобальных блоках - http://forum.ucoz.ru/forum/31-32296-1

Второй шаг: настройка


Этап 1. Настройка работы скрипта

Для управления скриптом не требуется никаких специальных знаний и навыков.
Чтобы "управлять" нужно внести изменения в настройки:
«uhe» - указывает вариант "запуска" версии
1 - после включения версии панель управления будет выведена вверху страницы,
2 - после включения версии панель управления будет выведена вверху страницы и "закреплена" (панель будет двигаться вместе со страницей при прокрутке, находясь всегда в поле зрения посетителя)
«lng» - указывает язык панели управления (изменяются все текстовые надписи).
Возможные варианты: «ru», «en», «ua»
«has» - указывает на необходимость запускать версию для слабовидящих автоматически при входе на сайт
0 - версия будет запускаться только если пользователь нажмёт на кнопку включения,
1 - версия будет запускаться всегда, при входе на любую страницу сайта (кнопка "Выключить" будет отсутствовать)
«imgs» - позволяет включить/отключить возможность управлять изображениями (изображением считается тэг «img», изображения выводимые через CSS не управляются данной функцией)
0 - посетитель не может включать/выключать изображения
1 - посетитель может включать/выключать изображения
«bg» - позволяет включить/отключить возможность управлять фоном сайта
0 - посетитель не может изменять фон сайта
1 - посетитель может изменять фон сайта
«hwidth» - ширина панели управления версией относительно общего содержимого сайта.
0 - панель будет "растянута" на всю ширину страницы (width:100%;)
Если Ваш сайт имеет фиксированную ширину (например 1200 пикселей) - установите значение этой ширины (без "px")
«bgs» - список настроек для выбора фона сайта
Вы можете указать в стилях несколько вариантов фона сайта (используя класс «.h-background-N», где N - номер фона.
Не рекомендуется указывать больше 2-4 вариантов фона.
«fonts» - список размеров шрифта, для использования в версии для слабовидящих.
Рекомендуется указывать не больше 3-4 вариантов шрифта, от 16 до 25 пикселей.

Этап 2. Настройка внешнего вида панели управления версией

Используя стили Вы можете изменить внешний вид панели управления версией.
Например первая строчка в стилях отвечает за общий внешний вид панели (фон панели и цвет текста).
Стили «a.h-anl» и «a.h-al» отвечают за цвет ссылок в панели (размер шрифтов и кнопки включения/отключения).

Установка завершена. Если у Вас возникли вопросы, которые не затрагивались в документации, Вы можете задать их в комментариях к скрипту.