Tooltip для увеличения картинки на jQuery
Применяем Tooltip для увеличения картинки на jQueryПредлагаю вашему вниманию два интересных скрипта для увеличения картинок на сайте при наведении, которые мне попались когда я хотел реализовать на своём сайте увеличение картинки при клике или наведении курсора.
Первый скрипт я подсмотрел на ЭТОМ сайте, скрипт универсальный, с очень широкими настройками и возможностями, там, на сайте можно посмотреть другие возможности скрипта.
Но этот скрипт уже настроен на вывод всплывающего окошка с картинкой полного размера при наведении на уменьшенную версию этой картинки.
Скрипт работает вместе с библиотекой jQuery. Сам скрипт можно взять ЗДЕСЬ
Реализация:
В шапку подключаем библиотеку jQuery с яндекса:
<head>
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
</head>Сам скрипт подключаем в тело страницы:
<body>
<script type="text/javascript" src="globaltooltip.js"></script>
</body>Привычным способом вставляем картинку, картинке добавляем класс zoomfoto для работы скрипта и задаём исходный размер:
<img class="zoomfoto" src="imf/img1.jpg" alt="" height="150" width="150" />Вот и всё.
Плюсы - широкие возможности настройки универсального скрипта, применяется легко просто добавлением нужного класса картинке.
Минусы - тормозит в IE и Safari, большой вес.
Смотреть пример Tooltip для увеличения картинки GLOBAL TOOLTIP
Скачать готовый пример Tooltip для увеличения картинки GLOBAL TOOLTIP
-------------------------------------------------------------------
Второй скрипт работает на библиотеке jQuery и плагине jQuery Tooltip plugin 1.3
Этот скрипт выводит полноразмерную картинку при наведении на её уменьшенную копию.
Реализация:
В шапку подключаем скрипты, CSS стили для оформления всплывающего окошка с картинкой и функцию:
<head>
<link rel="stylesheet" href="tooltip.css" type="text/css" />
<script type="text/javascript" src="http://yandex.st/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.tooltip.js">
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function($){
var images = $('a[rel*=webgallery_tooltip]');
images.click( function () {
return false;
}).tooltip({
delay: 0,
fade: 250,
top: 20,
left: 1,
track: true,
showURL: false,
bodyHandler: function() {
var alt = $(this).children('img').attr('alt');
var img = '<div class="cdwebgallery_tooltip"><img src="'+this.href+' "alt="" /><span>' + alt + '<\/span><\/div>';
return img;
}
});
});
//]]>>
</script>
</head>Картинка вставляется внутрь ссылки, в ссылку прописывается путь к полной картинке и для работы скрипта добавляется атрибут rel="webgallery_tooltip". А в атрибуте картинки src пишем путь к уменьшенной копии картинки и, если нужно вывести описание картинки, в атрибуте alt пишем нужный текст:
<a href="img/12.gif" rel="webgallery_tooltip"><img src="img/12.gif" alt="Описание" width="169" height="100" /></a>Вот и всё.
Плюсы - работает во всех браузерах.
Минусы - пока не заметил.
Смотреть пример Увеличение картинки на jQuery Tooltip plugin
Скачать готовый пример Увеличение картинки на jQuery Tooltip plugin
Буду признателен если кто предложит свои варианты использования скриптов.
Пользуемся на здоровье!
Понравилась новость Tooltip для увеличения картинки на jQuery на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Tooltip для увеличения картинки на jQuery из категории Магия ЯваСкрипт / jQuery
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Магия ЯваСкрипт / jQuery ⋙ Стильные табы вкладки на CSS и jQuery v1.6.1
- Меню навигации ⋙ Новое горизонтальное lava lamp меню на jQuery 1.6.1
- Магия ЯваСкрипт / jQuery ⋙ Простой слайдер на jQuery
- Магия ЯваСкрипт / jQuery ⋙ Плавное изменение прозрачности любого элемента на jQuery
- Магия ЯваСкрипт / jQuery ⋙ Плавное увеличение картинки при наведении на jQuery
- Магия ЯваСкрипт / jQuery ⋙ Кнопка Выключить свет на jQuery для онлайн кинотеатров
- Магия ЯваСкрипт / jQuery ⋙ jQuery Corner замечательный плагин оформления скругления углов для библиотеки jQuery
- Магия ЯваСкрипт / Разные скрипты ⋙ Плавное изменение прозрачности элемента на javascript
- Магия ЯваСкрипт / Разные скрипты ⋙ Tooltip всплывающая подсказка
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
