🍮 🕺 👌🏾 ダイナミックビューでの画像の表示の改善-Bloggerのクラシックモード 📆 🥜 🚶

Bloggerでダイナミックビューを使用するすべての人は、ページコンテンツの読み込みに非常に長い時間がかかることに気付いているはずです。また、5つの投稿から開始し、失敗し始めます。入念にカスタマイズされたデザインは、ページと重複しません。

これは、投稿に添付された写真を見始めたときに特に印象的です。写真をクリックして大きな画像を見ると、タイムトラベルがあります。画像はどのライトボックスでも開きませんが、前世紀のように開きますが、新しいウィンドウで開きます。

Bloggerの通常のビューに切り替えたくなかったので、すぐに使用できるライトボックスがあるようだったので、その時点で気に入っていたFancyboxをさらに掘り下げてビルドすることにしました。

Bloggerでは画像以外をアップロードできないため、Fancyboxの避難所を見つける必要がありました。長い間探す必要はありませんでした。cdnjs.comはすでに彼を保護しています。

それで、ブログ管理ページに移動し、 テンプレートでHTMLの編集をクリックしました。

開いたエディターで、 CSSへのリンクを頭に挿入しました

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

テンプレートの一番下で、 本文を閉じる前に、スクリプトへのリンクを埋め込みました

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

画像のクリックに対する応答を調整するためだけに残った。ダイナミックビュー-クラシックではすべての投稿が無限のリボンに表示されるため、最も論理的な方法は、現在の投稿の画像ギャラリーをライトボックスにアップロードすることです。これを行うために、クロージングボディの前にある次の行を置き換えました。

  <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（ドキュメント）.readyハンドラーへ。

他の誰かが役に立つことを願っています。

ダイナミックビューでの画像の表示の改善-Bloggerのクラシックモード

More articles: