Главная

Улучшаем показ изображений в режиме Dynamic View — Classic на Blogger’е

2014-01-19 в 22:10, admin, рубрики: blogger, fancybox, lightbox, блогосфера, метки: blogger, fancybox

Все кто использует Dynamic View на Blogger'е наверняка заметили, что загрузка содержимого страницы длится невероятно долго. А начиная с 5-ти постов начинает еще и глючить. Дизайн, который был кропотливо настроен, не накладывается на страницу.

Особенно это бросается в глаза, когда начинаешь просматривать прикрепленные к посту фотографии. Кликаешь на фотографию, чтобы увидеть увеличенное изображение, и тут происходит путешествие во времени. Изображение не открывается в каком-нибудь Lightbox, а открывается как в прошлом веке, а имено в новом окне.

Переходить на обычный View на Blogger мне не хотелось, а там вроде-бы Lightbox из коробки, поэтому я решил поковыряться и встроить понравившийся мне на тот момент Fancybox.
Так как Blogger не позволяет загружать ничего кроме картинок, необходимо было найти приют для Fancybox. Долго искать не пришлось, его уже приютил cdnjs.com.

Итак, далее я пошёл на страницу управления блогом, затем в Template и нажал на Edit HTML.
В открывшемся редакторе в head вставил ссылку на CSS

    <link href='http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css' media='screen' rel='stylesheet' type='text/css'/>

В самом низу шаблона перед закрывающим body я внедрил ссылку на скрипт

	<script src='https://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js' type='text/javascript'/>

Оставалось только настроить реакцию на клик по изображинию. Так как в Dynamic View — Classic все посты отображаются бесконечной лентой, я решил, что логичнее всего будет загрузка галереи изображений текущего поста в Lightbox. Для этого я заменил следующие строчки находящиеся перед закрывающим body.

    <script language='javascript' type='text/javascript'>
      setTimeout(function() {
        blogger.ui().configure().view();
      }, 0);
    </script>

на

    <script language='javascript' type='text/javascript'>
      	jQuery(document).ready(function() {
          blogger.ui().configure().view();
          $("body").click(function(e){
				var parent = $(e.target).parents("li.item a[imageanchor]")
				if (parent.length<=0)
					return true;

                var arr = [];
				var index = 0;
                $("a[imageanchor]",$(e.target).parents("li.item")).each(function(el){
                  if(this.href == parent[0].href)
						index = el;

                    arr.push({href:this.href});
                })
                $.fancybox(arr,{index:index});

				return false;
		  });
		});
    </script>

После всех этих махинаций дизайн стал загружаться всегда. Я думаю это связано с тем что я перенес