Почему не работает Lightbox в Blogger
У меня на блоге перестал работать Lightbox.
Лайтбокс на Блоггере — функция очень нужная, если на сайте много картинок или скриншотов, где нужно рассмотреть мелкие детали.
Пыталась понять почему не увеличиваются картинки, перерыла весь интернет. Так и не поняла, в чём дело.
Пробовала ставить скрипты увеличения изображений, но они больше подходит для фотографий, картинок, но не текста. Текст на скриншоте, при увеличении данным способом, становится нечётким. Скрипты нашла в интернете.
Увеличение картинки
Код 1
Вставляем код в Дизайн/Добавить гаджет/HTML/JavaScript
<style>.post-body img { -webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;transition: all 0.4s ease;Код 2
padding: 8px;
background: #ffffff;
border: 1px solid #d0d0d0;
-moz-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 0 20px rgba(0, 0, 0, .2);
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.post-body img:hover {-moz-transform: scale(1.1);-webkit-transform: scale(1.1);-o-transform: scale(1.1);-ms-transform: scale(1.1);transform: scale(1.1);
background: #ffffff;
border: 1px solid #cccccc;
text-decoration: none;
text-shadow: none;
-moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);
}</style>
<style>#easy_zoom{Вставляем код в Дизайн - Добавить гаджет - HTML/JavaScript или в редактор сообщения.
width:450px;
height:350px;
border:5px solid #eee;
background:#fff;
color:#333;
position:fixed;
top:35px;
left:45%;
overflow:hidden;
-moz-box-shadow:0 0 10px #555;
-webkit-box-shadow:0 0 10px #555;
box-shadow:0 0 10px #555;
/* vertical and horizontal alignment used for preloader text */
line-height:400px;
text-align:center;
}</style>
<script src="http://dl.dropbox.com/u/27675057/Easy%20Image%20Zoom/easyzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function() {
$('a.zoom').each(function(i) {
$(this).easyZoom();
});
});
</script>
Если у вас уже есть на блоге jQuery - библиотека JavaScript, то к коду ничего не нужно добавлять, а если нет, то на самый верх кода добавьте:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js' type='text/javascript'/></script>К каждой картинке нужно будет добавлять class="zoom"
В редакторе, в режиме НТМЛ находим код картинки и после <a добавляем class="zoom". Вот так: <a class="zoom" href="http://4..................................
Не работает увеличение картинки на блоге
Недавно я вспомнила, что по советам в интернете, закрывала в статьях ссылки на картинки, щёлкнув мышкой по фото, а потом по ссылке в редакторе. И ссылка удалялась. Оказывается, при таком закрытии ссылок, работать Lightbox не будет.Если ссылка удалена, то откуда Lightbox возьмёт большую картинку для показа. И увеличение просто не срабатывает. Поэтому, нужно либо удалять лишние ссылки, либо пользоваться Lightbox.
Комментарии со спамом удаляются.