ПолезностиУвеличение и уменьшение шрифта (зум) в статьях и блогах для instantcms

Главные вкладки

Увеличение и уменьшение шрифта (зум) в статьях и блогах instantcms

Гугл положительно относится к тем сайтам, где уважают своих посетителей. Т.е. делают все, чтобы просмотр сайта был максимально удобен. Данный хак поможет задержать на сайте людей, которые по тем или иным причинам имеют плохое зрение или же смотрят страничку с устройства с маленьким экраном. Суть проста - в правом верхнем углу страницы появляются значки с плюсиком и минусом. Нажатие на "+" предполагает, что шрифт будет увеличен до удобочитаемого размера. Повторный клик увеличит шрифт по максимуму. "Минус" вернет шрифт к первоначальному размеру. 

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

Открываем файл \templates\_default_\components\com_content_read.tpl
Находим строчку
Код PHP:
  1.  
  2. {* =============== Текст статьи =============================== *}
  3. <div class="con_text" style="overflow:hidden">
  4.  

перед ней вставляем блок со ссылками для изменения шрифта (картинки предварительно надо закинуть в папку /images)

Код PHP:
  1. <div style="text-align:right;">
  2. <a href="javascript:()" onclick="changeFont(0.8)"><img src="/images/zoom_out.png"></a>
  3. <a href="javascript:()" onclick="changeFont(1.2)"><img src="/images/zoom_in.png"></a>
  4. </div>

Далее в конце файла вставляем скрипт

Код PHP:
  1. {literal}
  2. <script>
  3. function changeFont(inc) {
  4. var size = parseFloat($(".con_text").css('font-size'), 10);
  5. $(".con_text").css('fontSize',size*inc+'px');
  6. }
  7. </script>
  8. {/literal}

Как бы готово...

Для других шаблонов все аналогично, только надо править файл в папке с вашим шаблоном и блок с текстом может иметь другой класс, тоесть вместо $(".con_text") вам необходимо написать класс нужного блока.

Можно сделать немного по-другому, и вместо увеличения и уменьшения размера шрифта встроить например три фиксированных размера, и вывести картинки "маленький", "средний", "большой". Тогда скрипт меняем так:

Код PHP:
  1. {literal}
  2. <script>
  3. function changeFont(inc) {
  4. $(".con_text").css('fontSize',inc+'px');
  5. }
  6. </script>
  7. {/literal}

а в блоке со ссылками назначаем нужные размеры:

Код PHP:
  1. <div style="text-align:right;">
  2. <a href="javascript:()" onclick="changeFont(12)"><img src="/images/ваша картинка"></a>
  3. <a href="javascript:()" onclick="changeFont(14)"><img src="/images/ваша картинка"></a>
  4. <a href="javascript:()" onclick="changeFont(18)"><img src="/images/ваша картинка"></a>
  5. </div>

Как настроить зум в блогах. Для блогов все аналогично: открываем файл \templates\_default_\components\com_blog_view_post.tpl находим строчку

Код PHP:
  1. <div class="blog_post_body">{$post.content_html}</div>

перед ней вставляем тот же блок что и для новостей, в конце файла вставляем тот же скрипт, не забыв изменить класс блока на ".blog_post_body" (в стандартном шаблоне):

Код PHP:
  1. {literal}
  2. <script>
  3. function changeFont(inc) {
  4. var size = parseFloat($(".blog_post_body").css('font-size'), 10);
  5. $(".blog_post_body").css('fontSize',size*inc+'px');
  6. }
  7. </script>
  8. {/literal}

Возможные проблемы при внедрении хака.

Некоторые разработчики шаблонов меняют название класса блока статьи. Проверить это Вы можете в файле \templates\ВАША_ТЕМА\components\com_content_read.tpl в строке

Код PHP:
  1. {* =============== Текст статьи =============================== *}
  2. <div class="con_text" style="overflow:hidden">

Здесь название класса - con_text, а у Вас может быть другим... Вот его и надо вписать в скрипте в нужных местах

Код PHP:
  1. {literal}
  2. <script>
  3. function changeFont(inc) {
  4. var size = parseFloat($(".ВОТ ТУТ").css('font-size'), 10);
  5. $(".И ВОТ ЗДЕСЬ").css('fontSize',size*inc+'px');
  6. }
  7. </script>
  8. {/literal}

Для удобства пользователей внизу архив для скачивания. В нем и картинки и файлы...

Скачать: 
Категория: 
Хаки для Instantscms