Improving the display of images in the Dynamic View - Classic mode on Blogger

Anyone who uses Dynamic View on Blogger has probably noticed that loading page content takes an incredibly long time. And starting with 5 posts, it also starts to fail. A design that has been painstakingly customized is not superimposed on the page.

This is especially striking when you start to view photos attached to the post. Click on the photo to see the enlarged image, and then there is a journey through time. The image does not open in any Lightbox, but opens like in the last century, but in a new window.

I didn’t want to switch to a regular View on Blogger, but there seemed to be a Lightbox out of the box, so I decided to dig out and embed Fancybox I liked at that time.
Since Blogger does not allow you to upload anything other than pictures, it was necessary to find shelter for Fancybox. I did not have to search long, he was already sheltered by cdnjs.com .

So, then I went to the blog management page , then to Template and clicked on Edit HTML .
In the opened editor in the head inserted a link to the CSS

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

At the very bottom of the template before the closing body, I injected a link to the script

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

It only remained to adjust the response to the click on the image. Since in Dynamic View - Classic all posts are displayed with an endless ribbon, I decided that it would be more logical to load the image gallery of the current post in the Lightbox. For this, I replaced the following lines before the closing body .

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

on

  <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> 

After all these frauds, the design was always loaded. I think this is due to the fact that I suffered

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

to jQuery (document) .ready handler.
')
I hope someone else will come in handy.