Улучшенный Lightbox на Блогспот, Blogger



Пост (в основном) для пользователей:

Хотел сегодня опубликовать одну очень важную "фишку", которую я применяю на своем блоге, но забыл код установки! Вот как бывает - полная амнезия! Ничего вспомню!

По причине того, что не хотелось "терять" выходной день без опубликованного поста, я решил предложить вам очередную красивость. Но для начала кликните на картинку!  © blogodel.com 

блогспот
Кликните на картинку!




Красиво смотрится, не так ли? Дело в том, что встроенный Lightbox в Блогспот, Blogger меня не впечатляет, поэтому предлагаю этот вариант, который на уровне лучших блого-платформ.        © blogodel.com 






Ну а теперь, если вам понравилось, приступим к делу! Прежде всего вам понадобится отключить дефолтовый блогспотовский Lightbox. Как это делать видно на скриншоте (он кстати тоже кликабельный). © blogodel.com 



Для того что бы "улучшенный" Lightbox заработал, необходимо в  Дизайн - Добавить гаджет - 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>

42 коммент.:

Ирина Кудрявцева
Justus
Ирина Кудрявцева
Justus
Ирина Кудрявцева
Justus
Анна Шефер
Justus
SRF
Justus
Ирина Кудрявцева
Justus
Галина Петерсен
Justus
Галина Петерсен
Justus
Максим Волченко
Максим Волченко
Justus
Ольга Николаевна
Justus
Ольга Николаевна
Justus
Максим Волченко
Justus
Ольга Николаевна
Максим Волченко
Максим Волченко
Justus
Максим Волченко
Justus
rblba4ok
Анжела Юклянчук
Alex U
Justus
Michael Romanoff
Justus
Елена Саидовна
Justus
Елена Саидовна
stranniks68
Анонимный

Отправить комментарий

Дорогие Друзья! К сожалению, временно, по причине здоровья, моя активность по этому блогу ВРЕМЕННО ПРИОСТАНОВЛЕНА! Предположительно до января 2018 г.

Доска почета

Плюсани блог!