Самый эффективный техпроцесс для достижения ТОП 1 в Google в 2024 году Получить
logo
💥SEO-продвижение под Google в любых тематиках
💥Вывод в ТОП 1-3 от 1 недели👇
💥https://t.me/AleksSergienkoSEO
👉 Или свяжитесь со мной через форму обратной связи.
 

Cкрипт увеличения картинки при нажатии

Cкрипт увеличения картинки при нажатии

Привет! Бывает так: заходишь на блог, видишь скрин, а что в нём — вообще не видно. Вот и думаешь, что же автор этого поста хотел показать в нём? Но выход есть — скрипт увеличения картинки при нажатии!

Очень классная штука, этот скрипт. Сами смотрите, увеличивает по клику:

Cкрипт увеличения картинки при нажатии

(Кликабельно)

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

Кому будет полезен данный скрипт увеличения картинок?

  1. В первую очередь тем, кто снимает скриншоты с пояснениями. Например, если вы решили снять объёмный скриншот для своей статьи, что — то там подрисовали, для того, чтобы материал был более понятен, закинули в статью, а он просто-напросто в полной мере на странице вашего блога не помещается, поэтому вордпресс его автоматически сжимает, да бы не выйти за границы страницы. А после сжатия видимость, читабельность сильно уменьшается. У меня так ни раз было, поэтому я и решил воспользоваться данным скриптом увеличения картинки без потери качества.
  2. Если вы попросту не хотите в статье размещать объёмные изображения. Бывает так, что нужно показать много изображений в одной статье, но не хочется, чтобы эти изображения занимали много места, тогда установка скрипта — оптимальный вариант! Да и вообще, если не хотите размещать объёмные изображения, тогда данный скрипт просто необходим.

Отлично. Теперь нам нужно установить скрипт на свой сайт. Установка проходит в 3 шага:

  1. Скачиваем скрипт и закидываем в корневую директорию своего сайта.
  2. Устанавливаем необходимый код на свой сайт.
  3. Закидываем рисунок в статью и настраиваем её отображение.

Итак, начнём.

Скачивайте скрипт по этой ссылке. Хорошо, далее нам необходимо установить всё содержимое архива в корневую директорию сайта. Это можно сделать со своего хостинга либо воспользовавшись FTP клиентом.

Вторым этапом у нас идёт установка кода скрипта. Куда устанавливать код?  Можно устанавливать в header.php, footer.php, function.php, index.php, но я обычно устанавливаю в footer.php, перед тегом </body>, чтобы код последним подгружался.

Вот сам код:

<script src=»http://vashsite.ru/simplebox_util.js» type=»text/javascript»></script><script type=»text/javascript»>// <![CDATA[ (function(){ var boxes=[],els,i,l; if(document.querySelectorAll){ els=document.querySelectorAll(‘a[rel=simplebox]’); Box.getStyles(‘simplebox_css’,’http://vashsite.ru/simplebox.css’); Box.getScripts(‘simplebox_js’,’http://vashsite.ru/simplebox.js’,function(){ simplebox.init(); for(i=0,l=els.length;i<l;++i) simplebox.start(els[i]); simplebox.start(‘a[rel=simplebox_group]’); }); } })(); // ]]></script>

А вот, что получилось у меня:

Cкрипт увеличения картинки при нажатии

(Кликабельно)

А теперь самое интересное :) .

Чтобы скрипт увеличивал картинки без потери качества нужно:

1. После закачки изображения в статью необходимо открыть «Параметры изображения» и в пункте «Ссылка» выбрать «Медиафайл«.

Cкрипт увеличения картинки при нажатии

(Кликабельно)

2. И далее в «Параметрах изображения» в пункте «Дополнительные настройки«—> «Отношение» прописываем simplebox и не забываем нажать на кнопку «Обновить» :) .

Cкрипт увеличения картинки при нажатии

(Кликабельно)

Вот и всё. На всё про всё я потратил не более 5 минут! Если кому, что не понятно — пишите.

А может кто-нибудь знает способ проще? Тоже пишите! До скорого!

А вы уже подписались на обновления блога?

С уважением, Александр Сергиенко

Читай этот блог и ты узнаешь много полезного! Читай и ты!
Поделитесь с друзьями:
Комментарии пользователей ( 21)
  1. Артём Черкасов
    в 19:43

    Скрипт реально отличное решение данного вопроса =)

    Ответить
  2. Игорь Черноморец
    в 19:52

    Интересный скрипт. А чем плох плагин? Или вы сейчас скажите, что плагин нагружает сервер? Если да, то этот скрипт и коды не загружают?

    Ответить
    • Александр Сергиенко
      в 11:24

      Плагин не плох, но хочется, чтобы нагрузка на блог была минимальная. Не хочется использовать всякие плагины и нагружать все ту же базу данных Mysql. Ведь код выполняет одну функцию, а в плагинах встроено множество вариантов. Да и при помощи скрипта можно увеличивать отдельные картинки, а не все сразу.

      Ответить
  3. Людмила
    в 20:16

    К сожалению, не удалось по указанной ссылке скачать скрипт. Выдаёт ошибку. У кого -то получилось?

    Ответить
    • Александр Сергиенко
      в 11:25

      Людмила, проверил — всё работает.

      Ответить
  4. Андрей Косолапов
    в 23:00

    Здравствуйте, самое простое решение это вот этот плагин Auto Highslide. По крайней мере мне он очень нравится и менять его на скрипт лично я не хочу. ;(

    Ответить
    • Александр Сергиенко
      в 18:24

      Тоже вариант :)

      Ответить
  5. Ирина
    в 06:05

    Спасибо, очень полезный урок. Действительно, просто и быстро.

    Ответить
  6. Диана
    в 20:09

    У меня тоже есть данная функция. Тоже в виде кода реализована.) Очень удобно. Обычные картинки я ставлю по своему стандарту, в ширину 500 мпс. А остальное делаю на увеличение уже.
    Только у меня дважды картинка открывается, когда жму на увеличение, странно малость.))

    Ответить
  7. Ильдар Тимербаев
    в 18:05

    Да, я тоже пользуюсь такой методикой. Классно работает :)

    Ответить
  8. Vlad
    в 01:22

    Штука хорошая! Может и себе надумаю когда-то поставить… =)

    Ответить
  9. Андрей
    в 19:57

    А не проще установить готовый плагин?

    Ответить
    • Александр Сергиенко
      в 12:30

      Проще, но не лучше.

      Ответить
  10. Михаил
    в 20:42

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

    Ответить
    • Александр Сергиенко
      в 20:57

      Этот скрипт увеличивает картинки до максимально загруженного размера. Т.е. Вы загрузили картинку 700Х700, грубо говоря, а в админке уменьшили её до 200Х200, тогда при нажатии на неё выйдет картинка 700Х700. А при смене шаблона нужно будет заново только код устанавливать, так как файлы в теме заменятся на новые.

      Ответить
      • Евгений
        в 23:27

        Не увеличивает он на 100%, почти на 30% меньше. Я понять не могу почему, может подскажите.

        Ответить
  11. Игорь
    в 21:47

    Надо воспользоваться вашим скриптом,а то плагин нагружает движок.
    Хотя он меня устраивает,пользуюсь плагином Auto Highslide.
    За статью отдельное спасибо.

    Ответить
  12. Николай
    в 02:00

    Удачно выбран размер шрифта для Вашего сайта. Комфортно читать.
    А в примерах увеличивающегося текста шрифт несколько меньше, хотя окно позволяет большее увеличение.
    Хочу вовремя понять, чем хуже переход по ссылке, например, на Радикал фото.

    Ответить
    • Александр Сергиенко
      в 14:25

      Там же скриншот, поэтому и меньше. Изначальный размер такой как при увеличении.

      Ответить
  13. Василиса
    в 17:57

    а если нет дополнительных настроек в медиафайле?

    Ответить
  14. Alex
    в 10:12

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

    Ответить
Ваше Имя
E-mail (не публикуется на сайте)     Поле обязательно для заполнения
Адрес вашего сайта (если есть)
Текст комментария

Статистика сайта блога Александра Сергиенко