slimbox他モーダルウィンドについて

質問

お世話になります。
現在自分のサイトのイラストギャラリーにslimbox2を利用しています。
サイトは小さく纏め、標準のモニターサイズ以上ならスクロールなど不要で閲覧できる構成にしているのですが、ちょっと見栄えが悪い状態が発生したので、ご指導ねがいます。

画像の表示のリンクはこうなってますが、

<a href="表示したい画像" rel="lightbox-top" title="">
<img src="表示したい画像のサムネイル" width="16" height="16" title="">

titleの中へコメントを入れると、表示されたウィンドの画像の下部へ入力されたコメントが表示されます。
一行二行ですと影響はないのですが、
コメントが複数行に亘るとサイト自体のスクロールが必要になるため、一時的にスクロールバーが表示され、がたっ、がたっと画面が揺れてしまいます。

可能であればコメント部分のみスクロールさせる
または、表示された画像のウィンドにカーソルを置くとコメントが表示される
等出来ると良いのですが、可能でしょうか？

またはslimbox以外のもので、望む効果が出せる物がありましたら、教えていただけますでしょうか。

回答No.1

fujillin

slimbox2ってまったく存じませんので、内容を知らずに空想してみただけですが、回答が無いようなので・・・

＞可能であればコメント部分のみスクロールさせる
想像では、コメント表示の部分が一つの要素になっていると思います。（divなど）

＞一行二行ですと影響はないのですが、
とのことなので、heightを1行または2行に固定する、あるいはmax-heightを2行に設定するなどしておいて、overflow:scroll等としておくことで、実現できそうな気がしますがいかがでしょうか？
元のスクリプトがコメント欄のstyleを書き換えたりしていなければ、この方法ならCSSのみの変更で実現できる可能性があります。

＞表示された画像のウィンドにカーソルを置くとコメントが表示される
上と同様に、コメント部分を通常時は非表示（display:none)となるようにしておいて、マウスオーバー時のイベント部分のスクリプトを追記することになるかと。
この場合は、元からあるコメント欄を利用するか、整合をとるのが面倒なら元のものは非表示のままで、新しいコメント欄を作成し表示するということも考えられます。

いずれにしろ、コメント部分がフロートして表示するようにしておく必要があると思われますので、position:absoluteなどにしておいて、位置を画像との相対位置で固定しておくかスクリプトで計算するかなどが必要となるでしょう。

そのままではうまくいかない可能性も高いですが、何かのヒントにでもなれば幸いです。

お礼

解答有り難う御座います。
お返事が遅くなりましたがお陰で無事解決へ至りました。

プログラムの中を探してみたところ、slimbox2.cssの記述の中にCaptionという部分への設定項目が見つかりました。
キャプション＝作品のコメント＆解説なのでここかなと、
font-weight: normal;
max-height: 5.6em;(現在の文字サイズ設定で4行分)
overflow: scroll;
を記入。
必要無い横スクロールも表示されてしまったので、調べて
overflow-x : hidden ;
を追加し、綺麗に表示されるようになりました。

調べながらで無いと基本の構成にも苦労する技量なので大変助かりました。