ГлавнаяДизайн блога › Живое увеличение Картинки при Наведении курсора!


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


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

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

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

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

 

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

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

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

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

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

 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><script type="text/javascript" src="http://ПУТЬ ДО ФАЙЛА/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="http://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Rss" /></a></li>
	<li><a href="http://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Twitter" /></a></li>
	<li><a href="http://sozdaiblog.ru"><img src="ПУТЬ ДО КАРТИНКИ" alt="Facebook" /></a></li>
</ul>

 

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

 

 

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

 

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

 

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

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

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

 

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




Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:




24 комментарияА что думаете Вы?

  1. Валерий

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  2. Алексей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  3. Блоgгер

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

    [Ответить]

    Денис Черников ответил:

    Не проверял!

    [Ответить]

  4. Александр

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  5. Денис

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  6. Елена Олейникова

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

    [Ответить]

    Денис Черников ответил:

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

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

    [Ответить]

  7. Алексей

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  8. Сергей

    Денис, что по мне толегче без скрипта средствами ксс сделать, сделал наподобие такого, только еще с поворотом картинки, через transform: scale (1.15) rotate (-5deg) дает увеличение на 15% и поворот на 5 градусов, плавность перехода через transition.

    Проблемы с совместимостью со старыми браузерами отпадает т.к. по статистике в последние полгода на сайт не зашел ни один пользователь со старого браузера.

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

    особенно заметно при повышении трафика, до 100 уников все норм, а потом график нагрузки на проц серва резко идет вверх пропорционально увеличению посещаемости...

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

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

    тебе наверно лучше делать два варианта: со скриптом и на ксс3, а пользователи сами пусть выбирают какой вариант лучше=)

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  9. Людмила

    Спасибо! Очень красиво! Сижу любуюсь! Только вот вопрос, может подскажете:

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

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Людмила!

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

    [Ответить]

  10. Александр

    Очень полезно и увлекательно)))

    Буду пробовать и на своём сайте iCoverses.ru

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  11. Воблеров Константин

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

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  12. Валентин

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

    [Ответить]

    Денис Черников ответил:

    Здравствуйте, Валентин!

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

    [Ответить]

Оставить комментарий!

Вверх