- ベストアンサー
オンクリックで画像とテキストの指定位置表示について
- フレームを使用してサムネイルをクリックしてメイン部分に拡大画像を表示しています。また、メインページにおいて、画像表示ごとに「次の画像」「前の画像」「TOPに戻る」リンクを張っています。
- メインに表示させるhtmlファイルを画像枚数分作成する必要があります。そこでこれをノーフレーム版で、かつ１枚のhtmlシートで作れればいいのですが、javascriptの変数(?)などを使って可能でしょうか。画像は100枚くらい存在するものとし、ファイルNoにより区分しています。なお当方javascriptの知識はありません。
- lightbox Plus （lightboxの拡張版）があって、画像内にページ送りのアイコンが表示されるようになっていてこれでもいいのですが、このアイコンの表示が画像表示のあと少しタイムラグがあるため、javascript等で作れないものかと考えてます。
- noro6857
- お礼率88% (526/596)
- JavaScript
- 回答数5
- ありがとう数7
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
一応これで動きます。 <script type="text/javascript"><!-- //ファイルのURL file=new Array("DSC_0001.JPG","DSC_0002.JPG"); //サムネイルの縦横幅 thumbw=100;//横 thumbh=60;//縦 //テーブルのサムネイルリストを作成 //各行に一枚ずつサムネイル function putThumb(){ thumb="<table>"; for(i=0;i<file.length;i++){ thumb+="<tr><td><img src='"+file[i]+"' width='"+thumbw+"' height='"+thumbh+"' onClick='changeImg("+i+")' style='cursor:pointer;'></td></tr>"; } document.getElementById( "tf" ).innerHTML =thumb+"</table>"; } //拡大画像をメイン部分に配置する function changeImg(id){ document.getElementById("main").innerHTML="<img src='"+file[i]+"'>"; btn=""; if(id!=0){ btn+="<a href='javascript:changeImg("+(id-1)+")'>PREV</a>"; } btn+=" | <a href='javascript:delImg()'>TOP</a> | "; if(id+1!=file.length){ btn+="<a href='javascript:changeImg("+(id+1)+")'>NEXT</a>"; } document.getElementById("link").innerHTML=btn; } //トップ（画像を消す） function delImg(){ document.getElementById("main").innerHTML=document.getElementById("link").innerHTML=""; } --> </script> </head> <body onload="putThumb()"> <table border="1" width="800" height="500"> <tbody> <tr> <td width="150" rowspan="2"> <div id="tf" style="height:500px;overflow-y:scroll;"></div> </td> <td width="650" id="main" align="center" height="467"></td> </tr> <tr> <td height="27" align="center" id="link"></td> </tr> </tbody> </table> </body>
その他の回答 (4)
- is_may
- ベストアンサー率65% (58/89)
サムネイルの下にタイトルを表示するには、「putThumb()」関数の「thumb+="～";」で追加していく内容を増やせば良いので割と簡単です。 初期起動に一枚目を表示するように編集するのも「putThumb()」なのでサムネイルタイトルの付加と一枚目表示両方の機能をつけると下のような感じです。 （初期起動に一枚目を表示しておくには別にプログラムを書き換えなくても<td id="main"><img src="一枚目.jpg"></td>としても可） //テーブルのサムネイルリストを作成 //各行に一枚ずつサムネイル function putThumb(){ thumb="<table>";//「thumb」という変数に「<table>」という値を代入 for(i=0;i<file.length;i++){ thumb+="<tr><td><img src='"+filet[i]+"' onClick='changeImg("+i+")' style='cursor:pointer;'></td></tr>";//「thumb」変数に画像の行を追加 thumb+="<tr><td>"+exp[i]+"</td></tr>";//「thumb」変数にコメントの行を追加 } document.getElementById( "tf" ).innerHTML =thumb+"</table>";//HTMLに表示 changeImg(0);//サムネイルをクリックしたときに拡大画像を表示する関数を呼び出す。（最初に一枚目の拡大画像を表示しておく） } ＞あと<div id="exp"></div>についても、画像と同じ<TD>の中に入れちゃうとダメ（エラー）なんですね。 なぜエラーが起こるかというと、もうお分かりかと思いますが<td id="main"></td>の中にそのまま<img src="～">を代入するので、 <td id="main"><img src="～"></td> となり、<td id="main"></td>の中に何か入れていても内容が書き換えられるためです。
お礼
おかげさまで目的の表示までたどりつきました。 長時間お相手していただいて本当に感謝しています。 サムネイルの名はファイル名にしたかったので、expでなくfileに変更してみました。ファイル名がimg/なのでフォルダのimgまで表示されてしまいますが、これはいずれ勉強します。 今回はこれで十分満足していますが、一般的な話として、読込みリストをjsなどの外部ファイルで代入させるようにしたり、本体に記述するファイル名も、たとえば「DSC_1111」だけとして、代入するときにプログラムの中で「_thumb.jpg」や「JPG」あるいはフォルダ名を関数みたいに付加することができれば、リストも拡大、サムネイルの両方を書くことなく簡略化できるのかなとも思ってます。 いつかは自分でもできて教えてあげられるようになるよう頑張ります。 ありがとうございました。 またどこかでお世話になることがありましたらよろしくお願いします。
- is_may
- ベストアンサー率65% (58/89)
拡大画像が表示されない件について、ホームページビルダーで実際に画像ファイルを書いて呼び出したところ表示されませんでした。 プログラムを見直したところ、変数の書き間違えだったようです。申し訳ありませんでした。 //拡大画像をメイン部分に配置する function changeImg(id){ document.getElementById("main").innerHTML="<img src='"+file[i]+"'>"; プログラム2行目の innerHTML="<img src='"+file[i]+"'>"; を innerHTML="<img src='"+file[id]+"'>"; に変更すれば画像が表示されるはずです。「i」という変数は宣言されてませんからね＾＾； TOPをクリックしたときに一枚目の拡大画像を表示するには <a href='javascript:delImg()'> を <a href='javascript:changeImg(0)'> と変更します。
お礼
ありがとうございます。できましたっ！ 私も知識がないながらも、コマンドを解読するようにしてみましが、 この「i」も一度はどれが代入されるんだろうと分析していました。 thumbのところに「i」があるんでこれなのかなとも思ってましたが、fileをほかの文字にしてみたりしても当然だめでした。 あと<div id="exp"></div>についても、画像と同じ<TD>の中に入れちゃうとダメ（エラー）なんですね。新たな<TD>を追加して、右側を３段にしてみたらうまくゆきました。それと、class指定も=のあと普通のTAGでは""をつけますが、script内ではこれをつけると機能しないことも知りました。いろいろ勉強になりました。 計算ソフトのマクロや関数ならできるのですが、scriptもやはり知識を持つと面白そうですね。 もうひとつだけお尋ねします。 初期起動ではTOP画面がDELになっていて、無画面からスタートしますが、これを１枚目の画像で設定しておきたいのですが、重ねてお知恵を拝借します。
補足
すみません。ひとつ聞き忘れです。サムネイルの方にもサムネイルそれぞれの下にファイル名などの表示は可能ですか？
- is_may
- ベストアンサー率65% (58/89)
×印が表示されて画像が表示できないのはプログラムのミスではなく、アップロードやパス記述ミスだと思います。 一度「http://」から始まる絶対パスで指定してみてください。 返答についての補足要求です。 ＞サムネイルについて、一応セル内はalign="center"をかけてセンタリングできるのですが、 ＞縦画像は横画像の左位置にあうようになってしまうのでセンタリングにできたらいいのですが。 これの意味が分かりません。もう少し分かりやすく説明していただけませんか？ コメントの付加はこんな感じです。 <script type="text/javascript"><!-- //拡大画像のURL file=new Array("DSC_0001.JPG","DSC_0002.JPG"); //サムネイル画像のURL（上の順番と対応） filet=new Array("t_0001.jpg","t_0002.jpg"); //説明文（上の順番と対応） exp=new Array("一枚目","二枚目"); //テーブルのサムネイルリストを作成 //各行に一枚ずつサムネイル function putThumb(){ thumb="<table>"; for(i=0;i<file.length;i++){ thumb+="<tr><td><img src='"+filet[i]+"' onClick='changeImg("+i+")' style='cursor:pointer;'></td></tr>"; } document.getElementById( "tf" ).innerHTML =thumb+"</table>"; } //拡大画像をメイン部分に配置する function changeImg(id){ document.getElementById("main").innerHTML="<img src='"+file[i]+"'>"; document.getElementById("exp").innerHTML=exp[id]; btn=""; if(id!=0){ btn+="<a href='javascript:changeImg("+(id-1)+")'>PREV</a>"; } btn+=" | <a href='javascript:delImg()'>TOP</a> | "; if(id+1!=file.length){ btn+="<a href='javascript:changeImg("+(id+1)+")'>NEXT</a>"; } document.getElementById("link").innerHTML=btn; } （以下同） と変更し、コメントを表示させたい部分に <div id="exp"></div> と入力します。 サムネイル部分のスクロールは恐らく不可能です。参照URLのサムネイルスクロールはインラインフレームで別のページを表示しているため自動スクロールが可能ですが、今回はCSSで擬似スクロールにしているためできません。
お礼
帰宅早々お疲れにもかかわらずご回答いただきありがとうございます。 残念ながらメイン表示がまだうまくゆきません。 メイン、サムネイルとも同じimg/にUPしてあり、ルート上にあるほかのhtmlでは表示できています。今回も同じルートにhtmlをおきました。 //拡大画像のURL file=new Array( "http://**/**/img/DSC_0945.JPG", "img/DSC_0953.JPG", "DSC_0954.JPG" ); //サムネイル画像のURL（上の順番と対応） filet=new Array( "img/DSC_0945_thumb.jpg", "img/DSC_0953_thumb.jpg", "img/DSC_0954_thumb.jpg" ); 上記のように拡大画像のパスは一応３通りで試しました。 サムネイルのほうは表示できているので拡大画像も同じ２番目でいいかと思うのですがなぜかうまくゆきません。 オンマウスのときは下のようにして表示できてました。 <img src="img/DSC_0945_thumb.jpg" target=_top onmouseover="over('img/DSC_0945','58枚のうちの001');" onmouseout="out(img/DSC_0945);"> それからページ送りの表示のうちTOPを常に１枚目にしたい場合は <a href='javascript:delImg()'> の部分は下のような記述にすればいいでしょうか <a href='javascript:changeImg("+(id=0)+")'> コメントの方はできました。 また、センタリングの件、前の補足でお知らせしましたが、スタルシートに設定してみて解決できました。 スクロールの件、今回はノーフレームを前提としているため、参照のものはインラインフレームということのようですのでこちらはあきらめ、今回のものをなんとか利用できるようにしたいと思っています。
- is_may
- ベストアンサー率65% (58/89)
サムネイルはNo.1のプログラムの場合、拡大画像・サムネイル画像は同一画像で、サムネイルは縮小表示されます。 サムネイル画像・拡大画像を分けるのであれば以下のようになります。 画像の置き場所は表示するページから見た画像の位置ですのでたぶんあってるでしょう。 画像のサイズに％指定はできませんので、サムネイル画像と拡大画像2つで1セットのようにするしかありませんね。 <script type="text/javascript"><!-- //拡大画像のURL file=new Array("DSC_0001.JPG","DSC_0002.JPG"); //サムネイル画像のURL（上の順番と対応） filet=new Array("t_0001.jpg","t_0002.jpg"); //テーブルのサムネイルリストを作成 //各行に一枚ずつサムネイル function putThumb(){ thumb="<table>"; for(i=0;i<file.length;i++){ thumb+="<tr><td><img src='"+filet[i]+"' onClick='changeImg("+i+")' style='cursor:pointer;'></td></tr>"; } document.getElementById( "tf" ).innerHTML =thumb+"</table>"; } （以下同） 大変申し訳ないのですが、明日から2泊3日で旅行に行きますので、回答することができません。PCサイトビューアで助言程度ならできますが・・。 帰ってきたら回答するつもりですが、そのころには別の方が回答しているかもしれませんね。
お礼
サムネイルはうまく表示できるようになりましたが、 メインの画像が当初より「×画像」でうまく表示できません。 記述はコピペなのでスペルミスはないと思うのですが。 なお、体裁上、欲をいえば、 サムネイルについて、一応セル内はalign="center"をかけてセンタリングできるのですが、 縦画像は横画像の左位置にあうようになってしまうのでセンタリングにできたらいいのですが。 また、サムネイル、メイン画像にinsetやBORDER枠の付加、メイン部に前回のようなコメントを 付すことなどは可能ですか？ それからこれは別の公開ソースで、自動スクロールが入っていて興味をもっているのですが、 こちらもサムネイルを縮小によるwidth指定をしているようで 縦画像が混在すると、次のサムネイルと重なってしまい、下半分が欠けるようになってしまいます。 メインの方はphoto Lのwidthを外したら原寸表示ができましたが、 サムネイルはいろいろ記述を適当に直したりして試してみたのですがうまくゆきませんでした。 おわかりでしたらあわせて教えていただければと思います。 （ソースは文字数オーバーのためここには書けませんが、下記サイトのソースです） http://www.geocities.jp/miyake_kobo/dl/temp/temp_870.html
補足
体裁上の件 サムネイルのセンタリング、BORDER枠、insetの設定はスタイルシートで実現できました。
お礼
引き続きありがとうございます。 意図とするものになりそうです。 ただ、画像の置き場所がよくわからないのですが 下のようにすればいいのでしょうか。 この場合、大きな画像名になりますが、サムネイルは別に記述するのでしょうか。それとも大きな画像が縮小されているのでしょうか。 別に記述するとしたらどの部分なのか、思案中です。 （「//各行に一枚ずつサムネイル」の記述場所） またサムネイルのサイズ指定がありますが、たて版、横版が混在している場合、%表示にしたほうがいいですか。 <script type="text/javascript"><!-- //ファイルのURL file=new Array( "img/DSC_0945.JPG", "img/DSC_0953.JPG", "img/DSC_0954.JPG", "img/DSC_0959.JPG" ); //サムネイルの縦横幅 thumbw=100;//横 thumbh=60;//縦 //テーブルのサムネイルリストを作成 //各行に一枚ずつサムネイル ※なお、前回の質問中、新たな追加機能の必要が生じて、No5のお礼欄に追加質問させていただきました。