Подключение fancybox к блогу

четверг, апреля 21, 2016 Nata 0 Comments


В стандартных шаблонах для blogger по умолчанию все изображения открываются во всплывающем окне, при этом используется технология lightbox. Но, к сожалению, в новых шаблонах, созданных сторонними разработчиками, такая возможность отсутствует. Альтернативным вариантом может быть подключение библиотеки fancybox. Рассмотрим, как это сделать.

Для реализации задуманного пришлось перепробовать разные варианты, пока все не заработало как надо. 

Итак, для подключения fancybox надо выполнить следующие шаги:

1. Открыть код шаблона командой Шаблон - Изменить HTML.

2. Проверить, подключен ли в шаблоне jQuery, в большинстве случаев современные шаблоны уже включают строку для подключения этой библиотеки:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> 
</script> 

3. В конце шаблона перед тегом </body> добавить код:

<script src="https://sites.google.com/site/fowziey/jquery.fancybox-1.3.4.js" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[ 
$(document).ready(function() {
//build a selector that targets all links ending in an image extension
var thumbnails = 'a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]';

 //add "fancybox" class to those (this step could be skipped if you want) and group them under a same "rel" to enable previous/next buttons once in Fancybox
jQuery(thumbnails).addClass("fancybox").attr("rel","lightbox");

 //call fancybox
jQuery('.fancybox').fancybox();
});
//]]> 
</script>

4. Перед тегами ]]></b:skin> добавить код со стилями:

#fancybox-loading { 
 position: fixed; 
 top: 50%; 
 left: 50%; 
 width: 40px; 
 height: 40px; 
 margin-top: -20px; 
 margin-left: -20px; 
 cursor: pointer; 
 overflow: hidden; 
 z-index: 1104; 
 display: none; 
 } 
 #fancybox-loading div { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 40px; 
 height: 480px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 } 
 #fancybox-overlay { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 z-index: 1100; 
 display: none; 
 } 
 #fancybox-tmp { 
 padding: 0; 
 margin: 0; 
 border: 0; 
 overflow: auto; 
 display: none; 
 } 
 #fancybox-wrap { 
 position: absolute; 
 top: 0; 
 left: 0; 
 padding: 20px; 
 z-index: 1101; 
 outline: none; 
 display: none; 
 } 
 #fancybox-outer { 
 position: relative; 
 width: 100%; 
 height: 100%; 
 background: #fff; 
 } 
 #fancybox-content { 
 width: 0; 
 height: 0; 
 padding: 0; 
 outline: none; 
 position: relative; 
 overflow: hidden; 
 z-index: 1102; 
 border: 0px solid #fff; 
 } 
 #fancybox-hide-sel-frame { 
 position: absolute; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background: transparent; 
 z-index: 1101; 
 } 
 #fancybox-close { 
 position: absolute; 
 top: -15px; 
 right: -15px; 
 width: 30px; 
 height: 30px; 
 background: transparent url('https://sites.google.com/site/fowziey/fancybox.png') -40px 0px; 
 cursor: pointer; 
 z-index: 1103; 
 display: none; 
 } 
 #fancybox-error { 
 color: #444; 
 font: normal 12px/20px Arial; 
 padding: 14px; 
 margin: 0; 
 } 
 #fancybox-img { 
 width: 100%; 
 height: 100%; 
 padding: 0; 
 margin: 0; 
 border: none; 
 outline: none; 
 line-height: 0; 
 vertical-align: top; 
 } 
 #fancybox-frame { 
 width: 100%; 
 height: 100%; 
 border: none; 
 display: block; 
 } 
 #fancybox-left, #fancybox-right { 
 position: absolute; 
 bottom: 0px; 
 height: 100%; 
 width: 35%; 
 cursor: pointer; 
 outline: none; 
 background: transparent url('https://sites.google.com/site/fowziey/fancy_blank.gif'); 
 z-index: 1102; 
 display: none; 
 } 
 #fancybox-left { 
 left: 0px; 
 } 
 #fancybox-right { 
 right: 0px; 
 } 
 #fancybox-left-ico, #fancybox-right-ico { 
 position: absolute; 
 top: 50%; 
 left: -9999px; 
 width: 30px; 
 height: 30px; 
 margin-top: -15px; 
 cursor: pointer; 
 z-index: 1102; 
 display: block; 
 } 
 #fancybox-left-ico { 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -30px; 
 } 
 #fancybox-right-ico { 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -60px; 
 } 
 #fancybox-left:hover, #fancybox-right:hover { 
 visibility: visible; /* IE6 */ 
 } 
 #fancybox-left:hover span { 
 left: 20px; 
 } 
 #fancybox-right:hover span { 
 left: auto; 
 right: 20px; 
 } 
 .fancybox-bg { 
 position: absolute; 
 padding: 0; 
 margin: 0; 
 border: 0; 
 width: 20px; 
 height: 20px; 
 z-index: 1001; 
 } 
 #fancybox-bg-n { 
 top: -20px; 
 left: 0; 
 width: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); 
 } 
 #fancybox-bg-ne { 
 top: -20px; 
 right: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -162px; 
 } 
 #fancybox-bg-e { 
 top: 0; 
 right: -20px; 
 height: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); 
 background-position: -20px 0px; 
 } 
 #fancybox-bg-se { 
 bottom: -20px; 
 right: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -182px;  
 } 
 #fancybox-bg-s { 
 bottom: -20px; 
 left: 0; 
 width: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-x.png'); 
 background-position: 0px -20px; 
 } 
 #fancybox-bg-sw { 
 bottom: -20px; 
 left: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -142px; 
 } 
 #fancybox-bg-w { 
 top: 0; 
 left: -20px; 
 height: 100%; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox-y.png'); 
 } 
 #fancybox-bg-nw { 
 top: -20px; 
 left: -20px; 
 background-image: url('https://sites.google.com/site/fowziey/fancybox.png'); 
 background-position: -40px -122px; 
 } 
 #fancybox-title { 
 font-family: Helvetica; 
 font-size: 12px; 
 z-index: 1102; 
 } 
 .fancybox-title-inside { 
 padding-bottom: 10px; 
 text-align: center; 
 color: #333; 
 background: #fff; 
 position: relative; 
 } 
 .fancybox-title-outside { 
 padding-top: 10px; 
 color: #fff; 
 } 
 .fancybox-title-over { 
 position: absolute; 
 bottom: 0; 
 left: 0; 
 color: #FFF; 
 text-align: left; 
 } 
 #fancybox-title-over { 
 padding: 10px; 
 background-image: url('https://sites.google.com/site/fowziey/fancy_title_over.png'); 
 display: block; 
 } 
 .fancybox-title-float { 
 position: absolute; 
 left: 0; 
 bottom: -20px; 
 height: 32px; 
 } 
 #fancybox-title-float-wrap { 
 border: none; 
 border-collapse: collapse; 
 width: auto; 
 } 
 #fancybox-title-float-wrap td { 
 border: none; 
 white-space: nowrap; 
 } 
 #fancybox-title-float-left { 
 padding: 0 0 0 15px; 
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -40px -90px no-repeat; 
 } 
 #fancybox-title-float-main { 
 color: #FFF; 
 line-height: 29px; 
 font-weight: bold; 
 padding: 0 0 3px 0; 
 background: url('https://sites.google.com/site/fowziey/fancybox-x.png') 0px -40px; 
 } 
 #fancybox-title-float-right { 
 padding: 0 0 0 15px; 
 background: url('https://sites.google.com/site/fowziey/fancybox.png') -55px -90px no-repeat; 
 } 
 /* IE6 */ 
 .fancybox-ie6 #fancybox-close { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_close.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-left-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_left.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-right-ico { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_nav_right.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-over { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_over.png', sizingMethod='scale'); zoom: 1; } 
 .fancybox-ie6 #fancybox-title-float-left { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_left.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-float-main { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_main.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-title-float-right { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_title_right.png', sizingMethod='scale'); } 
 .fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame { 
 height: expression(this.parentNode.clientHeight   "px"); 
 } 
 #fancybox-loading.fancybox-ie6 { 
 position: absolute; margin-top: 0; 
 top: expression( (-20   (document.documentElement.clientHeight ? document.documentElement.clientHeight/2 : document.body.clientHeight/2 )   ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ))   'px'); 
 } 
 #fancybox-loading.fancybox-ie6 div { background: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_loading.png', sizingMethod='scale'); } 
 /* IE6, IE7, IE8 */ 
 .fancybox-ie .fancybox-bg { background: transparent !important; } 
 .fancybox-ie #fancybox-bg-n { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_n.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-ne { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_ne.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-e { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_e.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-se { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_se.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-s { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_s.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-sw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_sw.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-w { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_w.png', sizingMethod='scale'); } 
 .fancybox-ie #fancybox-bg-nw { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://sites.google.com/site/fowziey/fancy_shadow_nw.png', sizingMethod='scale'); }


Это все изменения в шаблоне. Теперь можно создать пост с изображениями и проверить как открываются изображения.

Использованные материалы:
http://www.stylifyyourblog.com/2011/05/adding-fancybox-to-blogger.html
http://stackoverflow.com/questions/9760381/start-fancybox-on-all-anchor-tags-with-image-inside


0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Подключение шрифтов кириллицы в шаблонах blogger

среда, апреля 20, 2016 Nata 1 Comments

Статья о том, как в блоге исправить отображение кириллических шрифтов, если был использован шаблон, поддерживающий только шрифты с латиницей.




1 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Как добавить Facebook Open Graph мета теги к блогу

суббота, апреля 09, 2016 Nata 0 Comments

При попытке поделиться постом блоггера в фейсбуке обычно не правильно отображается информация, а именно: не подгружается картинка и не добавляется описание сайта. Чтобы исправить это, необходимо добавить в исходный код страницы метатеги, необходимые для соц.сетей. Ниже описано как именно это сделать. 

В оригинале статьи (http://www.technohalf.com/2015/01/how-to-add-facebook-open-graph-to-blogger-blog.html) описаны некоторые особенности, а также то, где брать ID для вашего приложения. Я же здесь привожу не всю статью целиком, а только ее часть.


Для facebook существуют специальные open-graph мета теги, которые должны быть размещены на странице между тегами <head> </head>. Эти теги позволяют задать заголовок, описание и изображение для сообщения, которым вы собираетесь поделиться в социальной сети.
Базовые Open Graph теги включают:
  • og:title = заголовок, например, "Как добавить Facebook Open Graph мета теги к блогу"
  • og:url = URL сообщения, например, "http://it.nata.cv.ua/2016/04/how-to-add-facebook-open-graph-to.html"
  • og:description =  описание сообщения
  • og:image = URL изображения размером минимум 200×200 пикселей
  • og:type = article (если не указывать, то по умолчанию будет “веб-сайт”)
Чтобы задать параметры мета тегов выполните следующие шаги:
1. Откройте меню Blogger > Dashboard > Template > Edit HTML
2. В редакторе в самом верху найдите следующий код, начинающийся с html xmlns:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data' 
xmlns:expr='http://www.google.com/2005/gml/expr'>
3. Добавьте xmlns:og='http://ogp.me/ns#' перед закрытием этого тега. Если нужных строк вы не нашли, то просто вставьте следующий код после <head>:
<html xmlns='http://www.w3.org/1999/xhtml'
xmlns:b='http://www.google.com/2005/gml/b'
xmlns:data='http://www.google.com/2005/gml/data'
xmlns:expr='http://www.google.com/2005/gml/expr'
xmlns:og='http://ogp.me/ns#'>
4. На предыдущем шаге вы добавили тег протокола фейсбука, который необходим для дальнейшего добавления Open Graph мета тегов в блог. Найдите тег <head> и добавьте после него следующий код:
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<meta property='og:image:width' content='1200'/>
<meta property='og:image:height' content='630'/>
<b:else/>
<meta content='logo-link' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='og:description'/>
</b:if>
<meta content='app_id' property='fb:app_id'/>
<meta content='fb_admins' property='fb:admins'/>
5. В коде вы должны заменить "logo-link" на путь к изображению, представляющему логотип вашего блога. Изображение должно быть размерами минимум 200 х 200 пикселей, максимальным сжатием 3:1, формата PNG, JPEG или GIF. Кроме этого необходимо в коде заменить параметры app_id и fb_admins на значения, которые предоставляет фейсбук при создании приложения. Как именно создавать в фейсбуке приложение описано в оригинале статьи.

Некоторые мои замечания:
- мета тег fb_admins я в код вообще не добавляла,
- не добавляла также и теги для размера картинки (og:image:width и og:image:height)



0 коммент.:

Примечание. Отправлять комментарии могут только участники этого блога.

Подписаться на: Сообщения (Atom)