BloggerでSlimbox2を導入しました
画像をポップアップで表示させるLightbox派生系で動作が軽いSlimbox2を導入しました。
http://www.digitalia.be/software/slimbox2からSlimbox2をダウンロードします。
ダウンロードした、Slimbox2-xxx.zipを解凍し、jsフォルダ、cssフォルダ内の以下５つのファイルをインターネット上の任意のところへアップロードします。
Bloggerでは画像以外のファイルをアップロードすることはできませんので、プロバイダなどの無料ホームページサービスやレンタルサーバーなどを利用します。
slimbox2.js
closelabel.gif
loading.gif
nextlabel.gif
prevlabel.gif
同じく解凍したcssフォルダの中のslimbox2.cssの以下の部分をアップロード先のURIへ変更し、同じく任意の場所へアップロードします。
.lbLoading
#lbPrevLink:hover
#lbNextLink:hover
#lbCloseLink
Bloggerのテンプレートのheadタグ内に以下を入力します。
<link href=’アップロードのURI/slimbox2.css’ rel=’stylesheet’ type=’text/css’/>
<script src=’http://www.google.com/jsapi’ type=’text/javascript’/>
<script>google.load(‘jquery’, ‘1’);</script><script src=’アップロード先のURI/slimbox2.js’ type=’text/javascript’/>
を入力すると完成です。
後は、記事中に画像を挿入した際、
<a href=”hogehoge.com/xxxx.png”>
の後にrel=”lightbox”を追加し、
<a href=”http://hogehoge/xxxx.png” rel=”lightbox”>
とします。
