В Blogger имеется встроенный достаточно неплохой LightBox, однако многим его недостаточно в силу ограниченности функционала и шаблонного дизайна. К тому же, этот LightBox не работает в мобильной версии сайта, что на данный момент является весомым недостатком. С помощью CSS можно практически как угодно изменять LightBox.
Существует большое количество альтернативных лайтбоксов для Blogger. Ниже рассмотрим один из самых красивых и популярных лайтбоксов на jQuery. Его отличие заключается в наличии дополнительных функций, таких как автоматические слайд-шоу, работе на мобильных устройствах, простоте в настройке и т. д.
На изображении ниже вы можете наглядно посмотреть, как выглядит такой LightBox для Blogger. А перейдя по ссылке можно опробовать элемент в действии на демо-сайте. Этот же лайтбокс установлен и на нашем сайте, вы можете опробовать его, нажав на любое изображение.
Основные возможности jQuery LightBox:
- Навигация свайпом или касанием сенсорного экрана.
- Для пролистывания можно просто нажимать на картинку.
- Поддержка быстрых клавиш (стрелки влево/вправо, Esc для закрытия).
- Фоновая предварительная загрузка следующего изображения.
- Поддержка картинок в форматах PNG, JPG, JPEG и GIF.
Установка jQuery LightBox для Blogger
1. Войдите в настройки вашего блога. Откройте раздел «Сообщения, комментарии и настройки доступа». Здесь в пункте «Показывать изображения в LightBox» установите «Нет». Сохраните настройки. Это необходимо для отключения стандартного лайтбокса.
2. В настройках перейдите в раздел «Тема», нажмите на значок шестеренки под версией для мобильных устройств. Здесь должен быть установлен первый вариант «Да, использовать мобильную версию темы при просмотре блога на мобильных устройствах». Если установлено иное значение, измените его и сохраните параметры. Это позволит лайтбоксу работать на смартфонах и планшетах.
3. В настройках темы нажмите «изменить HTML».
Установите курсор в любом месте кода шаблона и нажмите комбинацию клавиш «Ctrl+F». Откроется небольшое поле поиска, куда необходимо ввести следующий код:
</head>
Найдите нужный код. Над ним (обязательно только над </head>) вставьте следующий код:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js' type='text/javascript'/> <script src='https://dl.dropboxusercontent.com/s/44nrvf9a6dtv7a8/ImageLightbox-USER.js' type='text/javascript'></script>>
4. Снова нажмите «Ctrl+F» и найдите следующий код:
]]></b:skin>Выше этой строки вставьте такой код:
html
{
/* killing 300ms touch delay in IE */
-ms-touch-action: manipulation;
touch-action: manipulation;
}
button
{
border: none;
cursor: pointer;
}
/* IMAGE LIGHTBOX SELECTOR */
#imagelightbox
{
cursor: pointer;
position: fixed;
z-index: 10000;
-ms-touch-action: none;
touch-action: none;
-webkit-box-shadow: 0 0 3.125em rgba( 0, 0, 0, .75 );
box-shadow: 0 0 3.125em rgba(129, 129, 129, 0.8);
}
/* ACTIVITY INDICATION */
#imagelightbox-loading,
#imagelightbox-loading div
{
border-radius: 50%;
}
#imagelightbox-loading
{
width: 2.5em;
height: 2.5em;
background-color: rgba( 0, 0, 0, .5 );
position: fixed;
z-index: 10003;
top: 50%;
left: 50%;
margin: -1.25em 0 0 -1.25em;
-webkit-box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
box-shadow: 0 0 3.125em rgba(252, 252, 252, 0.8);
}
#imagelightbox-loading div
{
margin: 25%;
width: 1.25em;
height: 1.25em;
background-color: #fff;
-webkit-animation: imagelightbox-loading .5s ease infinite;
animation: imagelightbox-loading .5s ease infinite;
}
@-webkit-keyframes imagelightbox-loading
{
from { opacity: .5; -webkit-transform: scale( .75 ); }
50% { opacity: 1; -webkit-transform: scale( 1 ); }
to { opacity: .5; -webkit-transform: scale( .75 ); }
}
@keyframes imagelightbox-loading
{
from { opacity: .5; transform: scale( .75 ); }
50% { opacity: 1; transform: scale( 1 ); }
to { opacity: .5; transform: scale( .75 ); }
}
/* OVERLAY */
#imagelightbox-overlay
{
background-color: rgba(86, 86, 86, 0.5);
position: fixed;
z-index: 9998;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
/* "CLOSE" BUTTON */
#imagelightbox-close
{
width: 2.5em;
height: 2.5em;
text-align: left;
background-color: #C9C9C9;
border-radius: 50%;
position: fixed;
z-index: 10002;
top: 2.5em;
right: 2.5em;
-webkit-transition: color .3s ease;
transition: color .3s ease;
}
#imagelightbox-close:hover,
#imagelightbox-close:focus
{
background-color: #fff;
}
#imagelightbox-close:before,
#imagelightbox-close:after
{
width: 2px;
background-color: #000;
content: '';
position: absolute;
top: 20%;
bottom: 20%;
left: 50%;
margin-left: -1px;
}
#imagelightbox-close:before
{
-webkit-transform: rotate( 45deg );
-ms-transform: rotate( 45deg );
transform: rotate( 45deg );
}
#imagelightbox-close:after
{
-webkit-transform: rotate( -45deg );
-ms-transform: rotate( -45deg );
transform: rotate( -45deg );
}
/* CAPTION */
#imagelightbox-caption
{
text-align: center;
color: #fff;
background-color: #666;
position: fixed;
z-index: 10001;
left: 0;
right: 0;
bottom: 0;
padding: 0.625em;
}
/* NAVIGATION */
#imagelightbox-nav
{
background-color: rgba( 0, 0, 0, .5 );
border-radius: 20px;
position: fixed;
z-index: 10001;
left: 50%;
bottom: 3.75em;
padding: 0.313em;
-webkit-transform: translateX( -50% );
-ms-transform: translateX( -50% );
transform: translateX( -50% );
}
#imagelightbox-nav button
{
width: 1em;
height: 1em;
background-color: transparent;
border: 1px solid #fff;
border-radius: 50%;
display: inline-block;
margin: 0 0.313em;
}
#imagelightbox-nav button.active
{
background-color: #fff;
}
/* ARROWS */
.imagelightbox-arrow
{
width: 3.75em;
height: 7.5em;
background-color: rgba(255, 255, 255, 0.72);
vertical-align: middle;
display: none;
position: fixed;
z-index: 10001;
top: 50%;
margin-top: -3.75em;
}
.imagelightbox-arrow:hover,
.imagelightbox-arrow:focus
{
background-color: rgba(167, 167, 167, 0.8);
}
.imagelightbox-arrow:active
{
background-color: #A5A5A5;
}
.imagelightbox-arrow-left
{
left: 2.5em;
}
.imagelightbox-arrow-right
{
right: 2.5em;
}
.imagelightbox-arrow:before
{
width: 0;
height: 0;
border: 1em solid transparent;
content: '';
display: inline-block;
margin-bottom: -0.125em;
}
.imagelightbox-arrow-left:before
{
border-left: none;
border-right-color: #000;
margin-left: -0.313em;
}
.imagelightbox-arrow-right:before
{
border-right: none;
border-left-color: #000;
margin-right: -0.313em;
}
#imagelightbox-loading,
#imagelightbox-overlay,
#imagelightbox-close,
#imagelightbox-caption,
#imagelightbox-nav,
.imagelightbox-arrow
{
-webkit-animation: fade-in .25s linear;
animation: fade-in .25s linear;
}
@-webkit-keyframes fade-in
{
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fade-in
{
from { opacity: 0; }
to { opacity: 1; }
}
@media only screen and (max-width: 41.250em)
{
#imagelightbox-close
{
top: 1.25em;
right: 1.25em;
}
.imagelightbox-arrow
{
width: 2.5em;
height: 3.75em;
margin-top: -2.75em;
}
.imagelightbox-arrow-left
{
left: 1.25em;
}
.imagelightbox-arrow-right
{
right: 1.25em;
}
}
@media only screen and (max-width: 20em)
{
.imagelightbox-arrow-left
{
left: 0;
}
.imagelightbox-arrow-right
{
right: 0;
}
}
Сохраните изменения шаблона. На этом установка нового LightBox завершена.
Дополнительные настройки
Снова перейдите к коду ]]></b:skin>, чтобы при желании внести изменения в настройки лайтбокса. Выше указанной строки можно вставить следующие параметры для изменения таких настроек:
- #imagelightbox-overlay { display: none; } – отключение оверлейного дисплея (фон изображения).
- #imagelightbox-close { display: none; } – отключение кнопки закрытия изображения (крестика).
- .imagelightbox-arrow { display: none !important; } – удаление стрелок для пролистывания изображений.
- #imagelightbox-nav { display: none; } – отключение нижней полосы навигации.
- #imagelightbox-caption { display: none; } – удаление текста заголовка изображения.
После сохранения изменений попробуйте нажать на любое изображение в сообщениях вашего блога. Картинки будут открываться в новом стильном лайтбоксе. В случае возникновения проблем или вопросов, пишите в комментариях.
0 коммент.:
Отправить комментарий