Изображения. Увеличаване на размера при кликане с мишката

Здравейте скъпи приятели и читатели на блога ми. Днес ще продължим да работим с изображения. В тази публикация ще научим как да увеличаваме изображенията в публикациите и страничната лента, когато кликваме върху тях с мишката, и то по два начина.

Прочетете също и публикации за изображенията и техните ефекти, предложени ви в сходни публикации в края на тази. Мисля, всеки разбира, че в качество на изображения можем да използваме скрийншоти, снимки и други.

Информацията е само за блогове на платформата Blogspot. Дали скриптовете работят в други ресурси не мога да кажа. Дори в Blogger работата и правилното показване на изображението може да се различават в различните теми (шаблони).

Първи начин

В нашата работа ще следваме следните стъпки:

➤Копирайте този скрипт в блокнот или друг текстови файл;

<style type="text/css">

.popup {width: 150px; cursor:pointer;}

.popup:focus {width: auto;}

</style>

<img src="#####" class="popup" tabindex="1"/>

РбасэЛ

➤В редактора на публикацията заредете изображението;

➤Кликнете върху изображението и изберете голям, много голям или оригинален размер;

➤Отворете HTML редактора и копирайте от адреса на изображението тази част;

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ38kYeT_NcRpckYtAKRltgOf2DM-hkuei_QAE4LDRXGDKlcjD20TP9YtgAL8vd-Z8jctgjqjfIqFWlrO7fTTkmCSO3Nm4X4DLpIvNIuASiS9qRRJUxPFvrugF0OQr0LVNdsZHpU2JvdY/s1600/bugenvilja4.jpg

➤Изтрийте зареденото изображение, а вече копирания му адрес впишете в скрипта на мястото, отбелязано в червено;

Ще се получи ето това

<style type="text/css">

.popup {width: 150px; cursor:pointer;}

.popup:focus {width: auto;}

</style>

<img src=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ38kYeT_NcRpckYtAKRltgOf2DM-hkuei_QAE4LDRXGDKlcjD20TP9YtgAL8vd-Z8jctgjqjfIqFWlrO7fTTkmCSO3Nm4X4DLpIvNIuASiS9qRRJUxPFvrugF0OQr0LVNdsZHpU2JvdY/s1600/bugenvilja4.jpg

" class="popup" tabindex="1"/>

➤Сега трябва да вмъкнете този код в HTML редактора на публикацията на правилното място на страницата;

Погледнете резултата и кликнете върху изображението с мишката;

Втори начин

Най-лесният начин да увеличите едно изображение е да вложите в адреса му тага target_blank.

<a href=" https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJ38kYeT_NcRpckYtAKRltgOf2DM-hkuei_QAE4LDRXGDKlcjD20TP9YtgAL8vd-Z8jctgjqjfIqFWlrO7fTTkmCSO3Nm4X4DLpIvNIuASiS9qRRJUxPFvrugF0OQr0LVNdsZHpU2JvdY/s1600/bugenvilja4.jpg

"target="_blank;">

<img border="0" height="213"  src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtQN4qxkckyT1Tgm9KBgjARA2SikXSnL8v1EWhdz1_qpXfMKRr-bI51tUtSSnoE5qAShDYpRAUkH84eYOctVV-1cSYwxAsTUU6625Ew1ysw9RBAohpdEAxvHNoKUwnNZGKQv-eMzZGh3Q/s320/2e0hhces.jpg"

width="320" /></a>

С тага target_blank изображението се отваря в нов прозорец. Изображението ще се отвори в нов таб на браузъра, ако се "заключен" Lightbox. Lightbox дисплея зависи от настройките и може да се наложи да го деактивирате. По този начин:
Blogger ➔ Настройки ➔ Публикации и коментари ➔ Да се показва ли Lightbox ➔ да или не ➔ запаметявате. При мен е разрешен Lightbox.

Пример

Опитах се да вмъкна изображението и в страничната колона, изображението също се отваря в нов прозорец. Добре е и да се надяваме, че потребителите няма да напуснат бързо блога ни.

Ако имате въпроси, моля в коментарите или използвайте формата за контакт, за да се свържете с мен. Всичко най-хубаво.

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: