Успей получить мощнейшую SEO технику в 2023 году бесплатно. Получить
logo
Хотите за 3 месяца научиться стабильно
зарабатывать на фрилансе от 50 000 - 150 000 рублей
чистой прибыли ежемесячно даже если СЕЙЧАС нет знаний?
Свяжитесь со мной через форму обратной связи.
 
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 (не публикуется на сайте)     Поле обязательно для заполнения
Адрес вашего сайта (если есть)
Текст комментария

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