Не работает Lightbox в Blogger
Вы уже наверное сталкивались с неработающим лайтбоксом (картинки открываются не в новом окне, а поверх всего содержимого блога) на blogger. Чтобы посмотреть лайтбокс в действии, нажмите на любую картинку в этой записи.
Возможны несколько причин неработающего лайтбокса:
- отключен лайтбокс в настройках blogger,
- публикация картинок с русскими названиями (прописаны кириллицей). Решение проблемы здесь
- публикация записей при помощи программы Windows Live Writer или open Live Writter, Решение проблемы.
- использование нестандартного шаблона. Нужно отметить, что многие даже нестандартные шаблоны все же поддерживают лайтбокс.
- Если у вас не работает в блоге lightbox, то проверьте включен ли он в настройках вашего блога. Путь: Настройки –> Сообщения и комментарии –> Показывать изображения в Lightbox –> Да.
Вот такой код изображения со ссылкой на изображение появляется в результате публикации картинки на - Если вы публикуете картинки в свой блог с русскими названиями. Пример: картинка.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>
- Картинки, опубликованные с помощью редактора блога 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>
- Если вышеперечисленные способы не помогли вам решить проблему с неработающим lightbox, то скорее всего, ваш шаблон не поддерживает эту функцию. В этом случае вам нужно при помощи специальных скриптом подключить лайтбокс. Их вы можете найти в интернете.
Сделали рекурсию , если смотреть на картинку в картинке, там можно закрыть стрелочкой окошко), неплохо.
Здравствуйте!
Раньше картинки формировались с кодом типа
https://1.bp.blogspot.com/-o8ouBhW0_U0/YEsyHLdTucI/AAAAAAAACI0/yiAYxKU1ofcK9qQHYw1-VM8CbpzJcN-kwCPcBGAsYHg/s0/.png
Но с некоторых пор код стал формироваться на blogger.googleusercontent.com и без расширения типа https://blogger.googleusercontent.com/img/a/AVvXsEhUAA4XZJqfp3BZODIoMNuirnlCn7f6iUamDU0RlWr472J5257T-6lPSR-_LuMzPZ3iFhDRboS15MRZF6UZPsQESCZHpVv1z6wMMQ1zvgVi7qmirkfqdFViKJEKvyFevE8FXP6S8TAOuhlQkwpzTYDecdtSysuuV8lSPY44xUePPbgatU0Hp0Qw3KE-
А ссылки без расширения лайтбокс не открывает. Вы не сталкивались с таким?