Доброго здравия, всем кто зашёл на — 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>
Вот Вам наглядный пример плавного увеличения картинки при наведении курсора мыши:
Если данная статья была Вам полезна, поделитесь, пожалуйста, ею с друзьями, нажав на одну из кнопочек социальных сетей.
Скажите, а какие способы увеличения знаете Вы?
На сегодня это всё. Ожидайте новых эффектов.
С уважением, Денис Черников!
-
Безопасное ускорение сайта на CloudFlare!
-
Методы обеспечения безопасности сайта на WordPress
- Kpi что это простыми
- Дилер это простыми словами
- Кейс это простыми словами
-
Виды техник продаж
- Декомпозировать это простыми словами
-
Эффективная SEO-оптимизация контента на WordPress: стратегии и инструменты
-
13 Шагов к созданию Шаблона для WordPress!
- Копирайт это простыми словами
Тема интересная, в основном я видел такое решение: щелкаешь по маленькой картинке и по центру экрана появляется ее увеличенное изображение; щелкаешь по большому изображению, оно убирается. На данной странице приведен пример немножко другого плана: когда наводишь мышку на картинку она увеличивается, убираешь мышку, она уменьшается. Данное решение заслуживает внимания, но вот что я здесь заметил. Когда первый раз наводишь на картинку, она увеличивается, мышку убираешь — картинка уменьшается и после этого я вижу, что картинка искажена! И она не такая, как была до первого наведения мышки! Даже страницу обновил, чтобы увидеть, что это так. Видимо, где-то в коде есть недоработка, как говорят — сырой код. Идея хорошая, но плохая реализация.
Здравствуйте!
Может Вам показалось!
У меня всё работает и показывает без искажений!
Это скорее всего, у Вас недозагружаются до конца пикселы!
Я не наблюдаю никаких искажений!
проверял в опере, в этом браузере исажения, а вот в хроме все нормально;
вывод: код не доработан, не во всех браузерах работает
Сейчас смотрел в опере, да действительно в опере обратное искажение!
Я не писал данный скрипт, да и оперой не пользуюсь! Если Вам не удобно найдите другое решение!
Заодно и мне подскажете, я статью дополню вашим примером
Благодарю!
Возможно с оперой какие-то разногласия! Жаль конечно! Но по мне опера не удобный браузер! Это моё личное мнение! Мозила и хром рулят!
все браузеры хорошие и хром и мозила и опера, у каждого есть свои недостатки и преимущества, но опера намного критичней к ошибках в коде, это я уже давно заметил, так что все новшества проверять лучше в ней!
Возможно! Каждый выбирает, что ему по душе! А под всех, тяжело подстроиться! Кстати, попробую сам доделать скрипт! Видимо нужно прописать код на совместимость! Если в опере при возвращении исказится я думаю, это не большая проблема!
Вот черт.И нафига я по совету «друзей» написал сайт на Joomla, а не на WP?
Не расстраивайтесь, следующий проект обязательно делайте на WordPress!
Мне нравится плавное увеличение картинки. Пользуюсь не всегда. А в общем, это прикольно.
Да, Надежда, эффект прикольный, особенно, если надо показать читателям мелкие детали чего-либо!
Нам все время чего-то не хватает…Сначала установила плагин Lightbox Plus, но он смотрится просто элементарно и простите,грубо, по сравнению с таки эффектом увеличения фотографии.Единственный минус мне показалось в том, что колышится весь текст внизу, но впечатление зато обалденное.Тоже хочу-))
Рад, что Вам понравилось! Плагины мне не нравятся, они блог нагружают и захламляют!
А скрипт прикольный! Меня буквы даже не смущают, я на картинку смотрю!))))
Ставьте, если по душе пришлось!
Ни разу в корневую папку не заходила…Нет точнее один раз было дело, после чего пришлось шаблон менять-))Но такой эффект для фотографий меня точно не остановит…Кстати, Денис, может у Вас на сайте есть статья, как сделать, чтобы фотографии с сайта, просто скопированные и закинутые на другой сайт не проявлялись?Это тоже делается через ftp-клиента на хосте.Но как сделать точно не знаю.Подскажите? И есть ли дополнительная нагрузка на сервер сайта, если картинки загруженные на моем просматриваются на другом ресурсе?
Не бойтесь, Юлия! Зайти в корневую папку, всё равно что свет в комнате выключить, каждый день его щёлкаю! Юлия, немного не понял, что значит не проявлялись?
Вы имеете ввиду, чтобы нельзя было скопировать вашу картинку и вставить на другой сайт?
Если картинку будут просматривать сразу 1000 человек, то нагрузка будет, потому-что картинка подгружается с Вашего сервера, а так это мелочи, Вы сами можете закинуть все картинки закинуть в Гугл — Picaso и от туда себе подгружать!
А я сейчас яндекс фотками стала пользоваться, чтобы места много не занимать,и про Picaso уточню, спасибо.
Кстати, тоже вариант, Вы молодчина! Но их нужно не просто ссылками брать, а самим размещать, чтобы их не удалили!
Я сама их и размещаю для своих статей, а потом в виде фотогалереи на сайт.Удобно-))
Я же говорю — молодцом!)
Почему мои комменты попадают в спам?Тоже хочу сказать, как красиво с этим скриптом-).
Где они у Вас попадают в спам? Если на почте, то просто уберите пометку, что они спам! Если в вордпрессе, то это целая статья!
Прикольно Только вся остальная страница уезжает вместе с картинкой. Хотя… может оно и не плохо. Наверно я просто привыкла в таких случаях, что картинка увеличивается поверх текста (а он еще и затемняется иногда). Но так тоже здорово. Надо себе такое сотворить… Очередное спасибо
А мне очень нравиться, по моему мнению круче остальных, которые в новых окнах открываются и пока на кликнешь не закроются! А эта, как живая, всё сама!
Денис, а вот как правильно, просто все по разному советуют, когда картинку в вордпрессе к статье устанавливаешь в поле заголовка писать по английски или можно по-русски? И обязательно ли к фото писать надписи? Просто на сайте по рукоделию у меня получается надпись под картинкой сделать другого цвета, а на сайте по семье текст сливается и не выделяется другим цветом после публикации.
Если это так проблематично, можете заголовок картинки не писать, но в HTML редакторе — «alt» прописать нужно обязательно, внутри ссылки на картинку. Не важно на каком языке. Вы же ключевые слова в тексте транслитом не пишете, нафига тогда к картинке писать.
Эффект очень интересный.
Пишите очень доступно- это не всем дано. Сайт очень полезный, нашел много интересного. Спасибо.
Пожалуйста, Анатолий! Приходите ещё, материал постоянно добавляется!
Денис добрый день,очень нужна твоя помощь,я в компе активный пользователь,но вот с увеличением картинки печально скачал FileZila_3.5.3 помоги как с помощью этой проги сделать мне тоже самое что у тебя приведено в примере,вот пример сайта что то подобное хочу,все надежды на тебя.
Привет, Артём! Скажите, пожалуйста, что у Вас конкретно не получается?
Подписался на твой толковый блог с интересом. Просьба выслать мне пароль к архиву.
Спасибо, за подписку! Высылаю!
А не легче все это с помощью CSS организовать (свойства width и height), а плавность при помощи transition?
Если Вам легче, делайте!
Денис как мне на этот форум или может лично отправить скрипт ошибкой которую мне выдает FileZila.
Артём, поясните по подробнее, что Вы хотите!
Вопрос немного не по теме… а возможно ли заменить фон на котором написан текст на картинку? общий фон сайта я не имею ввиду.
Можно всё что угодно. Всё это делается в style.css.
Почему то не работает ни этот вариант с увеличением картинки, ни любой другой плагин. картинка все равно открывается в новом окне… Шаблон стоит mantra, может ли он влиять на это?
Скачайте себе другой шаблон и в нём попробуйте, если всё получится, то дело в шаблоне!
Дело в шаблоне. У меня есть файл «theloop.php» (живет вместе с single.php). В него и надо добавлять Java-скрипт:
Спс большое аффторру, помог.
Пожалуйста! Рад был помочь.
Все работает, все ловко, но… есть великая неприятность, если картинка больше 600 пикселей в ширину — она уходит под сайдбар
Пробовала вставлять скрипт в разные места, и даже после
/* */
/* */
прописывала — никаких изменений
Пример: http: //www.rasomaxa.hol.es/proverka.html
Воспользуйтесь другим вариантом из другой моей статьи. А вообще, для начала нужно отцентрировать картинку, чтобы она из центра увеличивалась, а не из угла.
Подскажите — какой именно?
Вот — sozdaiblog.ru/dizayn-blog…nii-kursora.html
Спасибо)))
Все сделала верно,проверила каждую точку-запятую, не выходит( картинка отображается маненькая, и увеличивается на полсантиметра, игралась вроде со всеми параметрами. Завтра еще посмотрю, устала)
И еще если картинку вставлять через ссылку — то у меня конфликтует с плагином — Auto Highslide, тоже ничего приятного(
Пожалуйста! Здесь уже каждый должен верстать лично под себя сам.
Здравствуйте!
Большое спасибо Вам за Ваше добродушное отношение к людям, которых Вы не знаете. Я случайно попал на Ваш сайт, скачал, честно говоря не знаю что, хотел проверить действительно можно скачать бесплатно или нет. и мне понравился Ваш сайт и обязательно вернусь, мне интересно Ваш сайт, не за то, что бесплатно можно скачать полезное, а читать интересно и полезного много.
Буду рад видеть Вас у себя в гостях!
Денис,очень интересное предложение. Но у меня к Вам вопрос немного другого содержания. Не знаете как сделать, чтобы видео смотреть на блоге во весь экран браузера? Как вставить ролик с YouTube я знаю, а вот нажав на него, чтоб увеличивался экран не могу найти ответа.
Здесь нужно либо свой плеер использовать, либо довольствоваться Ютубом!
Денис, спасибо за Ваш сайт! В наше время довольно сложно найти ресурс с полезной и хорошо структурированной информацией. Очень импонирует Ваше искреннее и доброжелательное отношение к людям. Очень рада, что нашла Ваш блог, с удовольствие буду заходить в гости.
cURL error 28: Operation timed out after 60003 milliseconds with 0 bytes received