logo

Блог Алeксандра Сергиенко

Я занимаюсь заработком в Интернете.
Читая мой блог, Вы узнаете насколько это реально.
Я выбрал свой путь. Вы со мной?
 

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

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

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

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

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

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



style="display:block"
data-ad-client="ca-pub-8243622403449707"
data-ad-slot="1319308473"
data-ad-format="auto">

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

  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>

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

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

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

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

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

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

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

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

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

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

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

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


Видеостудия своими руками

Как создать блог в интернете бесплатно?

Обработка голоса для инфобизнесмена
Читай этот блог и ты узнаешь много полезного! Читай и ты!
Поделитесь с друзьями:
Комментарии пользователей ( 19)
  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

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

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