Tooltip для увеличения картинки на jQuery

Автор: Admin    Категория: Магия ЯваСкрипт / jQuery    Теги:  tooltip    Дата: 21-02-2011, 00:08
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
Буду признателен если кто предложит свои варианты использования скриптов.
Пользуемся на здоровье!
Версия для печати
  • 100
     Просмотров: 13 249      Комментариев: 2   

Понравилась новость Tooltip для увеличения картинки на jQuery на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Tooltip для увеличения картинки на jQuery из категории Магия ЯваСкрипт / jQuery

№ 2 Автор: Admin 18 июля 2011 15:16

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: Ярослав
На ucoz неработают оба варрианта.

Юкоз это конструктор, там может и не работать. А может не правильно скрипт устанавливался....


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: Ярослав 17 июля 2011 18:50

 Вот такой я - Ярослав

Ярослав
Гости
комментариев
публикаций

Статус:
На ucoz неработают оба варрианта.

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус