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


Как сделать Плавное увеличение картинки при наведении курсора?


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

Доброго здравия, всем кто зашёл на — Sozdaiblog.ru!

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

Вы узнаете, как это сделать и что для этого понадобиться.

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

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

Я ещё подумал – «Вот автору делать нечего, устроил тут минимализм!», но, после того, как я направил курсор мыши на первую миниатюру, случилось чудо.  Произошло плавное увеличение картинки.

Короче, мне этот эффект очень понравился и я захотел узнать, как сделать такое на своём блоге.

Просидев половину дня в Интернете, у меня получилось найти решение данной задачи, и я хочу поделиться ответом с Вами, дорогие мои читатели.

Как обычно, мы будем работать с самым распространённым движком в блогосфере — WordPress.

Если Вы не знаете, как установить WordPress на хостинг, то обязательно почитайте все статьи по этой теме.

 

Как сделать плавное увеличение картинки при наведении курсора мыши.

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

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

Обычно, это делается с помощью ftp-клиента.

Если, Вы не умеете пользоваться ftp-клиентом, советую прочитать статью – «Как настроить ftp-клиент».

 

Пояснение:

Корневая папка – это та папка, в которой находятся все файлы нашего движка WordPress

 

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

Потратьте 2 минутки личного времени и получите необходимый пароль.

После подписки напишите мне на почту, и я его Вам вышлю!

 

  • Адрес почты:  SOZDAIBLOG@yandex.ru.

 

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

Скорее всего, это будет какая-то статья. Тогда, Вам будет нужно найти в папке с темой оформления файл, отвечающий за вывод одиночных записей. Обычно это – single.php.

Открыть его и вставить вот такой скрипт:

 

<script type="text/javascript" src="/imagesize.js"></script>

 

Затем, во время написания очередной статьи, переключаетесь из визуального редактора в HTML-редактор и вставляете в текст любое изображение, при помощи следующего кода:

 

<div><img class="expando" alt="" src="Ссылка на изображение" width="150" height="110" border="0" /></div>

 

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

 

 

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

Скажите, а какие способы увеличения знаете Вы?

На сегодня это всё. Ожидайте новых эффектов.

 

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




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




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

  1. Gri Sant

    Тема интересная, в основном я видел такое решение: щелкаешь по маленькой картинке и по центру экрана появляется ее увеличенное изображение; щелкаешь по большому изображению, оно убирается. На данной странице приведен пример немножко другого плана: когда наводишь мышку на картинку она увеличивается, убираешь мышку, она уменьшается. Данное решение заслуживает внимания, но вот что я здесь заметил. Когда первый раз наводишь на картинку, она увеличивается, мышку убираешь — картинка уменьшается и после этого я вижу, что картинка искажена! И она не такая, как была до первого наведения мышки! Даже страницу обновил, чтобы увидеть, что это так. Видимо, где-то в коде есть недоработка, как говорят — сырой код. Идея хорошая, но плохая реализация.

    [Ответить]

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

    Здравствуйте!

    Может Вам показалось!

    У меня всё работает и показывает без искажений!

    Это скорее всего, у Вас недозагружаются до конца пикселы!

    Я не наблюдаю никаких искажений!

    [Ответить]

    Gri Sant ответил:

    проверял в опере, в этом браузере исажения, а вот в хроме все нормально;

    вывод: код не доработан, не во всех браузерах работает

    [Ответить]

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

    Сейчас смотрел в опере, да действительно в опере обратное искажение!

    Я не писал данный скрипт, да и оперой не пользуюсь! Если Вам не удобно найдите другое решение!

    Заодно и мне подскажете, я статью дополню вашим примером

    Благодарю!

    [Ответить]

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

    Возможно с оперой какие-то разногласия! Жаль конечно! Но по мне опера не удобный браузер! Это моё личное мнение! Мозила и хром рулят!

    [Ответить]

    Gri Sant ответил:

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

    [Ответить]

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

    Возможно! Каждый выбирает, что ему по душе! А под всех, тяжело подстроиться! Кстати, попробую сам доделать скрипт! Видимо нужно прописать код на совместимость! Если в опере при возвращении исказится я думаю, это не большая проблема!

    [Ответить]

  2. Gosha_trade

    Вот черт.И нафига я по совету «друзей» написал сайт на Joomla, а не на WP?

    [Ответить]

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

    Не расстраивайтесь, следующий проект обязательно делайте на WordPress!

    [Ответить]

  3. Надежда Пинчук

    Мне нравится плавное увеличение картинки. Пользуюсь не всегда. А в общем, это прикольно.

    [Ответить]

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

    Да, Надежда, эффект прикольный, особенно, если надо показать читателям мелкие детали чего-либо!

    [Ответить]

  4. Юлия

    Нам все время чего-то не хватает...Сначала установила плагин Lightbox Plus, но он смотрится просто элементарно и простите,грубо, по сравнению с таки эффектом увеличения фотографии.Единственный минус мне показалось в том, что колышится весь текст внизу, но впечатление зато обалденное.Тоже хочу-))

    [Ответить]

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

    Рад, что Вам понравилось! Плагины мне не нравятся, они блог нагружают и захламляют!

    А скрипт прикольный! Меня буквы даже не смущают, я на картинку смотрю!))))

    Ставьте, если по душе пришлось!

    [Ответить]

    Юлия ответил:

    Ни разу в корневую папку не заходила...Нет точнее один раз было дело, после чего пришлось шаблон менять-)) Но такой эффект для фотографий меня точно не остановит...Кстати, Денис, может у Вас на сайте есть статья, как сделать, чтобы фотографии с сайта, просто скопированные и закинутые на другой сайт не проявлялись?Это тоже делается через ftp-клиента на хосте.Но как сделать точно не знаю.Подскажите? И есть ли дополнительная нагрузка на сервер сайта, если картинки загруженные на моем просматриваются на другом ресурсе?

    [Ответить]

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

    Не бойтесь, Юлия! Зайти в корневую папку, всё равно что свет в комнате выключить, каждый день его щёлкаю! Юлия, немного не понял, что значит не проявлялись?

    Вы имеете ввиду, чтобы нельзя было скопировать вашу картинку и вставить на другой сайт?

    Если картинку будут просматривать сразу 1000 человек, то нагрузка будет, потому-что картинка подгружается с Вашего сервера, а так это мелочи, Вы сами можете закинуть все картинки закинуть в Гугл — Picaso и от туда себе подгружать!

    [Ответить]

    Юлия ответил:

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

    [Ответить]

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

    Кстати, тоже вариант, Вы молодчина! Но их нужно не просто ссылками брать, а самим размещать, чтобы их не удалили!

    [Ответить]

    Юлия ответил:

    Я сама их и размещаю для своих статей, а потом в виде фотогалереи на сайт.Удобно-))

    [Ответить]

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

    Я же говорю — молодцом!)

    [Ответить]

  5. Юлия

    Почему мои комменты попадают в спам?Тоже хочу сказать, как красиво с этим скриптом-).

    [Ответить]

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

    Где они у Вас попадают в спам? Если на почте, то просто уберите пометку, что они спам! Если в вордпрессе, то это целая статья!

    [Ответить]

  6. Анастасия

    Прикольно :) Только вся остальная страница уезжает вместе с картинкой. Хотя... может оно и не плохо. Наверно я просто привыкла в таких случаях, что картинка увеличивается поверх текста (а он еще и затемняется иногда). Но так тоже здорово. Надо себе такое сотворить... Очередное спасибо :)

    [Ответить]

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

    А мне очень нравиться, по моему мнению круче остальных, которые в новых окнах открываются и пока на кликнешь не закроются! А эта, как живая, всё сама!

    [Ответить]

  7. Svetlana

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

    [Ответить]

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

    Если это так проблематично, можете заголовок картинки не писать, но в HTML редакторе — «alt» прописать нужно обязательно, внутри ссылки на картинку. Не важно на каком языке. Вы же ключевые слова в тексте транслитом не пишете, нафига тогда к картинке писать.

    [Ответить]

  8. Анатолий

    Эффект очень интересный.

    Пишите очень доступно- это не всем дано. Сайт очень полезный, нашел много интересного. Спасибо.

    [Ответить]

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

    Пожалуйста, Анатолий! Приходите ещё, материал постоянно добавляется!

    [Ответить]

  9. Артем

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

    [Ответить]

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

    Привет, Артём! Скажите, пожалуйста, что у Вас конкретно не получается?

    [Ответить]

  10. Алексей

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

    [Ответить]

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

    Спасибо, за подписку! Высылаю!

    [Ответить]

  11. Мимо_проходидил

    А не легче все это с помощью CSS организовать (свойства width и height), а плавность при помощи transition?

    [Ответить]

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

    Если Вам легче, делайте!

    [Ответить]

  12. Артем

    Денис как мне на этот форум или может лично отправить скрипт ошибкой которую мне выдает FileZila.

    [Ответить]

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

    Артём, поясните по подробнее, что Вы хотите!

    [Ответить]

  13. Алена

    Вопрос немного не по теме... а возможно ли заменить фон на котором написан текст на картинку? общий фон сайта я не имею ввиду.

    [Ответить]

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

    Можно всё что угодно. Всё это делается в style.css.

    [Ответить]

  14. Алена

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

    [Ответить]

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

    Скачайте себе другой шаблон и в нём попробуйте, если всё получится, то дело в шаблоне!

    [Ответить]

    Владимир ответил:

    Дело в шаблоне. У меня есть файл «theloop.php» (живет вместе с single.php). В него и надо добавлять Java-скрипт:

    [Ответить]

  15. Wadim

    Спс большое аффторру, помог.

    [Ответить]

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

    Пожалуйста! Рад был помочь.

    [Ответить]

  16. RasomaXa

    Все работает, все ловко, но... есть великая неприятность, если картинка больше 600 пикселей в ширину — она уходит под сайдбар

    Пробовала вставлять скрипт в разные места, и даже после

    /* */

    /* */

    прописывала — никаких изменений

    Пример: http: //www.rasomaxa.hol.es/proverka.html

    [Ответить]

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

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

    [Ответить]

    RasomaXa ответил:

    Подскажите — какой именно?

    [Ответить]

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

    Вот — sozdaiblog.ru/dizayn-blog...nii-kursora.html

    [Ответить]

    RasomaXa ответил:

    Спасибо)))

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

    И еще если картинку вставлять через ссылку — то у меня конфликтует с плагином — Auto Highslide, тоже ничего приятного (

    [Ответить]

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

    Пожалуйста! Здесь уже каждый должен верстать лично под себя сам.

  17. Гагик Нерсесян

    Здравствуйте!

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

    [Ответить]

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

    Буду рад видеть Вас у себя в гостях!

    [Ответить]

  18. Марина Савченко

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

    [Ответить]

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

    Здесь нужно либо свой плеер использовать, либо довольствоваться Ютубом!

    [Ответить]

  19. Елена

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

    [Ответить]

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

Вверх