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

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

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

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

Итак, далее я пошёл на страницу ^[3] управления блогом, затем в 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='http://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>

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

blogger.ui().configure().view();

в обработчик jQuery(document).ready.

Надеюсь кому-нибудь ещё пригодится.

Автор: sieukrem

Источник ^[4]