Sozdaiblog.ru
Назад

Живое увеличение Картинки при Наведении курсора!

Опубликовано: 18.11.2012
Время на чтение: 7 мин
24
44

Увеличение Картинки при Наведении курсораПриветствую всех читателей  - Sozdaiblog.ru!

Сегодня я покажу, как оживить изображения на Вашем ресурсе создав эффект увеличения картинки при наведении курсора мыши.

В одной из своих статей я уже затрагивал данную тему. Оставшись довольными, одни из моих постоянных читателей попросили показать схожие способы реализации увеличения картинки при наведении курсора.

Поэтому, по многочисленным  просьбам трудящихся предлагаю ознакомиться с ещё одним красивым способом увеличения изображений на сайте.

 

Увеличение картинки при наведении курсора.

Для начала, Вам нужно скачать архив с исходниками кода и распаковать его в любое удобное для Вас место.

В архиве, будут два файла — imgbubbles.css и imgbubbles.js.

Файл — imgbubbles.js, нужно закинуть в корневой каталог Вашего ресурса, а содержимое imgbubbles.css скопировать и вставить в файл style.css активной темы оформления.

Теперь, открываем файл header.php и перед закрывающим тегом </ head>, вставляем следующий код:

 


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="https://ПУТЬ ДО ФАЙЛА/imgbubbles.js"></script>

<script type="text/javascript">
jQuery(document).ready(function($){
        $('ul#orbs').imgbubbles({factor:1.75, speed:100}) //add bubbles effect to UL id="orbs"

})
</script>

 

Главное, не забывайте прописывать пути до файлов!!!

Итак, половину дел мы сделали.  Осталось подготовить нужные нам  изображения.

Возьмите любые понравившиеся Вам картинки, закиньте на свой сервер и скопируйте абсолютный путь до каждого изображения. Это легко сделать с помощью ftp-клиента.

Затем, нужно скопировать код ниже, вписать абсолютный путь до каждой картинки, добавить необходимую ссылку направления читателей (при клике по картинке) и вставить его в то место, где Вы хотите увидеть свои изображения:

 

<ul id="orbs" class="bubblewrap">
        <li><a href="https://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Rss" /></a></li>
        <li><a href="https://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Twitter" /></a></li>
        <li><a href="https://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Facebook" /></a></li>
</ul>

 

DEMO версия полученного результата плавного увеличения картинки при наведении курсора мыши:

 

ДЕМО

 

Так же, Вы можете самостоятельно изменять скорость и увеличение изображений, изменив значения параметров скрипта, который мы установили перед тегом </head>:

 

$('ul#orbs').imgbubbles({factor:1.75, speed:100})

 

На сегодня, это всё, но впереди Вас ожидает масса полезных плюшек, которыми я периодически делюсь со всеми читателями моего блога.

Чтобы не пропустить новую раздачу полезностей, предлагаю подписаться на обновления блога, для получения уведомлений о выходе нового материала на свой адрес электронной почты.

Скажите, друзья, понравился ли Вам данный способ увеличения картинки при наведении курсора?
До следующих встреч…

 

С уважением, Денис Черников!

Поделиться
Похожие записи
Комментарии:
  • Валерий
    Опубликовано: 18.12.2012 Ответить на сообщение

    Интересная штука, оживляет блог!

    • Денис Черников
      Опубликовано: 18.12.2012 Ответить на сообщение

      Да, интересный такой живой эффект!

  • Алексей
    Опубликовано: 18.12.2012 Ответить на сообщение

    Согласен с Валерией. Денис, а как ограничить размер картинки при наведении или она принимает максимальный и минимальный размер, то есть в статье первоначально она должна быть какого-то определенного размера, а при наведении увеличивалась пропорционально. Например со 100*100 на 300*300? Но за пост спасибо, жду новый постов.

    • Денис Черников
      Опубликовано: 18.12.2012 Ответить на сообщение

      Так я специально показал кусок кода, где скорость там и размер! Значение 1.7 меняете на нужное и всё!

  • Блоgгер
    Опубликовано: 18.12.2012 Ответить на сообщение

    Для спрайтов применимо?

    • Денис Черников
      Опубликовано: 18.12.2012 Ответить на сообщение

      Не проверял!

  • Александр
    Опубликовано: 18.12.2012 Ответить на сообщение

    А нельзя ли файл скрипта разместить в футере до закрывающего тега /body? Ведь стараются скрипты разместить там, чтобы сайт грузился быстрее.

    • Денис Черников
      Опубликовано: 18.12.2012 Ответить на сообщение

      Экспериментируйте, всё в Ваших руках!

  • Денис
    Опубликовано: 21.12.2012 Ответить на сообщение

    Спасибо, попробуем, мелочи, но оживить проект такими мелочами можно:)

    • Денис Черников
      Опубликовано: 21.12.2012 Ответить на сообщение

      Пожалуйста! Обязательно попробуйте. Красивый и интерактивный дизайн сайта, это тоже сила!

  • Елена Олейникова
    Опубликовано: 23.12.2012 Ответить на сообщение

    Красивый эффект, конечно, но что-то больно много телодвижений делать нужно. По мне проще плагин Auto Highslide установить. Картинки размещаются обычным способом, потом щелкаешь по ней — она увеличивается.

    • Денис Черников
      Опубликовано: 23.12.2012 Ответить на сообщение

      Елена, любая вещь, которую мы никогда не пробовали и не знаем кажется нам дремучим лесом или чем-то невозможным. На самом деле, после того как мы разберёмся в том или ином моменте, то сами порой смеёмся над тем, что нам казалось необъятным космосом.
      Да, плагинами многие вещи сделать проще, но используя обычные гаджеты, которые придумал и сделал кто-то другой, мы никогда не сможем понять и достичь определённых вещей, оставаясь пожизненным потребителем и уж ни как не творцом и не создателем нового чуда.

  • Алексей
    Опубликовано: 11.01.2013 Ответить на сообщение

    А как сделать, чтобы только опредиленые картинки увеличивались, а не все на сайте?

    • Денис Черников
      Опубликовано: 11.01.2013 Ответить на сообщение

      Так делайте по одной, прикручивайте к ней id и будет увеличиваться та которой вы прописали id.

  • Сергей
    Опубликовано: 12.01.2013 Ответить на сообщение

    Денис, что по мне толегче без скрипта средствами ксс сделать, сделал наподобие такого, только еще с поворотом картинки, через transform: scale (1.15) rotate (-5deg) дает увеличение на 15% и поворот на 5 градусов, плавность перехода через transition.
    Проблемы с совместимостью со старыми браузерами отпадает т.к. по статистике в последние полгода на сайт не зашел ни один пользователь со старого браузера.
    думаю через ксс будет лучше чем через скрипт, т.к. добавляется еще один файл на загрузку, а файл таблицы стилей итак подгружается, да и скрипты дают нагрузку на серв...
    особенно заметно при повышении трафика, до 100 уников все норм, а потом график нагрузки на проц серва резко идет вверх пропорционально увеличению посещаемости...
    может конечно я и параноик, но предпочитаю использовать стили ксс вместо скриптов если это возможно... да и скрипты между собой нередко конфликтуют, не каждый пользователь обладает навыками программирования чтобы исключить конфликты...
    у меня например jqwery вступает в конфликт с mootools, от мутулза отказываться не хочу, т.к. на нем работает мега меню, снимать конфликты довольно муторно, вот и делаю все на ксс...
    тебе наверно лучше делать два варианта: со скриптом и на ксс3, а пользователи сами пусть выбирают какой вариант лучше=)

    • Денис Черников
      Опубликовано: 12.01.2013 Ответить на сообщение

      Сергей, если захотеть можно и с CSS3 и весь сайт под HTML5 переверстать и полной валидности добиться. На всё нужно время,а его постоянно не хватает. Тем более, что каждый день появляются новые возможности и технологии. Читатель увидел, что есть такая или иная возможность, взял и сделал, а если потребуется спер мега разработка или переработка, то каждый может изучить основы программирования и сделать то, что его душа пожелает. Если завтра появиться CSS4 или CSS5, то мне что, весь сайт переверстать нужно будет и ещё десять вариантов привести в пример.

  • Людмила
    Опубликовано: 24.01.2013 Ответить на сообщение

    Спасибо! Очень красиво! Сижу любуюсь! Только вот вопрос, может подскажете:
    У меня вместо Вашик кругленьких кнопочек — маленикие фоточки 80×60, которые увеличиваются в 4 раза. При этом увеличившаяся фотка закрывает собой те, что слева, а вот правые остаются на ней — не красиво. Можно ли и как сделать так, чтоб большое изображение было всегда сверху всего?

    • Денис Черников
      Опубликовано: 24.01.2013 Ответить на сообщение

      Пожалуйста, Людмила!
      Чтобы сделать то о чём Вы спрашиваете, нужно порыться в вашем шаблоне, а я этого сделать увы не могу. Единственное, точно помню, что сделать это можно.

  • Александр
    Опубликовано: 04.03.2013 Ответить на сообщение

    Очень полезно и увлекательно)))
    Буду пробовать и на своём сайте iCoverses.ru

    • Денис Черников
      Опубликовано: 04.03.2013 Ответить на сообщение

      Пожалуйста, если что стучитесь!

  • Воблеров Константин
    Опубликовано: 09.03.2013 Ответить на сообщение

    Скажите пожалуйста, на джумле этот плагин тоже пойдет?

    • Денис Черников
      Опубликовано: 09.03.2013 Ответить на сообщение

      Не могу дать точный ответ я не проверял!

  • Валентин
    Опубликовано: 17.03.2013 Ответить на сообщение

    Здравствуйте, Денис. У меня вопросик немного не в тему. Есть ли какие нибудь курсы, по общему редактированию шаблонов вордпресс (я имею ввиду чисто внешний вид, сайтбар, футер, шапку сайта, саму главную страницу)? Мне нравится стандартная тема twenty ten, по своей функциональности, но по внешнему виду не очень.

    • Денис Черников
      Опубликовано: 17.03.2013 Ответить на сообщение

      Здравствуйте, Валентин!
      Таких курсов я не встречал. Сам делаю всё собственноручно набираясь по крупицам опыта в Интернете.

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.