Не работает Lightbox в Blogger

от Опубликовано
не работает лайтбокс
Вы уже наверное сталкивались с неработающим лайтбоксом (картинки открываются не в новом окне, а поверх всего содержимого блога) на blogger. Чтобы посмотреть лайтбокс в действии, нажмите на любую картинку в этой записи.
Возможны несколько причин неработающего лайтбокса:

  1. отключен лайтбокс в настройках blogger,
  2. публикация картинок с русскими названиями (прописаны кириллицей). Решение проблемы здесь
  3. публикация записей при помощи программы Windows Live Writer или open Live Writter, Решение проблемы.
  4. использование нестандартного шаблона. Нужно отметить, что многие даже нестандартные шаблоны все же поддерживают лайтбокс.

  1. Если у вас не работает в блоге lightbox, то проверьте включен ли он в настройках вашего блога. Путь: Настройки –> Сообщения и комментарии –> Показывать изображения в Lightbox –> Да.
    лайтбокс 
    Вот такой код изображения со ссылкой на изображение появляется в результате публикации картинки на
  2. Если вы публикуете картинки в свой блог с русскими названиями. Пример: картинка.jpg или фон.png, то лайтбокс в этом случае также работать не будет. Решение – публикуйте записи с английскими именами, а затем уже в редакторе записи вы можете прописать своим картинкам русские названия в тегах alt и title.
    Если же очень хочется поковыряться в кодах, то после загрузки картинки в запись нужно изменить ее код.

    Исходный код изображения: 

    <a href="https://1.bp.blogspot.com/-CUOFkNe-oTs/UvB8xLBIhfI/AAAAAAAAOqA/WIzwLi3gI9w/s1600/%D0%BE%D0%B4%D0%B8%D0%BD.jpg" imageanchor="1" ><img border="0" src="https://1.bp.blogspot.com/-CUOFkNe-oTs/UvB8xLBIhfI/AAAAAAAAOqA/WIzwLi3gI9w/s1600/%D0%BE%D0%B4%D0%B8%D0%BD.jpg" /></a>

    Удаляем из него все символы после последнего слеша до расширения, при этом оставьте последний символ (символ перед расширением). Все, что нужно удалить выделено красным:

    <a href="https://1.bp.blogspot.com/-CUOFkNe-oTs/UvB8xLBIhfI/AAAAAAAAOqA/WIzwLi3gI9w/s1600/%D0%BE%D0%B4%D0%B8%D0%BD.jpg" imageanchor="1" ><img border="0" src="https://1.bp.blogspot.com/-CUOFkNe-oTs/UvB8xLBIhfI/AAAAAAAAOqA/WIzwLi3gI9w/s1600/%D0%BE%D0%B4%D0%B8%D0%BD.jpg" /></a>

  3. Картинки, опубликованные с помощью редактора блога Windows Live Writer также не имеют этого красивого эффекта. Лечится немного сложнее. После публикации записи из writter перейдите в редактор записи в блоге (Сообщения –> Ваша публикация–> Изменить) и в режиме html вы увидите код вашей картинки. Я добавила комментарии для удобства. Нужно провести некоторые изменения в коде. 

    /*----- ссылка на изображение *-----/
    <a href="https://lh3.ggpht.com/-QaCYgeyceSI/UvBjgqx4ozI/AAAAAAAAOmg/gMtigrHXBAE/s1600-h/dusk%25255B4%25255D.png">
    /*----- код изображения *-----/
    <img alt="dusk" border="0" src="https://lh4.ggpht.com/-Hp_G6_4GWCw/UvBjhURCgqI/AAAAAAAAOmk/DF_hctjARQ4/dusk_thumb%25255B2%25255D.png?imgmax=800" height="151" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dusk" width="150" /></a>

    Убираем лишний код, который препятствует эффекту лайтбокс, как из код самого встроенного изображения, так и ссылки на исходное изображение. Ссылки, которые подвергаются изменениям выделила желтым.
    Сначала уберем окончание ?imgmax=800 из код изображения:
    /*

    /*----- ссылка на изображение *-----/
    <a href="https://lh3.ggpht.com/-QaCYgeyceSI/UvBjgqx4ozI/AAAAAAAAOmg/gMtigrHXBAE/s1600-h/dusk%25255B4%25255D.png">
    /*----- код изображения *-----/
    <img alt="dusk" border="0" src="https://lh4.ggpht.com/-Hp_G6_4GWCw/UvBjhURCgqI/AAAAAAAAOmk/DF_hctjARQ4/dusk_thumb%25255B2%25255D.png?imgmax=800" height="151" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dusk" width="150" /></a>

    Теперь нам нужно убрать лишние символы из обеих ссылок так, чтобы остались одинаковые окончания перед указанием расширения (перед .png, .gif или .jpg):

    /*----- ссылка на изображение *-----/
    <a href="https://lh3.ggpht.com/-QaCYgeyceSI/UvBjgqx4ozI/AAAAAAAAOmg/gMtigrHXBAE/s1600-h/dusk%25255B4%25255D.png">
    /*----- код изображения *-----/
    <img alt="dusk" border="0" src=https://lh4.ggpht.com/-Hp_G6_4GWCw/UvBjhURCgqI/AAAAAAAAOmk/DF_hctjARQ4/dusk_thumb%25255B2%25255D.png height="151" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dusk" width="150" /></a>

    Результирующий код изображения, с которым работает лайтбокс:

    <a href="https://lh3.ggpht.com/-QaCYgeyceSI/UvBjgqx4ozI/AAAAAAAAOmg/gMtigrHXBAE/s1600-h/dusk.png">
    <img alt="dusk" border="0" src=https://lh4.ggpht.com/-Hp_G6_4GWCw/UvBjhURCgqI/AAAAAAAAOmk/DF_hctjARQ4/dusk.png height="151" style="background-image: none; border-bottom-width: 0px; border-left-width: 0px; border-right-width: 0px; border-top-width: 0px; display: inline; padding-left: 0px; padding-right: 0px; padding-top: 0px;" title="dusk" width="150" /></a>

    Если у вас изображение имеет название, записанное кириллицей, то код картинки может принять вид:

    <a href="https://lh3.ggpht.com/-xpNJYQDOO-Y/UvCASQ9R8iI/AAAAAAAAOrw/-vOpa6zBEac/s1600-h/%25253E48%25253D%25255B2%25255D.jpg"><img title="один" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="один" src="https://lh4.ggpht.com/-FocRJt2NRNk/UvCATNUnC0I/AAAAAAAAOr0/2HBrEEuBTnY/ %25253E48%25253D_thumb.jpg?imgmax=800" width="244" height="154" /></a>

    Убираем все коды, выделенные красным. Следите за тем, чтобы перед расширением были одинаковые символы. В нашем случае, это символ D.
    Результирующий код изображения

    <a href="https://lh3.ggpht.com/-xpNJYQDOO-Y/UvCASQ9R8iI/AAAAAAAAOrw/-vOpa6zBEac/s1600-h/D.jpg"><img title="один" style="border-top: 0px; border-right: 0px; background-image: none; border-bottom: 0px; padding-top: 0px; padding-left: 0px; border-left: 0px; display: inline; padding-right: 0px" border="0" alt="один" src="https://lh4.ggpht.com/-FocRJt2NRNk/UvCATNUnC0I/AAAAAAAAOr0/2HBrEEuBTnY/D.jpg" width="244" height="154" /></a>

  4. Если вышеперечисленные способы не помогли вам решить проблему с неработающим lightbox, то скорее всего, ваш шаблон не поддерживает эту функцию. В этом случае вам нужно при помощи специальных скриптом подключить лайтбокс. Их вы можете найти в интернете.

Опубликовано Иванова Наталья

Один ответ к «Не работает Lightbox в Blogger»

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

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