Плагин предназначенный для увеличения изображений вроде - Magic Zoom, коему он нисколько не уступает по функционалу: плавное увеличение, настройка мягкого\разнооттеночного фокуса, внутреннее увеличение зума. Подобное масштабирование изображений можно часто видеть на сайтах разных интернет-магазинов, где нужно более подробно рассмотреть уменьшенное изображение товара, поэтому рекомендуется использовать этот плагин только с изображениями большого формата. Несмотря на всю многофункциональность плагина, сам скрипт весит всего 6Кб, поэтому перегружать сайт не будет. Плагин кроссбраузерный, проверен на работоспособность в IE6 +, Firefox, Chrome, Opera, Safari. Здесь представлена неофициальная версия, о чем будет напоминать надпись в левом нижнем углу изображений (в остальном она ничем не ограничена), чтоб ее убрать - придется купить лицензию (43$) на официальной странице разработчика.
Установка плагина
1. Скачайте архив. Создайте в корне файлового менеджера папку cloud-zoom, и в нее залейте все содержимое архива.
2. Теперь нужно прописать пути к файлам скрипта, стилей и вставить код вызова плагина. Все это прописываем перед : </bode>
3. И теперь чтоб применить функцию увеличения к необходимому изображению, просто добавляете к нему атрибут class="cloudzoom", чтоб оно выглядело примерно так:
Code
<img width="290" class="cloudzoom" src="Ссылка на фото" title="Название фото"/>
Текст из title="" будет выводиться в подпись масштабируемого изображения. По сути это все, скрипт уже будет работать, но он будет работать по стандартным настройкам. Всего же этих настроек, то есть опций которые можно менять по своему усмотрению, более 40. Если вы хотите что-то в работе скрипта изменить, нужно кроме атрибута class="cloudzoom" - добавить еще один атрибут (data-cloudzoom="настройки"), и в нем указывать нужные настройки. Например вот так:
Code
<img width="290" class="cloudzoom" src="Ссылка на уменьшенное фото" title="Название фото"
data-cloudzoom="
zoomImage: 'Ссылка на полное фото',
zoomSizeMode: 'image',
captionPosition: 'top',
zoomPosition: 3,
tintColor: '#FFA1E0',
zoomOffsetX: 15,
zoomOffsetY: 0
"/>
** Настройки нужно перечислять через запятую. ** Настройки можно писать все в одну строку, или как я - переносить каждую на новую. ** Все значения, кроме числовых, true и false - нужно заключать в 'кавычки'.
Значении тех нескольких настроек, что я указал для примера:
zoomImage - ссылка на масштабируемое изображение. По умолчанию, увеличивается то же самое изображение, что указано в img. zoomSizeMode - определяет размер и пропорции окна масштабирования и объектива. При значении image - окно увеличения и пропорции объектива будут соответствовать уменьшенному изображению. captionPosition - положение подписи, top (сверху) или bottom (снизу). По умолчанию - снизу. zoomPosition - определяет положение окна увеличения.
По умолчанию - 3 (справа-вверху). Всего же может быть 15 положений (соответственно указываемых цифрами от 0 до 15). tintColor - цвет при наведении на картинку. По умолчанию - #FFFFFF (белый). zoomOffsetX - Смещение окна масштабирования по горизонтали. По-умолчанию - 15. zoomOffsetY - Смещение окна масштабирования по вертикали. По-умолчанию - 0.
Важно!
При копировании материала указывать ссылку на источник.
Регистрация позволит Вам стать полноценным участником данного проекта.
Вы сможете оставлять комментарии, просматривать скрытый текст, голосовать в опросах и многое другое.
В случае возникновения проблем с регистрацией, напишите администратору сайта.
Соглошения:
Администрация данного сайта не несет ответственность за использование ресурсов доступных
на этом сайте. Вся информация дана исключительно в образовательных целях.
Вся информация, расположенная на этом сайте предназначена только для ознакомительных целей,
авторы не несут ответственности за возможные последствия использования их в целях,
запрещенных Уголовным Кодексом. Вы обязуетесь не применять полученные здесь программы
и информацию в целях, запрещённых УК. Ни при каких условиях и обстоятельствах
ответственность за последствия, которые прямо или косвенно повлекло за собой
использование информации или программного обеспечения, размещенного на этом сайте,
не может возлагаться на авторов сайта и быть основанием для их судебного преследования.
Вы соглашаетесь с указанными условиями, можете приступить к регистрации и дальнейшему
просмотру материалов. В противном случае рекомендуется немедленно покинуть сайт.
Общие правила поведения на сайте:
Начнем с того, что на сайте общаются сотни людей, разных религих и взглядов,
и все они являются полноправными посетителями нашего сайта,
поэтому если мы хотим чтобы это сообщество людей функционировало нам и необходимы правила.
Мы настоятельно рекомендуем прочитать настоящие правила,
это займет у вас всего минут пять,
но сбережет нам и вам время и поможет сделать сайт более интересным и организованным.
Начнем с того, что на нашем сайте нужно вести себя уважительно ко всем посетителям сайта.
Не надо оскорблений по отношению к участникам, это всегда лишнее. Если есть претензии -
обращайтесь к Админам или Модераторам (воспользуйтесь личными сообщениями).
Оскорбление других посетителей считается у нас одним из самых тяжких нарушений и строго
наказывается администрацией. У нас строго запрещен расизм, религиозные и политические
высказывания. Заранее благодарим вас за понимание и за желание сделать наш сайт более
вежливым и дружелюбным.
На сайте запрещено:
- сообщения, не относящиеся к содержанию статьи или к контексту обсуждения
- оскорбление и угрозы в адрес посетителей сайта
- в комментариях запрещаются выражения, содержащие ненормативную лексику, унижающие
человеческое достоинство, разжигающие межнациональную рознь
- спам, а также реклама любых товаров и услуг, иных ресурсов, СМИ или событий, не
относящихся к контексту обсуждения статьи
Давайте будем уважать друг друга и сайт, на который Вы и другие читатели приходят пообщаться и высказать свои мысли.
Администрация сайта оставляет за собой право:
Удалять комментарии или часть комментариев, если они не соответствуют данным требованиям.