Recent Entries

スポンサーサイト

[スポンサード リンク]


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

Slimbox 1.64で画像表示を素敵に演出!

[スポンサード リンク]


Slimbox 1.64は、画像表示に素敵なエフェクトを付けてくれます
Slimbox最大の特徴は 『digitalia.be(ダウンロード先)』のタイトルにある通り、「Lightboxの究極の軽量クローン」というところです!
Lightboxのエフェクトは好きだけど重すぎるという方にはお勧めです

dog1_thumb.jpg
LightboxとはBy はてなダイアリー

LightboxからSlimbox 1.64への移行はとても簡単です!
ありがたい事に画像のタグはLightboxと変わりません。

例)
<a href="OOO.jpg" rel="lightbox" title="タイトル">イメージ</a>

私、実はLightbox2 → Lightbox → Slimboxと流れてきたんです。

Lightbox2はIEでトラブルでヤメ…。
次に入れたLightboxは、最近何故か機能しなくなりました…。
それに加えてブログがやたらと重かったので、Slim(スリム)という言葉に惹かれて、Slimboxに辿り着いた次第です。
(ついでに「続きを見る」のびよーんとなるスクリプトもはずしちゃいました。)

では、これからSlimbox 1.64の導入方法を説明します!

Slimbox 1.64の導入方法

FC2ブログメインで説明しています。

  1. digitalia.beへ行き、下の方にある「Download」のSlimbox 1.64をクリックし、「slimbox-1.64.zip」をダウンロードします。
  2. slimbox-1.64.zipを右クリックし、「すべて展開」をクリックして解凍します。
  3. 解凍したslimbox-1.64フォルダの中のcssフォルダを開きます。
    中に入っている全てのファイル(5つ)をFC2ブログの管理ページにある「ツール」-「ファイルアップロード」からアップロードします。
    closelabel.gifloading.gifnextlabel.gifprevlabel.gifslimbox.css
  4. 同様に、jsフォルダの中の「mootools.js」と「slimbox.js」もアップロードします。
  5. これでアップロードは終わりです。
    slimbox-1.64フォルダは閉じてOKです。
  6. 次に、テンプレートをいじります。
    管理ページの「環境設定」-「テンプレートの設定」を選びます。
  7. テンプレートの<head>~</head>内に以下のタグを挿入します。
    <link rel="stylesheet" href="ファイルのアドレス(.css)" type="text/css" media="screen" />
    <script type="text/javascript" src="ファイルのアドレス(mootools.js)"></script>
    <script type="text/javascript" src="ファイルのアドレス(slimbox.js)"></script>
    これらは先ほどアップロードした外部ファイルを呼び出すタグです。
    以上で、テンプレート側の設定は終了です。

ファイルのアドレス

FC2ブログの場合
「ファイルアップロード」のページの「ファイル一覧」の該当するファイルの「表示」をクリック!開いたウインドウのアドレス欄にあるのが、そのファイルのアドレスになります。

例)当ブログのslimbox.jsのアドレス

http://blog-imgs-21.fc2.com/m/i/r/miracleblues/slimbox.js

次は、画像を貼りつける時に記述するタグです。
これも記述しなければSlimboxは機能しませんよ~。

  1. 貼り付けた画像に下のタグのようなリンクを張ります。
    <a href="OOO.jpg" rel="lightbox" title="タイトル">画像ファイル</a>
  2. 「rel="lightbox"」は、Slimboxを使う時の決まり文句です。
    これだけを追加しても機能します。

    また、Lightbox2のように複数の画像をグループにして、「NEXT」や「PREV」などで気軽に画像間を移動できる機能も搭載されています。

    グループ化する画像には、それぞれのタグに赤い部分を追加します。
    (グループ毎の任意の名前を決めます)

    <a href="OOO.jpg" rel="lightbox[GroupName]" title="タイトル">イメージ</a>
    こんな感じになります。⇒ 千鳥ヶ淵にてお花見
    (画像の右端あたりにカーソルが行くと「NEXT」が表示されます。)
  3. 「title="タイトル"」はSlimboxで表示したウインドウの下に入れるタイトルです。
    (上の犬の例だと、「ダックスフンドでーす。」にあたります。)
  4. 「画像のアドレス」の部分には、アップロードした画像のアドレスが入ります。
    <img src="画像のアドレス" border="0" />
    これでSlimbox1.64の導入完了でーす!

画像のグループ化が楽しすぎるからって、画像の載せすぎばよくありません。
ページ表示があまり重たくならないように気をつけましょう

また、他にもLightboxのお仲間達が多数存在します
色々な動画までウインドウの中に表示できるもの(multibox)もあります
自分のお気に入りを探すのも面白ですよ

Comments

: 管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

Comment Form