2011,03,25, Friday
最近のブログや写真サイトへ行くと、画像をクリックすると
アニメーション演出も加えて大きな画像を表示するところがあります。
[テスト画像] ※JavaScriptがオフだと効果がありません
このリンクをクリックしたときの画像表示です。
去年10月に、ブログにランダム記事表示機能を追加してからは
なにもブログをカスタマイズしていません。
せっかくなので、この画像表示機能を蒼い車輪ブログに導入してみました。
画像を表示させるスクリプトは何種類かあるようですが、
私はSlimboxを導入しました。スムースなアニメーションの動きが気に入りました。
Slimboxは公式サイトからダウンロードできます。
このページに使い方からダウンロードまで書かれていますね。
説明を読みながら作業すればいいことですが、おおまかな手順をまとめてみました。
【１】スクリプトのダウンロード
Slimbox 1.71a for MooTools 1.2をダウンロードします。
解凍すると、いくつかフォルダが作られます。
このうち「css」「js」のフォルダを、まるごとWebサーバへアップロードします。
【２】HTMLの編集
Slimboxを使いたいHTMLのソースを開き、<HEAD>～</HEAD>タグ内に以下のコードを加えます。
アップロードしたWebサーバのディレクトリに応じて、srcの中身は書き換えてください。
【３】画像リンクの編集
画像にリンクしているアンカータグの属性に「rel="lightbox"」を追加します。
文章を加えたい場合は、「title="三峰口駅と秩父鉄道車両公園" 」を追加します。
Slimboxにはスライドショー機能もあります。
同じページに複数の写真があるとき、rel属性を「rel="lightbox-20110325"」のように
「lightbox-任意の文字列」にすると任意の文字列単位でスライドショーができます。
スライドショーを使うために3枚の写真を置いてみました。
[テスト写真１] [テスト写真２] [テスト写真３]
たった３ステップで導入できるので、とても簡単ですね。
CGIやPHPが動作できないWebサーバでも普通に使えます。
また、JavaScriptをオフにしている環境なら
普通の画像リンクとして使えますので、互換性も大丈夫ですね。
最近は、別ウインドウで画像を表示させることにストレスを
感じるようになってきていたので、この機能は助かります。
ちょっと大きめの画像を貼りたいときには便利だと思いますよ。
アニメーション演出も加えて大きな画像を表示するところがあります。
[テスト画像] ※JavaScriptがオフだと効果がありません
このリンクをクリックしたときの画像表示です。
去年10月に、ブログにランダム記事表示機能を追加してからは
なにもブログをカスタマイズしていません。
せっかくなので、この画像表示機能を蒼い車輪ブログに導入してみました。
画像を表示させるスクリプトは何種類かあるようですが、
私はSlimboxを導入しました。スムースなアニメーションの動きが気に入りました。
Slimboxは公式サイトからダウンロードできます。
このページに使い方からダウンロードまで書かれていますね。
説明を読みながら作業すればいいことですが、おおまかな手順をまとめてみました。
【１】スクリプトのダウンロード
Slimbox 1.71a for MooTools 1.2をダウンロードします。
解凍すると、いくつかフォルダが作られます。
このうち「css」「js」のフォルダを、まるごとWebサーバへアップロードします。
【２】HTMLの編集
Slimboxを使いたいHTMLのソースを開き、<HEAD>～</HEAD>タグ内に以下のコードを加えます。
アップロードしたWebサーバのディレクトリに応じて、srcの中身は書き換えてください。
【３】画像リンクの編集
画像にリンクしているアンカータグの属性に「rel="lightbox"」を追加します。
文章を加えたい場合は、「title="三峰口駅と秩父鉄道車両公園" 」を追加します。
Slimboxにはスライドショー機能もあります。
同じページに複数の写真があるとき、rel属性を「rel="lightbox-20110325"」のように
「lightbox-任意の文字列」にすると任意の文字列単位でスライドショーができます。
スライドショーを使うために3枚の写真を置いてみました。
[テスト写真１] [テスト写真２] [テスト写真３]
たった３ステップで導入できるので、とても簡単ですね。
CGIやPHPが動作できないWebサーバでも普通に使えます。
また、JavaScriptをオフにしている環境なら
普通の画像リンクとして使えますので、互換性も大丈夫ですね。
最近は、別ウインドウで画像を表示させることにストレスを
感じるようになってきていたので、この機能は助かります。
ちょっと大きめの画像を貼りたいときには便利だと思いますよ。
| パソコン関係::Web関連 | 00:22 | コメント(0) |
■コメント
■コメントを投稿する
