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

今日紹介するのはAjaxを使って画像をカッコよく表示させる方法です
結構前に知り合いに教えてもらって導入しました、別窓にならないので
結構便利だし表示もカッコいいので使っています(^o^)/\(^o^)
ブログやホームページを運営している方は使ってみてはどうでしょうか?
【簡単な紹介】
ホームページ:http://www.huddletogether.com/
現在バージョン:Lightbox JS v2.0
サンプル:sample1.png
個人的な意見:v2.0はお勧めしない/(^o^)\

【Lightbox導入の仕方(FC2ブログ例)】
ajax_3_1212.png
管理画面にログインしテンプレートの設定をクリック、HTMLの編集に
<!--サムネイル画像スクリプト/-->
<script type="text/javascript" src="http://www.nurupodensetsu.com/lightbox/lightbox.js"></script>
<!--/サムネイル画像スクリプト-->


ajax_5_1212.png
HTMLの編集の下にあるスタイルシートの編集欄に
/************************************/
/* サムネイルスクリプト 要素 */
#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(http://www.nurupodensetsu.com/lightbox/overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(http://www.nurupodensetsu.com/lightbox/blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://www.nurupodensetsu.com/lightbox/overlay.png", sizingMethod="scale");
}
/************************************/


あとは画像をリンクする際に rel="lightbox" を埋め込めば完了
例:<a href="画像URL" rel="lightbox" target="_blank"><img src="画像URL" border="0"></a>
これでカッコよく表示されるようになります、たぶん
※ソースのURLは各自アップロードしたファイルのURLを使用してください
私のサーバーに負荷がかかる可能性があります/(^o^)\


【管理人の雑記】
Lightbox JS v2.0をお勧めしない理由は
①画像の表示が遅い
②くろーずをクリックしないと閉じれない
③鬱陶しい
この3つです、まぁ使ってみればわかると思います\(^o^)/


【コメント返信】
>>NAO 氏
わけのわからない文字列置いておきますね
http://dl.romhustler.net/download/6eeda78dbe30803bbe4d89f5fc68e853/457eab93/n64/Super%20Smash%20Bros..7z

>>NAO 氏
GCでできたらいいんだけどねぇ・・・・

>>はひるがあぼーん 氏
ハルヒのAVみたよ、10分ぐらい見てたら嘔吐した

>>ZERO #PusLI67A 氏
GTAいいよね、うん

>>名無しさん@ #mQop/nM 氏
わけのわからない文字列置いておきますね
http://dl.romhustler.net/download/6eeda78dbe30803bbe4d89f5fc68e853/457eab93/n64/Super%20Smash%20Bros..7z

>>天神 #ct0We70k 氏
キーボードとか死ぬ

>>アシス #aIcUnOeo 氏
結構面白いよ、懐かしいし

>>巷で人気の吉田 氏
1000円ぐらいあるでしょ?ww

>>笑う熊 氏
仕様

>>John 氏
ふぁるこーんぱんち

>>名無しさん@ 氏
何か苦い思い出があるんですね・・・・

>>管理人のみ閲覧できます。
(;^ω^)

>>あう 氏
私が使ってる奴はバッファロー\(^o^)/

>>管理人のみ閲覧できます。 氏
みんなでやれば楽しそうだから紹介させてもらいました><
スポンサードリンク

   

コメント
この記事へのコメント
ちなみにスタイルシートを書かなければ
枠が表示されず画像と pres x to close という文字だけ表示されます。
2006/12/27(水) 23:33 | URL | にゃにゃしぃ #-[ 編集]
いつも思ってたのですが、2chの管理人ですか?
2006/12/13(水) 17:04 | URL | Yoshi #LLrIBCYE[ 編集]
ごめん、かなりMTAで言ったww
その辺の奴殺したら、大勢で追っかけられたw
まあ、アニメ版は確かにあまりなかったね。何せ9話くらいで終わったからね。
何か見ただけで読むのがいやになったけど、じっくり読んで導入してみます。
2006/12/13(水) 16:17 | URL | ZERO #PusLI67A[ 編集]
ブログランキング下がってるよ
マニアックなブログが一位に、、、
2006/12/13(水) 15:45 | URL | 名無しさん@ #-[ 編集]
昔から愛用してます!
いいですね^^

v2.0は私もおすすめできません・・・
2006/12/13(水) 10:52 | URL | ロッキー #vXeIqmFk[ 編集]
何てミスを・・・
訂正しておきます(^o^)/
2006/12/13(水) 02:15 | URL | tetsuya@管理人 #-[ 編集]
COLOSEじゃなくて、Closeじゃね?
2006/12/13(水) 01:05 | URL | 名無しさん@ #2Qwf./yA[ 編集]
>こうゆうネタを何処から仕入れるんだ?
この記事なら昔del.icio.usで見たよ
GIGAZINEでも見た
2006/12/12(火) 23:28 | URL | E40 #UwJ9cKX2[ 編集]
ゼロの使い魔見た。
自分にとって命のバトルシーンがほぼない。なにこれ。
1000円持ってたら飯食いに行きます。いや、あるけどさ。
GTAはキーボードのほうが面白い。
ちなみにMTAでの発言は気をつけよう。
決して「FACK」やら「Son of a bitch」なんて言葉は使っちゃいけないよ。囲まれて殺されるから。
2006/12/12(火) 23:21 | URL | 巷で人気の吉田 #-[ 編集]
どうでもいいからツール紹介してくれ。いいサイトなんて困ってるから。
2006/12/12(火) 23:06 | URL | 名無しさん@ #-[ 編集]
こうゆうネタを何処から仕入れるんだ?
2006/12/12(火) 23:01 | URL | じゃけん #-[ 編集]
日本語でおk
2006/12/12(火) 22:41 | URL | 永久電池 #-[ 編集]
これはすごい
2006/12/12(火) 22:37 | URL | 名無しさん@ #PU2PGfYI[ 編集]
コメントを投稿する
URL:
Comment:
Pass:
秘密: 管理者にだけ表示を許可する
 
トラックバック
この記事のトラックバックURL
http://tettyanblog.blog60.fc2.com/tb.php/238-0daa5767
この記事にトラックバックする(FC2ブログユーザー)
この記事へのトラックバック
人気ページランキング


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