Современный продвинутый блог редко обходится без использования кодов, позволяющих пользователю просматривать изображения и видео не уходя со страницы. Если для WordPress-блогов таких плагинов написано немало (например мой плагинSimple View), то для Blogger-блогов я таких кодов почти не встречал (возможно плохо искал 
).
).
Я хочу рассмотреть в этой статье способы подключения к Blogger-блогу таких популярных библиотек как , и.
Lightbox
Lightbox является, пожалуй, самой популярной библиотекой для просмотра изображений, т.к. была написана одной из первых. Несмотря на явный минимализм и почтенный возраст по прежнему остаётся лидером среди блоггеров. К недостаткам можно отнести то, что библиотека использует фреймворки (framework) Prototypes и Scriptaculous, а это делает библиотеку уязвимой в плане совместимости с другими фреймворками (например с Mootools).
И тем не менее …
Вставьте следующий код в секцию head, желательно ближе к началу секции — если Вы используете jQuery, это позволит избежать конфликта (пресловутая совместимость фреймворков) пространства имён.
Код
XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<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:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1gZyZB3pHlKXxHInHEBPyQ-LSKjpKgtHA8D7nsGgmGgazbBZCf_LByQRwJ_eijuYEtlSiR7eQ5Y_gVTFkACnySScihx7Wvr4t-pWnjaMiunBL5cmBmSf6ovwvzdmUItkw5pjqj8v1oZA/) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JG6sZDNkRJ_GggfV6CsPL2XFHiCVaYhvEz-2dJ7F5_CdbQ6R1QAQlJZysyvyOE81-k6ajz7rIFKDKD2hlYWyeHSsZE4ZaZ5LJ2XIZ6_cXzI4wxeV-1AfsPwfn5X5wodiyt3eUjTcVfo/) 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' />
|
Теперь, если в теле статьи мы поместим ссылку следующего вида:
Код
XHTML
1
2
3
|
<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 следующий код:
Код
XHTML
1
2
3
4
5
|
<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 может содержать параметр:
параметры
JavaScript
1
2
3
4
|
Shadowbox.init({
handleOversize: "drag",
modal: true
});
|
Подробнее о параметрах Shadowbox можно почитать .
В теле поста используйте коды такого вида:
Код
XHTML
1
|
<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 вставить следующий код:
Код
XHTML
1
2
|
<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>
|
В теле статьи можно использовать следующий код:
Код
XHTML
1
2
3
|
<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>
|
можно и так:
Код
XHTML
1
2
3
4
5
|
<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 — 2013, minimus. Все права защищены. При копировании и републикации статьи, ссылка на первоисточник обязательна.
Комментариев нет:
Отправить комментарий