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トップ画面に様々な情報を表示できるサービス「iGoogle」沢山のガジェットを追加してよ…

    Googleのシンプルなトップ画面を便利に出来るネットサービス…

  2. Tips

    Tips 楽天からのメールマガジンの配信を止める

    楽天からのメールっていつの間にかすごい量になっていて迷惑メール…

  3. Tips

    【Tips】Windows10のダークモードが見やすくてカッコいい!! ダークモードの設定方法

    最近流行りのダークモード黒い背景でバッテリーの節約にも目にも見…

  4. Tips

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

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

  5. Tips

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

    Youtubeにて公開されている視聴者を増やす工夫と収益増加のヒン…

  6. Tips

    ストックフォトの複数社の写真管理の為のページを作りました

    先ほどご紹介しましたストックフォトサービスですが各社に写真を送信な…

コメント

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

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

最近の記事

PAGE TOP