Блоговод | Просмотр объектов мультимедиа в Blogger-блоге

Просмотр объектов мультимедиа в Blogger-блоге

Современный продвинутый блог редко обходится без использования кодов, позволяющих пользователю просматривать изображения и видео не уходя со страницы. Если для WordPress-блогов таких плагинов написано немало (например мой плагин Simple View), то для Blogger-блогов я таких кодов почти не встречал (возможно плохо искал 😉 ).

Я хочу рассмотреть в этой статье способы подключения к Blogger-блогу таких популярных библиотек как Lightbox, FloatBox и Shadowbox.

Lightbox

Lightbox является, пожалуй, самой популярной библиотекой для просмотра изображений, т.к. была написана одной из первых. Несмотря на явный минимализм и почтенный возраст по прежнему остаётся лидером среди блоггеров. К недостаткам можно отнести то, что библиотека использует фреймворки (framework) Prototypes и Scriptaculous, а это делает библиотеку уязвимой в плане совместимости с другими фреймворками (например с Mootools).

И тем не менее …

Вставьте следующий код в секцию head, желательно ближе к началу секции – если Вы используете jQuery, это позволит избежать конфликта (пресловутая совместимость фреймворков) пространства имён.

<style>
#lightbox{    position: absolute;    left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
 
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
 
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
 
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(//lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(//lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }
 
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%    ; }
 
#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold;    }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;    }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}      
 
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }
round-color: #000; }
</style>
<script src='//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript' />
<script src='//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js' type='text/javascript' />
<script src='//blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript' />

<style>

#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}

#lightbox img{ width: auto; height: auto;}

#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }

#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }

#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }

#imageContainer>#hoverNav{ left: 0;}

#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }

#prevLink { left: 0; float: left;}

#nextLink { right: 0; float: right;}

#prevLink:hover, #prevLink:visited:hover { background: url(http://lh5.ggpht.com/_u4gySN2ZgqE/SnWk89-4azI/AAAAAAAAAj8/hM0MqnVouCQ/prevlabel%5B3%5D.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(http://lh6.ggpht.com/_u4gySN2ZgqE/SnWk9-mNiQI/AAAAAAAAAkA/Zg1jXV9xnQM/nextlabel%5B6%5D.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; }

#imageData{ padding:0 10px; color: #666; }

#imageData #imageDetails{ width: 70%; float: left; text-align: left; }

#imageData #caption{ font-weight: bold; }

#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }

#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;}

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

lute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

round-color: #000; }

</style>

Теперь, если в теле статьи мы поместим ссылку следующего вида:

<a href="//YOUR_HOST/fullimage.jpg" rel="lightbox" title="Моя картинка в полный рост"><img src="//YOUR_HOST/thumbnail.jpg" /></a>
<!-- или, для группировки изображений по галереям -->
<a href="//YOUR_HOST/fullimage.jpg" rel="lightbox[gname]" title="Моя картинка в полный рост"><img src="//YOUR_HOST/thumbnail.jpg" /></a>

получим именно то, что нам и надо – вывод полноразмерного изображения при клике на миниатюре в окне Lightbox.

fullimage.jpg – адрес полноразмерного изображения, не обязательно JPEG
thumbnail.jpg – адрес миниатюры, не обязательно JPEG
gname – любое имя галереи для объединения нескольких изображений в галерею

Shadowbox

Эта библиотека написана на “чистом” javascript и потому не испытывает проблем с совместимостью с популярными фреймворками. Кроме того, эта библиотека позволяет выводить в своём окне не только изображения но и видеоклипы.

Поместите в секцию head следующий код:

<link rel="stylesheet" type="text/css" href="//YOUR_HOST/shadowbox.css">
<script type="text/javascript" src="//YOUR_HOST/shadowbox.js"></script>
<script type="text/javascript">
	Shadowbox.init();
</script>

Shadowbox.init();

</script>

Shadowbox.init может содержать параметр:

Shadowbox.init({
	handleOversize: "drag",
	modal: true
});

Shadowbox.init({

handleOversize: "drag",

modal: true

});

Подробнее о параметрах Shadowbox можно почитать здесь.

В теле поста используйте коды такого вида:

<a href="//YOUR_HOST/myimage.jpg" rel="shadowbox" title="Моя картинка в полный рост"><img src="//YOUR_HOST/thumbnail.jpg" /></a>

1	<a href="//YOUR_HOST/myimage.jpg" rel="shadowbox" title="Моя картинка в полный рост"><img src="//YOUR_HOST/thumbnail.jpg" /></a>

Добавляя rel=”shadowbox” в код линка Вы информируете Shadowbox, что это “его клиент”.

Floatbox

Floatbox в чём-то похож на Shadowbox, но обладает большей функциональностью и большим количеством настроек. Кроме того, это единственная библиотека позволяющая включить предварительную авто-загрузку изображений, т.е. пока читатель “соображает что к чему”, изображения тихо подгружаются и когда он кликает на миниатюре, получает изображение немедленно (если это не гига-изображение, разумеется 😉 ).

В секцию head вставить следующий код:

<link type="text/css" rel="stylesheet" href="//YOUR_HOST/floatbox/floatbox.css" />
<script type="text/javascript" src="//YOUR_HOST/floatbox/floatbox.js"></script>

1 2	<link type="text/css" rel="stylesheet" href="//YOUR_HOST/floatbox/floatbox.css" /> <script type="text/javascript" src="//YOUR_HOST/floatbox/floatbox.js"></script>

В теле статьи можно использовать следующий код:

<a href="//YOUR_HOST/fullimage.jpg" class="floatbox"><img src="//YOUR_HOST/tumbnail.jpg" /></a>
<!-- или с заголовками  -->
<a href="//YOUR_HOST/fullimage.jpg" class="floatbox" rev="caption:`Моя картинка в полный рост` caption2:`Большая картинка`"><img src="//YOUR_HOST/tumbnail.jpg" /></a>

можно и так:

<div class="floatbox">
  <a href="//YOUR_HOST/fullimage.jpg"><img src="//YOUR_HOST/tumbnail.jpg" /></a>
  <a href="//YOUR_HOST/fullimage2.jpg"><img src="//YOUR_HOST/tumbnail2.jpg" /></a>
  <a href="//YOUR_HOST/fullimage3.jpg"><img src="//YOUR_HOST/tumbnail3.jpg" /></a>
</div>

</div>

в этом случае объекты будут объеденены в группу (галрею). В первом варианте, для объединения в группу добавьте в аттрибут rev параметр group (например: group: gname).

Более подробно об обширных возможностях Floatbox можно прочитать здесь.

Единственным недостатком библиотеки является необходимость её лицензирования (платного или бесплатного – это как повезёт). Впрочем, и без лицензии библиотека работает. Периодически выбрасывает окно предупреждения о необходимости лицензирования, но работает … Если это напрягает, используйте версию 3.50

Вот, пожалуй, и всё!