0

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

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



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



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

    Първи начин


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

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


    <style type="text/css">
    .popup {width: 150px; cursor:pointer;}
    .popup:focus {width: auto;}
    </style>
    <img src="#####" class="popup" tabindex="1"/>


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

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

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


    https://2.bp.blogspot.com/-oi5GtI3ARcs/WiU-IWZBugI/AAAAAAAAGOg/jwkRAyi9TKELHmg-s-mx2jyrWmjPkkd5QCPcBGAYYCw/s1600/bugenvilja4.jpg


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

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


    <style type="text/css">
    .popup {width: 150px; cursor:pointer;}
    .popup:focus {width: auto;}
    </style>
    <img src=" https://2.bp.blogspot.com/-oi5GtI3ARcs/WiU-IWZBugI/AAAAAAAAGOg/jwkRAyi9TKELHmg-s-mx2jyrWmjPkkd5QCPcBGAYYCw/s1600/bugenvilja4.jpg
    " class="popup" tabindex="1"/>



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

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



    Втори начин


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


    <a href=" https://2.bp.blogspot.com/-oi5GtI3ARcs/WiU-IWZBugI/AAAAAAAAGOg/jwkRAyi9TKELHmg-s-mx2jyrWmjPkkd5QCPcBGAYYCw/s1600/bugenvilja4.jpg
    "target="_blank;">
    <img border="0" height="213"  src="http://3.bp.blogspot.com/-8jcqYqydFbY/VY8cSOcgFII/AAAAAAAAJTY/VlT13eO5Dis/s320/2e0hhces.jpg"

    width="320" /></a>



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

    Пример





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

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

    източник: bdblogov.ru

    Няма коментари :

    Публикуване на коментар


    Copyright © БЛОГ ЗА БЛОГОВЕ©2016- | All Rights Reserved
    Използването на Blogzablogove.com означава, че сте съгласни с нашата Политика на конфиденциалност и защита