Thick Boxで画像を表示

写真をクリックした時の出方を変えてみました。
今まではクリックすると別ウィンドウまたは別タブで画像が表示されていましたが、ページ内にカッコよく(?)表示できるようになりました♪
(自己満足♪)

IMG_4855.jpg    IMG_4855.jpg
左:従来通りのリンクで、クリックすると別ウィンドウか別タブに表示されます。
右:「ThickBox」で表示させているので、クリックすると同画面上に現れます。
「Close」をクリックするか、キーボードのEscボタンで閉じられます。
(追記:先ほどやってみると画面上のどこでもクリックしたら閉じられました!)


ただね…ブログを表示させた時、全部を読み込んでからでないと「ThickBox」がうまく働かないようで、私のブログ最近重くなってるので、「ThickBox」で表示するには一呼吸置いてからでないとうまく表示されないんですが……(^^ゞ

以下導入方法です。

thickbox1.jpgこちらの「ThicBox3.1」のページから4つのファイルをダウンロードします。
クリックすると文字が表示される場合は、各リンクを右クリックして「名前をつけてリンク先を保存」にしてダウンロードするといいです。

ダウンロードしたファイルは
1→thickbox-compressed.js
2→thickbox.css
3→loadingAnimation.gif
4→jquery-latest.pack.js
の4つです。

thickbox2.jpg私の場合、なぜか「「jquery-latest.pack.js」だけダウンロードしてきたら「jquery-latest.pack.js.txt」になっていました。
アイコンも他の.jsファイルと違います。
まぁ名前の変更をしますので、そのときに一緒に拡張子も変更するので気にしないでおきましょう(笑)

とりあえず、1と4のファイルの名前を次のように変更しておきます。
(4は場合によっては拡張子ごと変更しておいて下さい。)
1→thickbox.js
4→jquery.js

まず、3のloadingAnimation.gifをファイルのアップロード画面から画像などをアップするのと同様にアップロードします。

thickbox3.jpg
アップロードしたURLが必要なのでそのURLをコピーしておきましょう。

thickbox4.jpg
メモ帳やワードパッドですべてのファイルが開けるようにしてからthickbox.jsを開きます。

thickbox5.jpg
メモ帳で開くとこんな感じでダラダラと何がなにやらさっぱり……。
URLを書き換えるのですが、どこにその場所があるのか探すのも大変(^^ゞ

thickbox6.jpg
そこで「編集」-「置換」を使って勝手に変換してもらいましょう♪

thickbox7.jpg
先ほどコピーしたloadingAnimation.gifをアップロードしたURLを下側の「置換後の文字列」の欄に貼り付けます。
そして上の「検索する文字列」欄にはimages/loadingAnimation.gifと入れて下さい。

そして「すべて置換」をクリックすると勝手に置き換わってくれますので、置換ダイアログは閉じて、上書き保存します。

残りの3つのファイル
1→thickbox.js
2→thickbox.css
4→jquery.js
をファイルのアップロード画面からアップロードします。

このURLも必要となりますので、覚えておいて下さいね。

テンプレートの設定画面を開いて「HTML編集」の方の</head>の直前に

<script type="text/javascript" src="http://blog-imgs-**.fc2.com/*/*/*/******/jquery.js"></script>
<script type="text/javascript" src="http://blog-imgs-**.fc2.com/*/*/*/******/thickbox.js"></script>
<link rel="stylesheet" href="http://blog-imgs-**.fc2.com/*/*/*/******/thickbox.css" type="text/css" media="all" />


を挿入します。
赤字のhttp://blog-imgs-**.fc2.com/*/*/*/******はそれぞれのファイルをアップロードした場所です。

以上で導入は終了。

このThickBoxで画像などを表示させるには、
普段記事を書いている時に画像を挿入するのと同様にファイルのアップロード画面で「サムネイルで記事を書く」をクリックして画像を挿入します。
いつものように画像を挿入した時に表示されるタグがこちら↓です。

<a href="http://blog-imgs-**.fc2.com/*/*/*/******/IMG_4**5.jpg" target="_blank"><img src="http://blog-imgs-**.fc2.com/*/*/*/******/IMG_4**5s.jpg" alt="IMG_4**5.jpg" border="0" /></a>


target="_blank"の後ろにでもclass="thickbox"
を挿入してやるとOKです。
(どこでもよいようで、target="_blank"の前でも構いません。)

最初にも言いましたが、すべてのファイルを読み込んだあとでないと表示されないようなので、慌てて画像をクリックすると、ThickBoxで画像が表示されなくて「あれ~~??」って悩んでしまうかもしれません。
(私がこれでかなり悩みました……。)
ちゃんと表示されない時は、一呼吸置いてからクリックして確認してみて下さい。

なお、このjquery.jsはprototype.jsといっしょに使うとどちらかがうまくいかなくなるようです。
その打破策もあるようですので、両方のJavaScriptをお使いになる方は調べてみて下さい。


ThickBoxで画像をグループ化してスライドショー風に表示するには…こちらをご覧ください。
「ThickBoxで画像を表示(スライド風編)」


関連記事
TAG :
ThickBox

コメントの投稿

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

鍵コメ2009/04/03(Fri) 12:59様

さすがは鍵コメさん!
LightBoxと同じことができるみたいですね。
(…ってエラそうに言ってますが、LightBox知りません(^^ゞ)
ThickBoxを見ていたらLightBoxってたくさん出てきました!
LightBoxはprototype.js、ThickBoxはjquery.jsだそうです。
ThickBoxの方は画像だけでなくhtmlも表示できちゃうみたいで、おもしろそうですよ♪

ちょっと前にjqueryを知っておもしろそうだな~と思ってたんですが、敷居が高そうでしばらく放ってたんです。
でもやっぱり気になって…( *^艸^)

鍵コメ2009/04/03(Fri) 19:20様

わざわざご報告に来てくださってありがとうございます\(^O^)/
とてもうれしいです♪

何かと大変でしょうが、お体にはお気をつけてお過ごしくださいね(#^.^#)

また落ち着かれましたら、今までと変わらずお付き合いくださいねm(__)m
お待ちしていま~す!
**コメントを投稿**

コメントの投稿

Private :

トラックバック


この記事にトラックバックする(FC2ブログユーザー)

プロフィール

れん

管理人:れん
写真は下手の横好き。
そのせいか、画像編集ソフトで写真を弄ぶのも大好き♪
思いついたことを気の向くままに書いています。
カレンダー
11 | 2016/12 | 01
- - - - 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
最新の記事
最近のコメント
カテゴリ
月別アーカイブ
12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05  04  03  02  01  12  11  10  09  08  07  06  05 
お気に入り
リンクしてね♪
トラックバック
記事について
フリーソフト・WEBアプリなどの紹介記事は紹介した時点のものです。
バージョンアップ、その他で使用方法などが変更されている場合があります。
また,紹介時点ではフリーだったものが有料になっているものもあります。
記事には日付が表示されていますのでご確認ください。
あまり古い記事は参考にならない場合も多いと思います……(T_T)
ブログ管理MENU
いらっしゃいませ~
検索フォーム
メールはこちら
こちらのメールフォームもご利用ください。
アイコンをクリックするとメールフォームが開きます。
返信の必要な場合には必ずメールアドレスをご記入下さい。
メールはこちら
月間アクセスの多い記事 
ブログパーツ
月間リンク元ランキング
スポンサードリンク
おすすめ
・楽天市場
・eBOOKOFF
・FUJICOLORプリントおとどけ便
・インターネットで「デジカメプリント」
・ジャパネットたかた
・住信SBIネット銀行
・楽天銀行
・OLYMPAS ONLINE SHOP
・Yahoo!ショッピング
・上海問屋


楽天トラベル株式会社

デル株式会社

エプソンダイレクト株式会社

ホームセンターのコメリドットコム

プレミアム バンダイ

太る原因
FLAG COUNTER
Free counters!
このページのトップへ