Tips

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/に変換

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

関連記事

  1. Tips

    【Tips】Gmailで送信取り消しができる機能を有効にすれば便利

    間違って送信ボタンを押してしまった!!相手先を間違えた!!…

  2. Tips

    Freesoft Blogger 5分でブログの始め方 簡単ブログ始めませんか??

    みなさんもブログをやってみたい・・・って方も多いと思います…

  3. Tips

    Youtube アクセス数アップを伝授 実際に試してみました 後編

    最近は写真だけで無くビデオも手軽にインターネットで扱えるようになり…

  4. Tips

    Tips WindowsXPの設定だけでOSの動作を軽快にしよう!

    今回はフリーソフトを使わずに設定だけでOSの動作を軽くしようという…

  5. Tips

    インク代の節約に詰め替えキット EPSONやCANON、ブラザーも インク代を安く

    EPSONやCANONやブラザーなど各社からプリンタが販売され…

  6. Tips

    Chrome「インターネットに接続できません」が表示された画面でゲームが出来る!?

    ネットワークの接続不良などでChrome上で「インターネットに…

コメント

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

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

PAGE TOP