Просмотр объектов мультимедиа в Blogger-блоге
Май 11, 2010 | minimus
Рубрика: Виджеты (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(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>
<script src='http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js' type='text/javascript'/>
<script src='http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js' type='text/javascript'/>
<script src='http://blogergadgets.googlecode.com/files/lightbox.js' type='text/javascript'/>Теперь, если в теле статьи мы поместим ссылку следующего вида:
<a href="http://YOUR_HOST/fullimage.jpg" rel="lightbox" title="Моя картинка в полный рост"><img src="http://YOUR_HOST/thumbnail.jpg" /></a>
<!-- или, для группировки изображений по галереям -->
<a href="http://YOUR_HOST/fullimage.jpg" rel="lightbox[gname]" title="Моя картинка в полный рост"><img src="http://YOUR_HOST/thumbnail.jpg" /></a>получим именно то, что нам и надо – вывод полноразмерного изображения при клике на миниатюре в окне Lightbox.
- fullimage.jpg – адрес полноразмерного изображения, не обязательно JPEG
- thumbnail.jpg – адрес миниатюры, не обязательно JPEG
- gname – любое имя галереи для объединения нескольких изображений в галерею
Shadowbox
Эта библиотека написана на «чистом» javascript и потому не испытывает проблем с совместимостью с популярными фреймворками. Кроме того, эта библиотека позволяет выводить в своём окне не только изображения но и видеоклипы.
Поместите в секцию head следующий код:
<link rel="stylesheet" type="text/css" href="http://YOUR_HOST/shadowbox.css">
<script type="text/javascript" src="http://YOUR_HOST/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>Shadowbox.init может содержать параметр:
Shadowbox.init({
handleOversize: "drag",
modal: true
});Подробнее о параметрах Shadowbox можно почитать здесь.
В теле поста используйте коды такого вида:
<a href="http://YOUR_HOST/myimage.jpg" rel="shadowbox" title="Моя картинка в полный рост"><img src="http://YOUR_HOST/thumbnail.jpg" /></a>Добавляя rel=»shadowbox» в код линка Вы информируете Shadowbox, что это «его клиент».
Floatbox
Floatbox в чём-то похож на Shadowbox, но обладает большей функциональностью и большим количеством настроек. Кроме того, это единственная библиотека позволяющая включить предварительную авто-загрузку изображений, т.е. пока читатель «соображает что к чему», изображения тихо подгружаются и когда он кликает на миниатюре, получает изображение немедленно (если это не гига-изображение, разумеется ).
В секцию head вставить следующий код:
<link type="text/css" rel="stylesheet" href="http://YOUR_HOST/floatbox/floatbox.css" />
<script type="text/javascript" src="http://YOUR_HOST/floatbox/floatbox.js"></script>В теле статьи можно использовать следующий код:
<a href="http://YOUR_HOST/fullimage.jpg" class="floatbox"><img src="http://YOUR_HOST/tumbnail.jpg" /></a>
<!-- или с заголовками -->
<a href="http://YOUR_HOST/fullimage.jpg" class="floatbox" rev="caption:`Моя картинка в полный рост` caption2:`Большая картинка`"><img src="http://YOUR_HOST/tumbnail.jpg" /></a>можно и так:
<div class="floatbox">
<a href="http://YOUR_HOST/fullimage.jpg"><img src="http://YOUR_HOST/tumbnail.jpg" /></a>
<a href="http://YOUR_HOST/fullimage2.jpg"><img src="http://YOUR_HOST/tumbnail2.jpg" /></a>
<a href="http://YOUR_HOST/fullimage3.jpg"><img src="http://YOUR_HOST/tumbnail3.jpg" /></a>
</div>в этом случае объекты будут объеденены в группу (галрею). В первом варианте, для объединения в группу добавьте в аттрибут rev параметр group (например: group: gname).
Более подробно об обширных возможностях Floatbox можно прочитать здесь.
Единственным недостатком библиотеки является необходимость её лицензирования (платного или бесплатного – это как повезёт). Впрочем, и без лицензии библиотека работает. Периодически выбрасывает окно предупреждения о необходимости лицензирования, но работает … Если это напрягает, используйте версию 3.50
Вот, пожалуй, и всё!
© 2010, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Популярность: 8%
Похожие статьи:
к записи 
к записи 
Извините, но ссылка на скрипты не работает. http://lagunof.blogspot.com/2010/02/krasivyi-shablon-dlya-bloggera.html#comment-form
Всего комментариев пользователя Игорь: 2
Уточните пожалуйста. Какая ссылка? На какие скрипты?