Sozdaiblog.ru
Назад

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

Опубликовано: 21.05.2012
Время на чтение: 5 мин
53
3

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

Доброго здравия, всем кто зашёл на — 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>

 

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

 

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

 

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

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

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

 

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

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

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

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

      Здравствуйте!
      Может Вам показалось!
      У меня всё работает и показывает без искажений!
      Это скорее всего, у Вас недозагружаются до конца пикселы!
      Я не наблюдаю никаких искажений!

      • Gri Sant
        Опубликовано: 25.05.2012 Ответить на сообщение

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

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

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

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

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

          • Gri Sant
            Опубликовано: 25.05.2012 Ответить на сообщение

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

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

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

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

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

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

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

  • Надежда Пинчук
    Опубликовано: 26.07.2012 Ответить на сообщение

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

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

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

  • Юлия
    Опубликовано: 04.08.2012 Ответить на сообщение

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

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

      Рад, что Вам понравилось! Плагины мне не нравятся, они блог нагружают и захламляют!
      А скрипт прикольный! Меня буквы даже не смущают, я на картинку смотрю!))))
      Ставьте, если по душе пришлось!

      • Юлия
        Опубликовано: 04.08.2012 Ответить на сообщение

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

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

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

          • Юлия
            Опубликовано: 04.08.2012 Ответить на сообщение

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

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

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

          • Юлия
            Опубликовано: 04.08.2012 Ответить на сообщение

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

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

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

  • Юлия
    Опубликовано: 04.08.2012 Ответить на сообщение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Мимо_проходидил
    Опубликовано: 29.10.2012 Ответить на сообщение

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    Все работает, все ловко, но... есть великая неприятность, если картинка больше 600 пикселей в ширину — она уходит под сайдбар
    Пробовала вставлять скрипт в разные места, и даже после
    /* */
    /* */
    прописывала — никаких изменений
    Пример: http: //www.rasomaxa.hol.es/proverka.html

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

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

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

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

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

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

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

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

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

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

  • Гагик Нерсесян
    Опубликовано: 08.05.2014 Ответить на сообщение

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

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

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

  • Марина Савченко
    Опубликовано: 25.05.2014 Ответить на сообщение

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

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

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

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

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

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