Просмотр объектов мультимедиа в Blogger-блоге ~ Страницы Интернета

вторник, 13 декабря 2016 г.

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

15:20 By Guest Rooms "Varnaflats.eu" Blogger, Picture No comments

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

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

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

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

Страницы Интернета

вторник, 13 декабря 2016 г.