KorniloFF-ScriptS ©

Здравствуйте, Гость!
Page
Menu

Экранная лупа для текста

AnythingZoomer2

Примеры работы скрипта, выложенные разработчиком на Github

Download


Данный скрипт позволяет эмулировать экранную лупу. Автор скрипта Chris Coyier, его сайт указан внизу этой статьи. Скрипт является плагином библиотеки jQuery, которую я очень редко использую в своих работах, но оставил в данном случае, поскольку автор написал скрипт именно так.

Коды скрипта я не переделывал, они полностью оригинальны и можно скачать последнюю версию здесь.

Идеология внесенных мной дополнений в запуск и настройку скрипта очень проста. Вот основные тезисы:
  • Локальность использования - Нет никакого смысла нагружать броузер обработкой всей страницы, когда, как правило, увеличения требуют лишь некоторые блоки. Для этого мной введена возможность легкого добавления блоков, требующих увеличения лупой, путем добавления их тегам класса class="toZoom". То есть, любой блочный элемент обладающий таким классом автоматически начинает обрабатываться плагином AnythingZoomer.
Настройки увеличения

Код настроек блока увеличения текста:

Для работы примера этот код не нужен, но позволяет регулировать степень увеличения текста экранной лупой.


Пример с текстом
Возвращение

И здесь душа унынием объята. Не ласков был мне родины привет; Так смотрит друг, любивший нас когда-то, Но в ком давно уж прежней веры нет. Сентябрь шумел, земля моя родная Вся под дождем рыдала без конца, И черных птиц за мной летела стая, Как будто бы почуяв мертвеца! Волнуемый тоскою и боязнью, Напрасно гнал я грозные мечты, Меж тем как лес с какой-то неприязнью В меня бросал холодные листы, И ветер мне гудел неумолимо: Зачем ты здесь, изнеженный поэт? Чего от нас ты хочешь? Мимо! мимо! Ты нам чужой, тебе здесь дела нет! И песню я услышал в отдаленье. Знакомая, она была горька, Звучало в ней бессильное томленье, Бессильная и вялая тоска. С той песней вновь в душе зашевелилось, О чем давно я позабыл мечтать, И проклял я то сердце, что смутилось Перед борьбой - и отступило вспять!..


Пример с изображением
small rushmore

При этом никто не говорит, что к блоку с изображением нельзя добавить текст.

Настройки увеличения на изображения не действуют.

Инструкция по установке

  1. Подключить многострадальную jQuery , если она еще не подключена в вашем сайте.
  2. Скачать и загрузить к себе на сервер библиотеку jquery.anythingzoomer.js. В моем случае она расположена по относительному пути /out_files/AnythingZoomer/js/jquery.anythingzoomer.js. Если в вашем случае он будет дргугим, нужно это учесть и внести соответствущие коррективы в дальнейший код.
  3. Скачать и загрузить файл стилей anythingzoomer.css, необходимый для корректной работы библиотеки. В моем случае она расположена по относительному пути /out_files/AnythingZoomer/css/anythingzoomer.css. Остальное - см. пункт выше.
  4. Выбрать блоки, нуждающиеся в увеличении экранной лупой и присвоить им class="toZoom".
  5. Прописать код скрипта, подключающий библиотеку (показан ниже)
Скрипт для подключения и настройки jquery.anythingzoomer.js
Исходный код всего примера:
Комментарии к теме ( 0 )

Комментариев пока нет.

Дабавить комментарий