BloggerでSlimbox2を導入しました

画像をポップアップで表示させるLightbox派生系で動作が軽いSlimbox2を導入しました。

Slimbox 2 is a 4 KB visual clone of the popular Lightbox 2 script by Lokesh Dhakar, written using the jQuery javascript library. It was designed to be very smal...
からSlimbox2をダウンロードします。
ダウンロードした、Slimbox2-xxx.zipを解凍し、jsフォルダ、cssフォルダ内の以下5つのファイルをインターネット上の任意のところへアップロードします。
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”>

とします。

関連コンテンツ

シェアする

フォローする