さっと拡大できる画像@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 30 31     
<<   01 - 2023   >>
ブログの記事検索
Twitterの「つぶやき」
バイク車載動画
    Youtube、ニコニコ動画で動画公開中
     
     
コミュニケーション一覧
新規コメント
カテゴリ
月別で記事を表示
ランダムで記事表示
RSS配信・システム情報
蒼い車輪はサーバ負荷観測に協力しています
スクリプト配布元
ブログ本体 :ぶろぐん
ブログ表示Skin :ゲットネット...¥
画像Plugin:Slimbox