Плагины        13 мая 2014        545         18

Увеличение картинок в статье блога при помощи плагина Auto Highslide и без него!

Привет всем!

Сегодня мы поговорим об увеличении картинок в статье блога. Причем рассмотрим два варианта, при помощи плагина Auto Highslide, и с помощью несложного скрипта.

плагин Auto Highslide

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

Для тех, кто не в теме поясню. Каждый веб мастер должен понимать, какое влияние на посетителей оказывает изображение в статье. Любая картинка является отличным дополнением к тексту. Изображения придают статьям оригинальность, тематичность, красочность, да и вообще посты с  изображениями читаются намного приятнее, легче и интереснее, нежели пустой «голый» текст.

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

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

Сократив габариты картинки, пользователь не сможет разглядеть те самые важные элементы и в этом случае актуальность поста может потерять свой смысл. Конечно же, для этих целей в визуальном редакторе wordpress при добавлении картинки предусмотрено поле «Ссылка», но такой вывод изображений далеко не идеален:

как увеличить изображение на сайте-1

Оставив ссылку на изображение, вы дадите посетителю доступ к просмотру полного его размера. Но, кликнув по картинке, оригинал изображения откроется в этой же вкладке браузера, закрыв своим фоном весь текст поста, что порой может вызвать неудобства посетителя. К тому же для возврата к самой статье придется воспользоваться функцией браузера в виде стрелочки влево «Вернуться на предыдущую страницу».

Можно немного усовершенствовать просмотр, прописав в готовой ссылке на изображение атрибут target=»_blank», который позволит открывать картинку в новой вкладке браузера. Но опять же, это не совсем удобно в случае, когда человеку необходимо наглядно видеть и сам текст, и его изображение. В этом случае придется метаться от одной вкладки браузера к другой.

Увеличение картинок в статье блога

Я и сам до сегодняшнего дня использовал приведенный выше пример вставки изображений в текст статьи, но теперь все будет иначе. И вы сами увидите, насколько удобнее и интереснее будут выглядеть увеличенные изображения благодаря плагину Auto Highslide или небольшому скрипту, выполняющему аналогичную функцию. О них и пойдет речь в данной статье.

Как увеличить изображение в тексте поста с помощью плагина Auto Highslide

Плагин очень простенький и не имеет настроек. Официальная страница плагина уже не существует, но при необходимости вы сможете скачать его, перейдя по этой ссылке. Распакуйте, архив с плагином, установите его на свой ресурс и активируйте.

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

Как работает плагин Auto Highslide

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

Продемонстрировать работу плагина в данный момент я не могу, т.к. для этих же целей использую скрипт, о котором речь пойдет ниже. Но вы всегда сможете проверить его рабу на своем ресурсе. И хочется сказать еще об одной особенности, которую следует учитывать при использовании Auto Highslide.

Еще раз внимательно посмотрите на предыдущий скриншот! В поле «Ссылка» обязательно должна быть прописана ссылка (путь до изображения)! В противном случае, работа плагина на изображение без ссылки распространяться не будет. Данное правило распространяется только на картинки, требующие увеличения!

Как увеличить изображение в тексте поста с помощью скрипта

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

1. Скачиваем сам скрипт по этой ссылке. Распаковываем архив и открываем папку со скриптом. Скрипт состоит из трех файлов и одной папки, которые вам нужно будет переместить в корневой каталог своего блога:

увеличение картинок на блоге-2

2. Открываем на редактирование файл блога footer.php и перед закрывающимся тегом </body> вставляем этот код:

<script type="text/javascript"
src="http://домен.ru/simplebox_util.js"></script>
<script type="text/javascript">
(function(){ var boxes=[],els,i,l;
if(document.querySelectorAll){ els=document.querySelectorAll('a[rel=simplebox]');
Box.getStyles('simplebox_css','http://домен.ru/simplebox.css');
Box.getScripts('simplebox_js','http://домен.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>

Если файл footer.php и его расположение вызывают у вас вопрос, вам сюда. И обратите внимание на строки под номерами 2, 6 и 7! Вместо слова «домен» вы должны вписать доменное имя своего сайта, в моем случае, это blogiseo.

3. При добавлении изображения в статью блога вам необходимо выполнить несколько простеньких шагов, которые приведены на изображении ниже. Заодно вы сможете проверить работу скрипта, кликнув по картинке:

увеличение изображений в постах

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

1. Переходим в визуальный редактор wordpress и нажимаем на ссылку «Добавить медифайл».

2. Убеждаемся, что в поле «Ссылка» прописана ссылка на изображение и установлен нужный его размер. После чего нажимаем «Вставить в запись».

3. Когда изображение отобразится в визуальном редакторе движка wordpress кликаем по нему левой кнопкой мыши и выбираем пункт «Редактировать», представленный в виде небольшой картинки (см п. 4 на изображении выше).

4. В появившемся окне нажимаем пункт «Дополнительно».

5. В поле «Дополнительные параметры ссылки/Отношение» обязательно прописываем simplebox.

6. Жмем «Обновить».

7. Переходим на свой ресурс, проверяем работу скрипта.

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

Награждение лучших комментаторов апреля 2014 года

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

топ комментаторов

 

  • Иван (22), Мозгунова Ирина (21), Татьяна Саксон (21) — вы награждаетесь денежным призом в размере 100 рублей.
  • Максим (11), Александр Иванович (10), Николай (9) — вы получаете от меня по 50 рублей.

Благодарю всех комментаторов моего блога! Спасибо что вы есть и что следите и комментируете мой ресурс! Присылайте номера своих WMR — кошельков и я перечислю вам ваши заслуженные призы!

На этом на сегодня все! Желаю всем удачи! Всех с прошедшими праздниками, пока и до новых встреч!

—>Подписаться на обновления блога<—

Как вам статья? А вы используете эффект увеличения картинок? Возможно вам известны более легкие пути реализации данной функции? Жду ваших комментариев!

С уважением, Николай Коротков

Обсуждение: 18 комментариев
  1. Здравствуйте, Николай! А я пользуюсь плагином Lightbox Plus ColorBox. Очень просто. Левой мышкой кликаешь на изображение, и в этом же окне оно открывается в том размере, который вы указывали при его загрузке.

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Александр

    А еще мне нравится вот этот — Special Text Boxes
    Красиво выделяет текст в 3D.

    [Ответить]

    Александр Иванович

    Здравствуйте Александр!
    Я тоже про такой плагин не слышал.Поэтому спасибо Вам за наводку.

    [Ответить]

    Ответить
  2. Здравствуйте Николай! Я также пользуюсь плагином,все очень просто и быстро!А интересно,почему вы выбрали пользоваться именно скриптом а не плагином, ведь использовать плагин для этой функции на много проще и кроме того, если что то пошло не так,то просто деактивируешь его и ссе,идешь спокойно пить кофе, а в вашем случае нужно будет лесть во все файлы,вспоминать где эти коюы,осторожно удалять(чтобы не дай бог удалить лишние теги) Неужели единственная причина этому, это из-за нагрузки на сервера? 😮

    [Ответить]

    Николай Коротков

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

    [Ответить]

    Александр Иванович

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

    [Ответить]

    Ответить
  3. Николай,поэтому я и спросил какая причина вашего предпочтения скриптам? Из-за нагрузки или есть дополнительные достоинства скриптов?

    [Ответить]

    Николай Коротков

    Игорь, основная причина — нагрузка на хостинг.

    [Ответить]

    Ответить
  4. Меня заинтересовал размер картинок. Если ставить один размер. То в статье и после открывания картинка будет одинакового размера. А если при редактировании поставить средний размер, то при открывании она будет большего размера.
    А чтобы при открывании она была вообще большая надо загружать большую картинку, А при редактировании установить размер чуть меньше, чтобы был эффект увеличения!!!думая логически. А Большие картинки увеличивают время загрузки статьи. Где же выход ?
    Есть ли смысл в использовании этого скрипта. Может лучше загружать небольшие картинки(как обычно)без этого эффекта увеличения и всё и они не будут грузиться долго.

    [Ответить]

    Николай Коротков

    Олег, я специально в статье акцентировал внимание на том, что есть «определенная категория картинок», которая нуждается в данном эффекте. Само собой эффект увеличения для каждой картинки не нужен!

    [Ответить]

    Ответить
  5. Николай
    Спасибо за поздравления.
    Мой Яндекс кошелёк 410011464211019
    С уважением А.И.

    [Ответить]

    Александр Иванович

    Николай!
    Деньги пришли, но получить их, как и всякий перевод
    с Яндекс кошелька уже не смогу

    [Ответить]

    Ответить
  6. пользуюсь на блоге таким же скриптом для увеличения картинок. никаких вопросов вообще не возникает…просто принципиально не ставлю плагины, кроме SEO-плагинов, дабы не засорять WP и не тормозить загрузку страниц. в данный момент использую всего 5 постоянно работающих плагинов, да и то думаю еще от одного избавиться — минглефорум. ❗

    [Ответить]

    Ответить
  7. Нет необходимости объяснять — насколько важно, чтобы все картинки, все скриншоты были читабельны, ведь в них заключается львиная доля информации, которую несёт статья.
    У меня картинки увеличиваются при кликаньи на них, но они замещают текст. а ведь правда было бы удобнее — и читать текст и одновременно рассматривать картинки. Нужно попробовать применить данный метод.

    [Ответить]

    Ответить
  8. Максим:

    Николай
    Спасибо за полезную и доходчиво написанную статью.
    Буду применять, пока конечно, при помощи плагина Auto Highslide.
    А потом и до кода доберусь.

    [Ответить]

    Ответить
  9. Здорово. Помнится, какое-то время меня очень волновал вопрос увеличения изображений. Потом этот вопрос отпал сам собой. Теперь на будущее буду знать, как это реализовать. спасибо!
    А тут, оказывается, меня еще приз за апрель дожидается 🙂 Приятно. Надеюсь, я за ним не сильно запоздала? Если еще нет, мой кошелек вебмани R379491199861 😳

    [Ответить]

    Николай Коротков

    Татьяна, нисколечко не опоздали! Деньги перевел на кошелек.

    [Ответить]

    Ответить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Поиск по блогу
Подписка на обновления

Введите Ваш e-mail:

rss

twitter

 google

Интересная информация
Хостинг от Макхост

ВОСПОЛЬЗУЙТЕСЬ ПРИ РЕГИСТРАЦИИ КУПОНОМ "blogiseo" И ПОЛУЧИТЕ 3 МЕС. БЕСПЛАТНОГО ИСПОЛЬЗОВАНИЯ ХОСТИНГА ПО ТАРИФУ МАК-10.