* [[サポート掲示板/87]] [#zb928dcf]
|お名前|イレブン|
|状態|完了|
|追加日時|2008/10/09 (木) 00:07:03|
|対象CGI|みのアルバム|
|タイトル|サムネイル表示について|
** 本文 [#b40fd78d]
調度1年ほど前から利用させて頂いております。
早速質問なのですが、旧掲示板/124の質問にもあるように私もサムネール表示を縦1列を変更したいと思ってます。
要望としましては横に写真が5枚並び、6枚目、11枚目･･･の写真は次の列になる。
写真の表示順序は左上から登録した順に掲載されると嬉しいです。
更に贅沢を言えば、コメントはサムネイル表示の同じ枠の写真の下に表示されると、なおベストです。
>サムネイル表示している部分を探すことが出来ますか？
との事ですが、これは「view.cgi」であっていますでしょうか？perlの知識がないと非常に困難との事なので、ここで間違っていたら諦めます。以上、よろしくお願い致します。
----
- とりあえず、サムネイル表示している部分は、view.cgiで正解です。 -- [[みの]] &new{2008/10/09 (木) 09:31:42};
- で、サムネイル表示している部分は、そのview.cgiのどのあたりか分かりますか？ -- [[みの]] &new{2008/10/09 (木) 09:32:13};
- 第一関門突破できてよかったです。サムネイル表示がどこかは、帰宅しましたら調査します。 -- [[イレブン]] &new{2008/10/09 (木) 10:30:45};
- 遅くなりました。サムネイル表示は70行目〜90行目あたりですね。 -- [[イレブン]] &new{2008/10/10 (金) 00:27:57};
- 確か、半年程前に「各写真をクリックすると拡大表示します。」を上の方に表示したくて、編集したことがありました。 -- [[イレブン]] &new{2008/10/10 (金) 00:30:29};
- 合ってます。そこの中で、tableタグを使って縦１列に表示するようにしています。 -- [[みの]] &new{2008/10/10 (金) 22:46:34};
- まず、tableタグのwidth=**オプションを削除している部分をはずしてしまいましょう -- [[みの]] &new{2008/10/10 (金) 22:48:21};
- 「width=**」と書かれている部分を消してしまいます。 -- [[みの]] &new{2008/10/10 (金) 22:49:10};
- 続けて、tableタグ行に、trタグとtdタグを追加します。 -- [[みの]] &new{2008/10/10 (金) 22:50:59};
- そして、tableタグを閉じる行に、tdタグとtrタグそれぞれの閉じるタグを追加します。 -- [[みの]] &new{2008/10/10 (金) 22:53:28};
- ここまでOKでしょうか？ -- [[みの]] &new{2008/10/10 (金) 22:54:18};
- 遅くなりました。OKだと思います。 -- [[イレブン]] &new{2008/10/11 (土) 01:49:19};
- 73行目辺りを73行目辺りを print "＜table border=1＞＜tr＞＜td＞\n"; -- [[イレブン]] &new{2008/10/11 (土) 01:51:36};
- 89行目辺りを print "＜/td＞＜/tr＞＜/table＞各写真をクリックすると拡大表\示します。\n"; -- [[イレブン]] &new{2008/10/11 (土) 01:52:15};
- と、してみました。ちなみに「＜」は実際には半角です。 -- [[イレブン]] &new{2008/10/11 (土) 01:54:35};
- 随分理解されているようですね。では、あとは簡単のような気がします。 -- [[みの]] &new{2008/10/11 (土) 13:26:46};
- foreach *** { 行の下から } で終わっている間にあるprint文が１枚の写真とコメントを表示しています -- [[みの]] &new{2008/10/11 (土) 13:29:37};
- $d[0]がIDで、$fileが画像、$cmtがコメントを表示している箇所です。 -- [[みの]] &new{2008/10/11 (土) 13:31:07};
- ですので、画像表示の下にコメントを入れたいのであれば、foreach の間全てを再度tableタグで括って、画像とコメントを上下に表示するようにすれば良いんですよ。多分 -- [[みの]] &new{2008/10/11 (土) 13:33:28};
- ちなみに、面倒でないのは、今の状態でコメント表示を止めてしまうことも１つの手だと思います -- [[みの]] &new{2008/10/11 (土) 13:35:54};
- 写真だけ並べて表示する方法です -- [[みの]] &new{2008/10/11 (土) 13:37:34};
- 83、84行目をコメントアウト（先頭カラムに#）、86行目をformタグだけにしてしまうと、出来ると思います。 -- [[みの]] &new{2008/10/11 (土) 13:40:16};
- おはようございます。コメントほぼ表示できました！ -- [[イレブン]] &new{2008/10/12 (日) 06:59:57};
- ただ、コメント表示をするとコメントの長さによりサムネイルの表示にバラつきができてしまうので、こちらはコメントアウトしまいした。 -- [[イレブン]] &new{2008/10/12 (日) 07:10:46};
- できたということでよろしかったでしょうか？ -- [[みの]] &new{2008/10/12 (日) 19:02:45};
- スイマセン。まだです。print文をそのままコピーしたら横2列にはなったのですが、同じ写真がそのまま2列になっただけでした。 -- [[イレブン]] &new{2008/10/12 (日) 20:41:15};
- 今、いろいろやって整理がついてないので、まとめましたら疑問点等報告させて頂きたいと思います。 -- [[イレブン]] &new{2008/10/12 (日) 20:43:35};
- こんばんは。foreachタグが繰り返しを意味するようなので、print分はコピーする必要はないようですね。 -- [[イレブン]] &new{2008/10/13 (月) 21:59:46};
- 現状は縦に並んでいたサムネイルが、横並びになりました。仮に10枚の写真があった場合、アドバイスどおりに修正したと仮定した時、6枚目の写真からは2段目に移りますか？ -- [[イレブン]] &new{2008/10/13 (月) 22:04:18};
- ブラウザの表示幅に応じて、２段目へと移ると思いますよ。 -- [[みの]] &new{2008/10/14 (火) 21:23:50};
- 現在の追加設定は foreach $line (@OUT_LIST) { の上に print "＜table border=3＞\n"; を追加しています。 -- [[イレブン]] &new{2008/10/15 (水) 00:05:29};
- $point++; の下の } の下に print "＜/table＞\n"; を追加しています。 -- [[イレブン]] &new{2008/10/15 (水) 00:08:50};
- この設定で写真が横並びの状態で、ブラウザの表示幅に応じて2段目以降には移っておりません。 -- [[イレブン]] &new{2008/10/15 (水) 00:13:47};
- 今回の設定とは関係ないとは思いますが、 pointタグ(？)はどういった意味があるのでしょうか？差し支えなければ、教えて欲しいと思っております。 -- [[イレブン]] &new{2008/10/15 (水) 00:20:34};
- それで、ちゃんと表示されていますか？ tableタグが正しく閉じられていないような気がします。trとtdタグを使っていないから平気なのかな？ -- [[みの]] &new{2008/10/15 (水) 22:18:42};
- それと、「pointタグ(？)」とは、$point++;のことを言われていますか？ -- [[みの]] &new{2008/10/15 (水) 22:19:27};
- 毎回遅く申し訳ありません。現状の設定を貼り付けさせていただき説明させて頂きます。表示はちゃんとされています。border=1 で写真全てを囲い、各写真ごとにborder=3で囲う形となり、ブラウザに表示されております。
## -------------------------------------------------------------------
## サムネイル画面
## -------------------------------------------------------------------
sub DispSmnl {
print "<table border=1><tr><td>\n";
$point = 0;
print "<table border=3>\n";
foreach $line (@OUT_LIST) {
( $file,$cmt ) = split( /,/,$line );
@d = split( /\./,$file );
print "<form method=\"POST\" action=\"$VIEWCGI\">\n";
print "<input type=\"hidden\" name=\"MOD\" value=\"スライドショー停止\">\n";
print "<input type=\"hidden\" name=\"IDX\" value=\"$point\">\n";
print "<input type=\"hidden\" name=\"DIR\" value=\"$DIR\">\n";
print "<input type=\"hidden\" name=\"TITLE\" value=\"$TITLE\">\n";
print "<td align=\"center\" valign=\"center\">\n";
print "ID:$d[0]<br>\n";
print "<input type=\"image\" src=\"$BASEURL/$DIR/$file\" width=\"$SUM_WID\" name=\"ID:$d[0]\"><br>\n";
print "</td>\n";
print "</form>\n";
$point++;
}
print "</table>\n";
print "</td></tr></table>各写真をクリックすると拡大表\示します。\n";
}
-- [[イレブン]] &new{2008/10/16 (木) 00:51:26};
- pointは $point = 0; と $point++; の両方です。検索してもワンポイントみたいなものしかみつからくて・・・ -- [[イレブン]] &new{2008/10/16 (木) 00:57:55};
- ちなみに今回貼り付けた設定の下から2個目の print "＜/table＞\n"; を消して、 $point++; の上か下のどちらかに print "＜/table＞\n"; を記入した場合は -- [[イレブン]] &new{2008/10/16 (木) 01:05:24};
- 2枚の写真が横並びとなり、残りの写真はその下に1列で縦に並ぶ状態です。 -- [[イレブン]] &new{2008/10/16 (木) 01:07:59};
- 枠は横に並んだ2枚の写真を boder=1 で囲い、その2枚の写真の左の写真を border=3 で囲う形となり、ブラウザに表示されます。 -- [[イレブン]] &new{2008/10/16 (木) 01:11:22};
- 1列に縦に並んだ写真は枠に囲われない状況となります。 -- [[イレブン]] &new{2008/10/16 (木) 01:12:42};
- そうですか、tableタグの使い方はあってそうですね。 -- [[みの]] &new{2008/10/16 (木) 09:41:20};
- $pointは、写真の枚数を数える値を格納している変数です。最初に$point = 0;で、0リセットして、表示終わったところ$point++;で、カウントアップしているだけで、現状は、その値を利用していない状況です。あまり気にする必要はないかと思います。 -- [[みの]] &new{2008/10/16 (木) 09:43:34};
- そういえば、旧掲示板/83と旧掲示板/245の「２．スライドショーの縦サイズを指定しない」の設定をしております。こちらは今回の設定と何か関係はございますでしょうか？ -- [[イレブン]] &new{2008/10/17 (金) 00:24:08};
- サムネイル表示とスライドショー表示は全然違う処理なので関係はありません。 -- [[みの]] &new{2008/10/17 (金) 09:55:04};
- 素人ながら模索中でありまして今のところ「foreach」のところが出来ない原因かと思ってます。そんな中一番最初に登録した写真が一番上に来るように、53行目の if ( $SORT_FLG ne '0' ) { @OUT_LIST=reverse(@LIST); } の「revere」を削除したところこちらは上手くいきました。 -- [[イレブン]] &new{2008/10/19 (日) 21:39:08};
- あとは写真が（自分の考えではウィンドウ幅に関係なく）5枚ごとに次の列に移れば完成なので、何か進捗がありましたら報告したいと思います。 -- [[イレブン]] &new{2008/10/19 (日) 21:43:45};
- 完了扱いとさせて頂きます -- [[みの]] &new{2009/02/24 (火) 21:11:08};
#comment
[[サポート掲示板]]
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
