Tooltip для увеличения картинки на jQuery
21-02-2011, 00:08. Разместил: Admin
Применяем 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
Буду признателен если кто предложит свои варианты использования скриптов.
Пользуемся на здоровье!
Вернуться назад