27.04.10 
Чаще всего интернет-магазины прибегают к такому рода решению - увеличению картинки товара при наведении курсора. Это очень удобно - товар не занимает много места на странице, больше моделей попадают в окно браузера, при наведении клиент сможет рассмотреть товар в полном объеме.
Этот урок будет посвящен скрипту Zoomi, как оптимальному инструменту увеличения изображений при наведении курсора мыши.
Заходим на оф. сайт , скачиваем скрипт zoomi.js, после чего скачиваем библиотеку JavaScript .
На странице между <head> и </head>:
<script type="text/javascript" src="js/jquery-1.4.min.js"></script> # либо другая версия jquery
<script type="text/javascript" src="js/zoomi.js"></script>
Есть 2 варианта представления увеличенных картинок.
1. После <body> в теле документа пишем:
<img class="zoomi" src="путь к изображению" width="длинна" height="высота">
# в этом случае будет увеличиваться уменьшенное при помощи стандартных атрибутов HTML изображение до тех размеров, какое оно есть.
2. После <body> пишем:
<img class="zoomi" src="путь к изображению" alt="путь к увеличенному изображению">
# в таком случае при наведении на исходное изображение будет показываться картинка из alt.
Вот таким образом можно легко создавать хорошие галереи фотографий, товаров и прочее.
Попытался воспользоваться такой модификацией Zommi (код их страницы):
[code]
[/code]
но не заработало – страница просто прокручивается к началу с адресом http…/*.html#
Страница сделана в DW8.
[Ответить]
Май 12th, 2010 at 11:12
Проверьте, точный ли указали адрес в a href, правильно ли подгружаются скрипты. Попробуйте проделать это на сервере.
[Ответить]
Спасибо. В Опере всё отлично, а эксплорере както-то лажёво.
[Ответить]
Эксплоре нормально, если без таблицы.
[Ответить]
Скрипт доработал – все заработало. Только надо в нем прописывать функцию для всех изображений. Вынес ее в отдельный файл и прописал для 20 изображений. Вот только все труды зря
– т.к. в тег Alt прописывается путь к большому изображению, то, соответственно, маленькое не будет индексироваться поисковыми системами. Если бы по тегу title индексировалось… А так смориться очень даже замечательно и экономия кода существенная.
[Ответить]
Как доработать скрипт чтобы изображения появлялись по центру?
[Ответить]
Июль 19th, 2010 at 14:13
Взять другой скрипт.
[Ответить]
Что значит взять другой скрипт? У меня все работает, только изображение появляется справа и внизу, тоесть совсем не там где должно быть!
[Ответить]
Январь 15th, 2011 at 15:14
Скорее всего это можно настроить в стилях скрипта.
[Ответить]
Спс за урок но хочу спростиь куда сохранять zoomi.js? Заранее спасибо!!!!!
[Ответить]
Январь 15th, 2011 at 15:11
В любое удобное вам место, только не забудьте правильно прописать путь к файлу.
[Ответить]
Спс болшое !!!!!!
[Ответить]
Здраствуй админ хочу попрасить если тебя не за труднит, покажи пожалуиста теги HTML с плавно увеличиваюшими картинками плз!!!!!!!!» Заранее спс!
[Ответить]
Январь 20th, 2011 at 14:24
В самом сообщении код есть.
[Ответить]
Январь 31st, 2011 at 5:03
Нет в сообщение. Имеется ввиду плавность увеличения как выставить ?
[Ответить]
Февраль 5th, 2011 at 13:55
Не знаю, может где-то можно выставить.
[Ответить]
Предлагаемый скрипт отличен. И 30 баксов для коммерческих целей не дорого.
Спасибо огромное. Теперь бы хотелось научится делать поисковик по своему сайту!
[Ответить]
Май 12th, 2011 at 11:20
Он же бесплатный, разве нет?
[Ответить]
У меня ничего не получилось. Пробывал и в таблице и с пустого листа=(
А диферамбы написал не туда=( а в увеличение по клику. Там всё отлично.
[Ответить]
Покажите пожалуйста рабочий код… я измучался
[Ответить]
Май 12th, 2011 at 11:21
Скоро будет готов пример.
[Ответить]
Май 15th, 2011 at 13:00
Сделал пример в двух вариантах, описанных в статье по этой ссылке, а тут можно скачать архив с примером. На фон и стили не обращайте внимание.
[Ответить]
Здравствуй!
У меня проблема со скриптом. При наведении увеличенная картинка прилепает к правой части экрана, а маленькая стоит на там где нужно.
Как сделать чтоб увеличенная картинка появлялась закрывая собой маленькую? как у тебя на примере.
Уже всё перепробывал, думаю косяк в сайте, но какой? может что с position связано.
[Ответить]
Шас попробовал, в обычном html всё работает как надо, а вот на сайте с div картинка съезжает. Помоги пожалуйста! может какой css прописать?
[Ответить]
Июль 20th, 2011 at 12:48
Скорее всего проблема с css, вы указываете position на картинку?
[Ответить]
Спасибо, все работает! Может подскажете как можно сделать так чтобы увеличеное изображение уменьшалось не только при убирании крсора, но и принудительно по клику мышки?
Если рядом много изображений, то увеличеное изображение закрывает собой рядом стоящие миниатюры, и по-порядку их смотреть не получается
[Ответить]
Декабрь 25th, 2011 at 17:26
Здравствуйте, хз. Если скрипт это позволяет, посмотрите доступные решения на сайте производителя.
[Ответить]
… [Trackback]…
[...] Informations on that Topic: lospirata.ru/web-stati/uvelichenie-izobrazheniyakartinki-pri-navedenii.html [...]…