ThickBoxで画像を表示(スライド風編)

ThickBoxは写真をグループ化して表示すると、スライドショー風に画像を切り替えることができます。

1枚のみ表示の時はこんなふう↓      
    thickbox-21.jpg

数枚でグループ化するとこんなふう↓
IMG_4886.jpg IMG_4905.jpg IMG_4917.jpg

thickbox-22.jpg

グループ化するとこのように「○枚中○枚目 前へ 次へ」(デフォルトでは「Image ○ of ○ Prev Next」)と表示されるようになり、「前へ 次へ(Prev Next)」をクリックすると次の画像を見ることができます。


<a href="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4886.jpg" target="_blank"class="thickbox" title="姫路城"><img src="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4886s.jpg" border="0"/></a>

1枚表示の時は上記青字を書き加えただけですが、複数枚をグループ化するには下記のように、グループ化したい画像に同じ「rel属性」を指定(赤字の部分)してやるとよいだけです。

<a href="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4886.jpg" target="_blank"class="thickbox" title="姫路城" rel="090403"><img src="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4886s.jpg" border="0"/></a>
<a href="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4905.jpg" target="_blank"class="thickbox" title="姫路神社" rel="090403"><img src="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4905s.jpg" border="0"/></a>
<a href="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4917.jpg" target="_blank"class="thickbox" title="姫路神社" rel="090403"><img src="http://blog-imgs-27.fc2.com/s/a/k/sakuraxren/IMG_4917s.jpg" border="0"/></a>


この「rel=○○○」をグループごとに変えてやると、それぞれのグループ別にスライドショー風に表示されるます。


【備忘録(追記)】

「thickbox.js」をカスタマイズして、「次へ」などの文字を日本語で表示できるようにしました。
IE、FireFox、Safari、GoogleChrome、Sleipnirで確認したところ、ちゃんと日本語で表示できたものの、Operaでは文字化けして画像が表示されず不具合発生。

「thickbox.js」保存した時に文字コードを「EUC」で保存したのだけど、そのせいかも。
「UTF-8」で保存するとOperaでもきちんと表示されるようになりました。





関連記事
TAG :
thickbox

コメントの投稿

感謝!

できました!ありがとうございます。
長年の思いが叶ってうれしいです。

今日の記事のスライドショウも面白そうですが
又この次の挑戦とします。

質問ですが、
ThickBoxの仕様では新しく表示される画像の大きさは上限があるのですね。
横663ピクセルくらいが最大のようですが?

それと画像アップのたびにtarget="_blank"をclass="thickbox"に書き換えるのが面倒かな(横着者です)
でも気に入ってます。素敵です。


ボギパパ様

うまく導入できたようで、私もうれしいです♪
大きさの件ですが、それぞれのモニターの解像度によって上限が変わってくるようです。
先ほど横幅800、1000、1200で試してみました。
私のモニターの解像度は1440*900なのですが、800ちょっとが上限のようで、1000も1200も同じ大きさに表示されました。
ボギパパさんのブラウザでは例えば800の画像も663に縮小されてしまうのだと思いますが、私のパソコンで見るとちゃんと800で表示されていることになります。

もし、画像を大きくお見せになりたい場合は800とか1000とか大きくしておくと、解像度の大きなパソコンで見ている方は大きく表示されますし、小さめの解像度で見ている方にはそれなりの大きさに縮小されて表示される…ということですね。
(ある意味それってそのパソコンにあった大きさにしてくれるわけですからいいかも。)

thickbox.jsのどこかを触れば、縮小する機能がoffになるのかもしれませんけど、私にはわかりませんでした。

「class="thickbox"」への書き換えは単語登録しておくと簡単ですよ。
ひょっとしたら「target="_blank」を削除しなくてもきちんと表示されるかもです。
残ったままになっていた画像があったのですが、差し支えなく、ThickBoxで表示されていましたから。

私は何でも単語登録しています。
だっていちいちタグを覚えてないし、打ち込むのだって面倒くさいんですもの…。
「align="left"」だって「まわりこみ」とかって単語登録してるしe-330

Operaで日本語が文字化けして表示されていませんでしたが、訂正しておきました。
(ボギパパさんはそのままでOKです。)

管理人のみ閲覧できます

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

鍵コメ様

別のスクリプトをくっつけて自動でclass="thickbox"をくっつける方法もあるようなのですが、何度かやってみましたが、うまくいかなかったんです…。
とりあえずその方法でお願いいたします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!
このページのトップへ