Код для больших изображений

Если вы уже пользовались пакетной загрузкой изображений,то наверняка видел, какой код добавляется в сообщение при этом (смотреть надо в простом редакторе или нажав на кнопку "Источник" в расширенном):

<a href="http://img1.liveinternet.ru/images/attach/c/3/76/333/76333417_large_glock_dj_Sochi_2011.jpg" rel="li-bigpic" target="_blank"><img src="http://img1.liveinternet.ru/images/attach/c/3/76/333/76333417_glock_dj_Sochi_2011.jpg" width="700" height="466" alt="glock_dj_Sochi_2011 (700x466, 58Kb)" /></a>

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

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

Рассмотрим первую часть: <a href="http://img1.liveinternet.ru/images/attach/c/3/76/333/76333417_large_glock_dj_Sochi_2011.jpg" rel="li-bigpic" target="_blank">
- <a - начала кода
- href="ссылка" - ссылка на большое изображение
- target="_blank" - открыть ссылку в новом окне
- > - конец кода
Всё, как в обычном коде ссылке. Но внимательно посмотрите и найдите, что забыл. Верно: rel="li-bigpic". Это надпись говорить сайту ЛиРу, что имеется фотография большего разрешения. И что её можно будет посмотреть. Как? Читайте ниже.

Часть вторая. Обычный код изображения.
<img src="http://img1.liveinternet.ru/images/attach/c/3/76/333/76333417_glock_dj_Sochi_2011.jpg" width="700" height="466" alt="glock_dj_Sochi_2011 (700x466, 58Kb)" />
- <img - начала кода изображения
- src="ссылка" - адрес изображения
- width="число" - ширина изображения
- height="число" - высота изображения
- alt="текст" - текст, который будет показываться, когда изображение не загружено
- /> - конец кода
Самое интересное тут - значение wight и height. Как вы понимаете, на ЛиРу возможно только 2 размера предварительных изображений (150 или 700). Но вам ничего не мешает сделать это изображение любого другого размера, загрузить его отдельно и вставить в код.

И часть 3 - окончания кода ссылки - </a>.

С кодом разобрались. Теперь посмотрим, как это будет работать

Как это будет работать, очень сильно зависит от вашего браузера. В некоторых браузерах этот код вообще работать не будет. Увы!

А там, где будет, вы увидите такое:


Не поняли? Объясняю. Пока вы не навели курсор на изображение, даже не видно, что это изображение - особенное. Но после того, как вы это сделали, появится этот значок: .

Обычно он появляется в верхнем правом углу:


Если вы нажмёте на миниатюру мышкой, откроется большое изображение:

Обратите внимание на "Х" сверху справа. Нажав на него можно выключить просмотр больших изображений и вернуться в сообщение с миниатюрами.

Если в сообщении несколько таких изображений, то слева и (или) справа от изображения будут надписи "<- + Ctrl" (слева) "Ctrl + ->" (справа). Нажимая на них мышкой (или используя комбинацию клавиши "Ctrl" и стрелок влево или вправо) можно перейти к предыдущему или к последующему изображению.


Вот вроде и всё. Напоследок скажу, что этот код можно использовать не только с изображениями, загруженными на ЛиРу. Точно так же вы можете вставлять большие изображения, загруженные на любые другие фотохостинги. Например, на тот же radikal.ru. Сделать это не сложно.
1. Загружаем большое изображение, получаем ссылку на него.
2. Загружаем миниатюру (превью).
3. Собираем код вида:
<a href="ссылка на большое изображение" rel="li-bigpic" target="_blank"><img src="ссылка на миниатюру" width="ширина миниатюры" height="высота миниатюры" alt="любой текст" /></a>
Как вы уже поняли, обязательно надо добавить в текст кода ссылки "rel="li-bigpic". Иначе большое изображение будет просто открываться в новом окне браузера.

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

LI 5.09.15

Тэги: блог, больший, дневник, изображение, код, миниатюра, оформление, превью, просмотр