BloggerにFancyBoxを実装 Bloggerでも画像エフェクトを

GoogleのBloggerは非常に便利で
容量も気にすることなくBlogの投稿が出来るのは便利なんですが
Wordpress等と違ってプラグインの追加が非常に不便な所があります。
今回はFancyBoxというLightbox風スクリプトを導入の仕方を簡単に紹介したいと思います
下の画像をクリックすれば、どんなスクリプトか分かります。
fancybox

ページを戻ること無く投稿を見ることが出来るので非常に有効かと思います
他にLightboxやShadowboxと画像のポップアップスクリプトは沢山ありますが
Fancyboxが一番軽快にBloggerに実装出来たので
これを使ってみたいと思います。

手順としては
1、FancyBoxのダウンロードとソースをフリースペースや外部からアクセスできるサーバにコピー
2、Bloggerのページデザインの所でHtml編集をしてFancyboxのスクリプトの読み込み
これだけです。

まず、
Fancyboxのダウンロード先をご紹介しようとリンクを貼ろうと思ったのですが
今現在Fancyboxの公式ページが繋がらないようで、
繋がったらまた更新します。

2、Bloggerのページデザインのコード編集
image
ダッシュボードから「デザイン」を選択
Htmlの編集を選択して

テンプレートを編集

の中のコードがズラズラ並んでいる中で
</head>の前に下記を記述

<link href=’http://設置したサーバ/jquery.fancybox-1.3.1.css‘ media=’screen’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js‘ type=’text/javascript’/>
<script src=’http://設置したサーバ/jquery.fancybox-1.3.1.pack.js‘ type=’text/javascript’/>
<script src=’http://設置したサーバ/jquery.easing-1.3.pack.js‘ type=’text/javascript’/>

<script type=’text/javascript’>
$(function(){
$(&quot;a[href*=ggpht.com]&quot;).each(function(idx,elem){
elem.href = elem.href.replace(&#39;/s1600/&#39;,&#39;/s1600/&#39;);
$(elem).fancybox();
});
});

$(function(){
$(&quot;a[href*=bp.blogspot.com]&quot;).each(function(idx,elem){
elem.href = elem.href.replace(&#39;/s1600/&#39;,&#39;/s1600/&#39;);
$(elem).fancybox();
});
});
</script>

①②③に分けましたが
①はFancyBoxのスクリプトの読み込みの部分です

②③はFancyBoxやLightboxでも共通の部分の話なのですが
Bloggerに写真を投稿時にPicasaWebアルバムに投稿されるのですが
このリンクが直接画像では無く画像ページにリンクを貼った形でBloggerに投稿されます。
FancyboxやLightboxのスクリプトは画像を指定しないと動かないので
Bloggerの画像のリンクをちょっと変換してあげるだけで見えるようになります。
その部分が②③です。


ggpht.comの含まれるリンクの中のアドレスの
/s1600/ 部分を /s1600/に変換


bp.blogspot.comの含まれるリンクの中のアドレスの
/s1600/ 部分を /s1600/に変換

これで無事に見れる様になります。
如何ですか?
画像がちゃんとポップアップされますでしょうか?
オススメのスクリプトです。

  • コメント: 0

Freesoft terragen2で綺麗な景色を作ってみよう前のページ

Outlook Express メール削除が出来ない!?次のページ

関連記事

  1. Tips

    【Tips】アドレスバーからTwitterへつぶやける Chrome標準機能で楽々投稿

    Twitterへの投稿、つぶやきをChromeのアドレスバーから…

  2. Tips

    【Tips】Chromeが新しいデザインに!! バージョン69で元のデザインに戻す方法

    Chromeのバージョンが69になりマテリアルデザインになり見…

  3. Tips

    新しいOS!! 次はWindows10 Technical Preview版を動かしてみました

    次回のOS名称はWindows9かと思いきやWindows10…

  4. Tips

    【注意】 自作PC内のケーブル配線にご注意!? グラボが焼け焦げた話

    新年早々に物騒な記事で申し訳ないのですが実際に年末に我が身に起…

  5. Tips

    【Tips】Gmailの大容量の添付ファイルを見つけて容量を確保する方法

    私も普段使っているGmailですが容量にも制限があります容量は…

  6. Tips

    【Tips】パソコン作業で目が疲れる、痛いという方は一度部屋を少し暗くしてみては如何でしょうか。。

    以前まではPCの作業は明るい部屋で!というのが一般的な考え方の様な気が…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

PAGE TOP