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

Приветствую всех читателей  - 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})

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

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

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

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