2 красивых эффекта LIGHTBOX для блога

Приветствую всех на своём блоге. Хочу поговорить сегодня опять про изображения и предложить вам два красивых эффекта для LIGHTBOX в блоггере.

Для начинающих сделаю небольшое пояснение. Когда мы добавляем картинки в сообщения, то они загружаются на страницу в виде миниатюр.

В настройках блога, в разделе сообщение и комментарии есть очень полезная функция LIGHTBOX. Если установить значение ДА, то при нажатии на изображение оно открывается поверх окна в оригинальном виде на полупрозрачном тёмном фоне.

Сегодня попробуем немного изменить внешний вид лайтбокс  с помощью небольшого кода. Как это будет примерно выглядеть, посмотрите на скриншоте.

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

код

.CSS_LIGHTBOX_BG_MASK {
background-color: #666699 !important;
background-image: url(image-url-address) !important;
opacity: 0.8 !important;
filter: alpha(opacity=90) !important;
}
.CSS_LIGHTBOX_SCALED_IMAGE_IMG {
outline: 0px solid #fff !important;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 0px 0px 5px #000000;
-moz-box-shadow: 0px 0px 5px #000000;
box-shadow: 0px 0px 5px #000000;
}
.CSS_LIGHTBOX_BTN_CLOSE {
background: url(image-url-address) no-repeat !important;
width: 30px !important;
height: 30px !important;
}
.CSS_LIGHTBOX_FILMSTRIP {
background-color: #669999 !important;
border-top:1px solid #d2d2d2!important;
}
.CSS_LIGHTBOX_ATTRIBUTION_INFO, .CSS_LIGHTBOX_ATTRIBUTION_LINK {
color: #000 !important;
}
.CSS_LIGHTBOX_INDEX_INFO {
color: #555555 !important;
}

Первая часть кода CSS цвет фона LIGHTBOX. Поменяйте, выделенное красным на свой цвет. В строке синего цвета вместо фона можно установить картинку. Впишите в скобках её адрес.

Во второй части задали рамку и закруглили углы.
В следующей задали размер кнопки для закрытия.
Далее цвет нижней панели и рамка.
Последняя часть-цвет текста.

В общем это все основные настройки, которые вы можете попробовать изменить.

Сейчас идём во вкладку шаблон - изменить HTML. Находим уже знакомую строку ]]></b:skin> и прямо над ней вставляем готовый код. Сохраняем изменения и смотрим результат.

Обращу ваше внимание на такой момент. В этом варианте открываться картинки будут в полном размере. Когда вы публикуете крупные фотографии буде появляться полоса прокрутки.

Если хотите у себя сделать такой же, то необходимо в настройках блога отключить функцию лайтбокс и установить опцию НЕТ. Об этом говорили в самом начале поста.

Скопируйте следующий код и просто установите его в гаджет HTML/JavaScript. Лучше будет если вы его переместите куда-нибудь в подвал блога.

<style>/* LightBox */
#jquery-overlay{position:absolute;top:0;left:0;z-index:90;width:100%;height:500px}
#jquery-lightbox{position:absolute;top:0;left:0;width:100%;z-index:100;text-align:center;line-height:0}
#jquery-lightbox a,#jquery-lightbox a:hover{border:none}
#jquery-lightbox a img{border:none}
#lightbox-container-image-box{position:relative;background-color:#fff;width:250px;height:250px;margin:0 auto}
#lightbox-container-image{padding:10px}
#lightbox-loading{position:absolute;top:40%;left:0%;height:25%;width:100%;text-align:center;line-height:0}
#lightbox-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}
#lightbox-container-image-box > #lightbox-nav{left:0}
#lightbox-nav a{outline:none}
#lightbox-nav-btnPrev,#lightbox-nav-btnNext{width:49%;height:100%;zoom:1;display:block}
#lightbox-nav-btnPrev{left:0;float:left}
#lightbox-nav-btnNext{right:0;float:right}
#lightbox-container-image-data-box{font:10px Verdana,Helvetica,sans-serif;background-color:#fff;margin:0 auto;line-height:1.4em;overflow:auto;width:100%;padding:0 10px 0}
#lightbox-container-image-data{padding:0 10px;color:#666}
#lightbox-container-image-data #lightbox-image-details{width:70%;float:left;text-align:left}
#lightbox-image-details-caption{font-weight:bold}
#lightbox-image-details-currentNumber{display:block;clear:left;padding-bottom:1.0em}
#lightbox-secNav-btnClose{width:66px;float:right;padding-bottom:0.7em}</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
<script src='http://rilwis.googlecode.com/svn/trunk/blogger/lightbox.min.js' type='text/javascript'></script>

Думаю, что вы подберёте для себя подходящий вариант. О другом эффекте увеличения картинки можно прочитать здесь .

И у меня на этом всё. Если возникнут вопросы задавайте в комментариях. Разберёмся. Спасибо за внимание к моему блогу. До скорых встреч.

оформите подписку на новые шпаргалки

Введите Ваш email