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】画面中央に出てくる変換切り替え時に出てくる「あ」「A」を非表示にする方法

    IMEの変換モードを切り替えするときに画面中央に表示される「あ」「…

  2. Tips

    WindowsXPの草原 Googleストリートビューで現在の姿が見れますよ

    もうすぐWindowsXPのサポート終了という事で企業や個人P…

  3. Tips

    【注意】悪質なスパムメールにご注意 URLをクリックしたらどうなるのか・・・

    お昼の続きですがその後メールをクリックした後に大変な事になりま…

  4. Tips

    実は実写だった!! Windows10の壁紙が作られた様子が分かる動画をご紹介。

    Windows10標準の青い背景にWindowsロゴに光が当たって…

  5. Tips

    便利!! Windows10カレンダーとGoogleカレンダーを同期する方法を紹介

    Windows10の時計をクリックすると表示されるカレンダー。実は…

  6. Tips

    シルバーPC設定方法 おじいちゃん、おばあちゃんの為の快適PC設定方法をご紹介

    ゴールデンウィークに入って実家に帰省という方も多いと思いますお…

コメント

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

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

最近の記事

PAGE TOP