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

関連記事

  1. Tips

    Google Blogger 関連記事を画像付で簡単に Linkwithin

    ブログなどで見かける関連記事などの表示これがあればページビューも伸…

  2. Tips

    関西電力から計画停電の案内が届きました。 お知らせメール登録しました

    いよいよ関西にも計画停電の案内が来ました。ただこのハガキですが…

  3. Tips

    Windows8を仮想環境にインストールしてみました VirtualBoxにて64bit版の導入手順…

    何かと話題なWindows8がもうすぐ出るという事で雑誌等では…

  4. Tips

    プロバイダOCNの方は必見! 無料で迷惑メールを振り分ける機能とやり方

    最近では迷惑メール対策が月額100円等そういったサービスが多くなっ…

  5. Tips

    【Tips】 Gmailで迷惑メールを自動的に削除する方法

    Gmailでは自動でスパムメールなどを振り分けてくれる機能がありますが…

コメント

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

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

PAGE TOP