さっと拡大できる画像@Slimbox導入しました
最近のブログや写真サイトへ行くと、画像をクリックすると
アニメーション演出も加えて大きな画像を表示するところがあります。

[テスト画像] ※JavaScriptがオフだと効果がありません
このリンクをクリックしたときの画像表示です。

去年10月に、ブログにランダム記事表示機能を追加してからは
なにもブログをカスタマイズしていません。
せっかくなので、この画像表示機能を蒼い車輪ブログに導入してみました。


画像を表示させるスクリプトは何種類かあるようですが、
私はSlimboxを導入しました。スムースなアニメーションの動きが気に入りました。

Slimboxは公式サイトからダウンロードできます。
このページに使い方からダウンロードまで書かれていますね。
説明を読みながら作業すればいいことですが、おおまかな手順をまとめてみました。

【1】スクリプトのダウンロード
 Slimbox 1.71a for MooTools 1.2をダウンロードします。
 解凍すると、いくつかフォルダが作られます。
 このうち「css」「js」のフォルダを、まるごとWebサーバへアップロードします。

【2】HTMLの編集
 Slimboxを使いたいHTMLのソースを開き、<HEAD>~</HEAD>タグ内に以下のコードを加えます。
 アップロードしたWebサーバのディレクトリに応じて、srcの中身は書き換えてください。


【3】画像リンクの編集
 画像にリンクしているアンカータグの属性に「rel="lightbox"」を追加します。
 文章を加えたい場合は、「title="三峰口駅と秩父鉄道車両公園" 」を追加します。

 Slimboxにはスライドショー機能もあります。
 同じページに複数の写真があるとき、rel属性を「rel="lightbox-20110325"」のように
 「lightbox-任意の文字列」にすると任意の文字列単位でスライドショーができます。


 スライドショーを使うために3枚の写真を置いてみました。
 [テスト写真1] [テスト写真2] [テスト写真3]

たった3ステップで導入できるので、とても簡単ですね。
CGIやPHPが動作できないWebサーバでも普通に使えます。

また、JavaScriptをオフにしている環境なら
普通の画像リンクとして使えますので、互換性も大丈夫ですね。

最近は、別ウインドウで画像を表示させることにストレスを
感じるようになってきていたので、この機能は助かります。

ちょっと大きめの画像を貼りたいときには便利だと思いますよ。

| パソコン関係::Web関連 | 00:22 | コメント(0) |
■コメント
■コメントを投稿する




このブログについて
    このブログはねうとんの日常生活のエピソードや、趣味のパソコン、バイク、鉄道、音楽ゲームなどの話題を盛り込んだ日記です。詳しい説明はこちらをご覧ください。
カレンダー
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29   
<<   02 - 2024   >>
ブログの記事検索
Twitterの「つぶやき」
バイク車載動画
    Youtube、ニコニコ動画で動画公開中
     
     
コミュニケーション一覧
新規コメント
カテゴリ
月別で記事を表示
ランダムで記事表示
RSS配信・システム情報
  • RSS 1.0
  • 処理時間 0.341018秒
  • BlognPlus 2.6.1
スクリプト配布元
ブログ本体 :ぶろぐん(公開終了)
ブログ表示Skin :ゲットネット...¥(公開終了)
画像Plugin:Slimbox