Изображение – ссылка на пост

Как сделать чтобы ссылка загруженного изображения Blogger вела на страницу сообщения? Отвечаю на вопросы читателей.

По-умолчанию, ссылка ведет на полноразмерное изображение, и обычными средствами Blogger это реализовать нельзя. Поэтому, я написал Javascript-функцию для ссылок изображений Blogger.

Важный момент. Помимо самой функции добавлены следующие условия:

• на главной (индексной) странице блога ссылка изображения ведет на пост;
• на странице сообщения ссылка ведет на изображение.

Это реализовано с помощью условных операторов Blogger:

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <!-- код Javascript-->
</b:if>

Итак, два варианта подключения скрипта для изображений в шаблоне Blogger.

1. Полный код функции

Листинг 1: Полный код для вставки в шаблон Blogger.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
/* Функция для ссылок изображений в Blogger
Denis Neverov aka Croaker, @jcden
http://dotrb.blogspot.com
*/
var nodeId = "Blog1";
var postClassName = "hentry";
var postTitleTag = "h3";

// Сторонняя функция getElementsByClassName
getElementsByClassName = function (classname, node){
  if(!node) node = document.getElementsByTagName("body")[0];
  var a = [];
  var re = new RegExp('\\b' + classname + '\\b');
  var els = node.getElementsByTagName("*");
  for(var i=0,j=els.length; i<j; i++)
    if(re.test(els[i].className))a.push(els[i]);
  return a;
}
// Сама функция для обработки ссылок изображений
bloggerImageLink2Post = function(){
  var node = document.getElementById(nodeId);
  var posts = getElementsByClassName(postClassName, node);
  for(var i=0,j=posts.length; i<j; i++){
    var titleLinks = posts[i].getElementsByTagName(postTitleTag)[0].getElementsByTagName("a");
    var imgs = posts[i].getElementsByTagName("img");
    if (imgs[0] != undefined){
      var aParent = imgs[0].parentNode;
      if ( (aParent != undefined)&&(aParent.tagName == "A") ){
        aParent.href = titleLinks[0].href;
      }
    }
  }
}
// Вызов функции
bloggerImageLink2Post();
//]]>
</script>
</b:if>

Для чего нужен элемент CDATA, я рассказывал здесь: XML термин CDATA

Или второй вариант – подключение внешнего файла Javascript с последующим вызовом функции.

2. Подключаемый Javascript-файл

Листинг 2: Код для подключения внешнего файла javascript.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script src='http://sites.google.com/site/railsdepot/files/imagelink2post.js' type='text/javascript'/>
<script type='text/javascript'>
bloggerImageLink2Post();
</script>
</b:if>

Используй либо первый вариант, либо второй (не оба сразу!)

Куда вставлять javascript-код

Скрипт (код javascript) вставлять в код шаблона Blogger перед закрывающим тегом </body>.

Если ты используешь код Google Analytics – тогда перед кодом Google Analytics.

Не забудь сохранить шаблон.

Post scriptum

Работа обоих вариантов скрипта протестирована в Firefox, Chrome, Opera и IE.

Код разрабатывался для стандартных шаблонов Blogger и для шаблонов на основе стандартных. В «сильно нестандартных» шаблонах Blogger может не работать. Скорей всего придется задавать собственные значения переменных nodeId, postClassName и postTitleTag.

P.S. Всем читателям еще раз желаю, чтобы Новый год был счастливым! И пусть любимые приносят только радостные известия.

© 2010 dotrb.blogspot.com