slimboxを使ってみたい
2007年05月09日
Lightboxと同じ動作をし、軽い、簡単、というslimboxを紹介します
こちらもLightbox2.0と同様に
ネット上にURLでアクセス可能なファイル置き場があるという前提です
こちらもLightbox2.0と同様に
ネット上にURLでアクセス可能なファイル置き場があるという前提です
【１】まずは、こちらの
Downloadからslimbox.zip [6.81kb](20070509現在 v1.31)をダウンロードして下さい
以下のようなフォルダ構成になっています
【２】つづいてこちらよりmootools(20070509現在 v1.1)をダウンロードします
↑をチェックして下さい
（いらないモジュールがあるかも知れませんがそこまで試していません）
↑は
↑のまま(高圧縮)でOK、ダウンロードして下さい。
ファイル名を分かりやすくmootools.jsなどにしましょう
そのファイルは先ほどのjsフォルダーに入れます
エディター等によるファイル内容の書き換えはありません
個人的にファイルがアップできてアクセス可能なURLの場所を
http://test.co.jp/~YYYY/
とします
【３】FTPソフトでそこにファイルを全て同じフォルダ構成でアップします
ここからは、ナチュログにログインします。
【４】「管理画面」→「マイページ」「オリジナルデザインの登録」を開きます
『トップページ』のスクリプト中を
上からず〜〜っと見ていくと
</head>
ってのがあるとおもいます（スクリプト中には必ず一ヶ所しかありません）
選んでいるデザインにより前後のスクリプトの記述が↑とは異なります
【５】</head>の上に以下のようにスクリプトを書き足します
実際は<head>〜</head>間であれば何処でも構いません
************************************
<head>
デザインによって違うスクリプトがある
<script type="text/javascript" src="http://test.co.jp/~YYYY/js/mootools.js"></script>
<script type="text/javascript" src="http://test.co.jp/~YYYY/js/slimbox.js"></script>
<link rel="stylesheet" href="http://test.co.jp/~YYYY/css/slimbox.css" type="text/css" />
</head>
************************************
(注意)サイズの都合で一部改行されているように見えますが、実際は改行していません、
赤＆緑の部分をコピーしてメモ帳などにペーストすれば分かります
http://test.co.jp/~YYYY/
の記述は、設定される方により違います
以下『トップページ』と同じ事を『個別記事』、『アーカイブ』でも行います
ここまでで準備は終了です。
実際に画像を登録し表示させる方法は、Lightboxと同じですので
『Lightboxを使ってみたい その２』の【７】〜を参照頂ければ幸です
Lightboxを既に導入している場合でも過去記事を書き換えないで済みます
Downloadからslimbox.zip [6.81kb](20070509現在 v1.31)をダウンロードして下さい
以下のようなフォルダ構成になっています
| slimbox | |||
| ├ | js | ─ | slimbox.js |
| └ | css | ┬ | slimbox.css |
| ├ | closelabel.gif | ||
| ├ | loading.gif | ||
| ├ | nextlabel.gif | ||
| └ | prevlabel.gif | ||
【２】つづいてこちらよりmootools(20070509現在 v1.1)をダウンロードします
| ■Core | Core |
| ■Class | Class |
| Class.Extras | |
| ■Native | Array |
| String | |
| Function | |
| Number | |
| Element | |
| ■Element | Element.Event |
| Element.Filters | |
| Element.Selectors | |
| Element.Form | |
| Element.Dimensions | |
| ■Window | Window.DomReady |
| Window.Size | |
| ■Effects | Fx.Base |
| Fx.CSS | |
| Fx.Style | |
| Fx.Styles | |
| Fx.Elements | |
| Fx.Scroll | |
| Fx.Slide | |
| Effect to slide an element. | |
| Fx.Transitions |
↑をチェックして下さい
（いらないモジュールがあるかも知れませんがそこまで試していません）
↑は
↑のまま(高圧縮)でOK、ダウンロードして下さい。
ファイル名を分かりやすくmootools.jsなどにしましょう
そのファイルは先ほどのjsフォルダーに入れます
| slimbox | |||
| ├ | js | ┬ | slimbox.js |
| │ | └ | mootools.js (←ここ！) | |
| └ | css | ┬ | slimbox.css |
| ├ | closelabel.gif | ||
| ├ | loading.gif | ||
| ├ | nextlabel.gif | ||
| └ | prevlabel.gif | ||
エディター等によるファイル内容の書き換えはありません
個人的にファイルがアップできてアクセス可能なURLの場所を
http://test.co.jp/~YYYY/
とします
【３】FTPソフトでそこにファイルを全て同じフォルダ構成でアップします
ここからは、ナチュログにログインします。
【４】「管理画面」→「マイページ」「オリジナルデザインの登録」を開きます
『トップページ』のスクリプト中を
上からず〜〜っと見ていくと
</head>
ってのがあるとおもいます（スクリプト中には必ず一ヶ所しかありません）
選んでいるデザインにより前後のスクリプトの記述が↑とは異なります
【５】</head>の上に以下のようにスクリプトを書き足します
実際は<head>〜</head>間であれば何処でも構いません
************************************
<head>
デザインによって違うスクリプトがある
<script type="text/javascript" src="http://test.co.jp/~YYYY/js/mootools.js"></script>
<script type="text/javascript" src="http://test.co.jp/~YYYY/js/slimbox.js"></script>
<link rel="stylesheet" href="http://test.co.jp/~YYYY/css/slimbox.css" type="text/css" />
</head>
************************************
(注意)サイズの都合で一部改行されているように見えますが、実際は改行していません、
赤＆緑の部分をコピーしてメモ帳などにペーストすれば分かります
http://test.co.jp/~YYYY/
の記述は、設定される方により違います
以下『トップページ』と同じ事を『個別記事』、『アーカイブ』でも行います
ここまでで準備は終了です。
実際に画像を登録し表示させる方法は、Lightboxと同じですので
『Lightboxを使ってみたい その２』の【７】〜を参照頂ければ幸です
Lightboxを既に導入している場合でも過去記事を書き換えないで済みます
この記事へのトラックバックURL
http://mfami.naturum.ne.jp/t250211
この記事へのコメント
＠＾＾＠）／コンバンワ
へ～こんなのもあるんですね！
ぱっと見た感じは違いが判らないです。
ってゆ～か一緒ですね(笑)
ライトボックス大活躍。
キャンプレポが苦手なので助かってます♪
ほんと（’－’＊）アリガト～です♪
あとは写真のアングルとかのお勉強ですね・・・(；´∀｀)
へ～こんなのもあるんですね！
ぱっと見た感じは違いが判らないです。
ってゆ～か一緒ですね(笑)
ライトボックス大活躍。
キャンプレポが苦手なので助かってます♪
ほんと（’－’＊）アリガト～です♪
あとは写真のアングルとかのお勉強ですね・・・(；´∀｀)
Posted by eco。＠未分類 at 2007年05月09日 23:59
■ eco。＠未分類 さん
おはようございます、
調べるとネ、けっこういろいろあるんですョ
おもしろそうなのあったら、
また紹介していきますネ、、、
おはようございます、
調べるとネ、けっこういろいろあるんですョ
おもしろそうなのあったら、
また紹介していきますネ、、、
Posted by えむふぁみ at 2007年05月10日 10:17
いつも為になる情報ありがとうございます
どっちがいいんでしょうね
Lightboxより軽くて同じ表現なんだったらslimboxの方が良いんですかね？
えむふぁみさんはどっちを使っていくんですか？
どっちがいいんでしょうね
Lightboxより軽くて同じ表現なんだったらslimboxの方が良いんですかね？
えむふぁみさんはどっちを使っていくんですか？
Posted by ツケ at 2007年05月11日 23:24
はじめまして。Ｌｉｇｈｔｂｏｘ導入しました。非常に参考になりました。<(_ _*)>
Posted by ラオウ at 2007年05月13日 23:31
■ ツケ さん
一度やってしまうと後はめんどくさがりな方なんで
このままLightboxで行きます（笑）
初めての設置ならば、書き換えが無い分slimboxの方が
楽なので初挑戦の場合はこちらをお進めします。
検索すると分かるんですがslimboxに限らず "なんちゃらbox"って
のは案外いっぱいあるんですが、見せ方としてはこの
Lightbox(slimbox)が一番ですね
本当はオートで動く視覚効果の付いたスライドショーを
記事UP寸前まで書いたのですが、
記事内にスクリプトを書くと登録できないようで
断念しました、、、
一度やってしまうと後はめんどくさがりな方なんで
このままLightboxで行きます（笑）
初めての設置ならば、書き換えが無い分slimboxの方が
楽なので初挑戦の場合はこちらをお進めします。
検索すると分かるんですがslimboxに限らず "なんちゃらbox"って
のは案外いっぱいあるんですが、見せ方としてはこの
Lightbox(slimbox)が一番ですね
本当はオートで動く視覚効果の付いたスライドショーを
記事UP寸前まで書いたのですが、
記事内にスクリプトを書くと登録できないようで
断念しました、、、
Posted by えむふぁみ at 2007年05月14日 02:58
■ ラオウ さん
はじめまして、HP拝見させていただきました
とても分かりやすく、きれいな作りですネ
セキスイハイムのBJもステキな家でウラヤマシイ限りです、、
我が家も数年前に建て替えましたが、今となっては
『ああしておけばよかった』とか
『こうしておけばよかった』とか
ついついグチってしまいます。
あの出来上がっていく時のワクワク感が懐かしいです
はじめまして、HP拝見させていただきました
とても分かりやすく、きれいな作りですネ
セキスイハイムのBJもステキな家でウラヤマシイ限りです、、
我が家も数年前に建て替えましたが、今となっては
『ああしておけばよかった』とか
『こうしておけばよかった』とか
ついついグチってしまいます。
あの出来上がっていく時のワクワク感が懐かしいです
Posted by えむふぁみ at 2007年05月14日 03:39
こんにちは。「18% Gray Studio:slimboxを使ってみたい」の管理人様。いつも面白い情報をありがとうございます。次の更新を楽しみにしてます！
Posted by FXで稼ぐ情報商材 at 2008年05月04日 23:35
