問題タブ [caption]

ここで、一連の画像に無限のカルーセル機能を適用しています: http://nokkam.com/showcase.html キャプションを「画像の邪魔にならないように」表示するようにというリクエストがありました…うーん。スクリプトによって作成されたテキストホルダー div は画像の高さに基づいているため、その位置を変更しようとする私の方法は失敗しました (高さの計算に基づいて失敗したと仮定していますが、よくわかりません)。firebug でテキストホルダーを見つけ、「bottom:-80px」の値を指定しようとしましたが、無駄でした。他の要素の背後に消えているようです。目に見えないだけで、まだそこにあるように見えます。次に、「slidecontainer」要素が表示されないようにしているのではないかと考えたので、高さをかなり大幅に調整して、まだ表示されていないことを確認しました。私の質問は：実際のスライドショーの下にテキストホルダーを生成するために、スクリプトまたはその変数の一部を変更することは可能ですか? いつものように、どんな助けでも大歓迎です。

スクリプトの関連部分

HTML

昨日、クライアントから、ここで実装した無限カルーセルの画像スペースからキャプションを削除するように依頼されました: http://www.nokkam.com/showcase.htmlスタック オーバーフローのおかげで、これを達成することができました。 .

現在、キャプション アニメーションを画像のアニメーションに似せて作成するように依頼されています (下から上にアニメーション化するのではなく、左から右にアニメーション化するのではなく)。このスクリプトを変更する価値があるでしょうか。私が求められているものに. 私はたくさんのカルーセル プラグインを検索しましたが、この方法でアニメーション化するものを見つけることができないようです. どんな助けやアイデアも常に大歓迎です.

同じページを設定し、アニメーションを制御するために「margin bottom」ではなく「left」を使用してスクリプトの正しいプロパティと思われるものを変更しようとしましたが、テキストホルダー全体が消えてしまいました。私は本当にここで動揺しています。アニメーションを制御していると思われる部分をスクリプト内に配置し、何が機能するのかを推測しましたが、これは失敗しました。

前のスクリプト

MY EDITED SCRIPT (一部の変数をやみくもに変更して悪化させた)

// テキストホルダーをフレームの外にアニメーション化 $('#textholder'+randID).animate({left:(-imgWidth-(correctTHWidth * 2))+'px'},500);

進捗！！！
したがって、以下を編集することで、少なくともフレームからテキストホルダーをアニメーション化することができました! 今、新しいテキストホルダーをフレームにアニメーション化する方法を理解する必要があります...さらに何か知っている場合は助けてください.

さらに別の進捗状況の更新
盲目的な手探り (試行錯誤) を経て、アニメーションを少なくとも正しい方向に動かすことができました。テキストバーが左から入ってきて、アニメーションが同じ方向に戻るという問題が発生しています... これが私の最後のハードルです. 何がこれを引き起こす可能性があるかについて誰かが貢献した言葉を持っていれば、私はまだ大いに感謝しています.
以下のリンクでカオスが進行中です。前もって感謝します。

したがって、アニメーションのプロパティを変更し、「showminmax」関数を完全に削除した後も、適切に機能しないアニメーションがまだ残っています。これはあまりエキサイティングな質問ではないことはわかっていますが、私は本当に新鮮なアイデアで、髪を失い始めています. みんな、ありがとう。

私の新しい、さらに（わずかに）より機能的な例は、ここで見ることができます： http://www.nokkam.com/showcase2.html

Mosaicのようなスライドキャプションを作成しようとしていますが、より軽量です。すべての主要なブラウザーではすべて問題ないように見えますが (ie8 では遅く見える場合でも)、ie7 では何も起こりません。私はieTesterでテストしていますが、バグがソフトウェアによるものなのか、自分のコードによるものなのかわかりません。改善のヒントが得られると思います！

とにかくありがとう。

HTML:

CSS:

JS:

（1）画像切り替えメニュー（メニューのアイテムをロールオーバーし、ページの他の場所に画像を表示する）と（2）キャプションロールオーバー（画像をロールオーバーし、キャプションを展開する）を一緒にハックしようとしています長いテキストを表示します)。

キャプションのロールオーバーは素敵な jCapSlide スクリプトです。これが機能する例を次に示します。

http://steph-morris.com/jCapSlide.html

( http://tympanus.net/codrops/2009/11/23/jcapslide-a-jquery-image-caption-plugin/からの元のプラグイン)

以下は、ロールオーバー状態かどうかに関係なく、キャプションを完全に表示できない画像切り替えメニューの例です。

http://steph-morris.com/novel_test.html

この cobbling-together の以前のバージョンでは、「ic_container」DIV から削除して「overlay」DIV に移動した場合に、キャプションを表示することができました。残念ながら、私はもはやそれを再現することはできません. それが私が他の人のスクリプトをハッキングするのが好きなところです。

「2 つのスクリプトを組み合わせる 101」ガイドから、これを機能させるための便利なソリューションまで、あらゆるガイダンスをいただければ幸いです。

キャプション付きの画像がいくつかあります。画像はサイトの中央に配置し、キャプションは画像の下に表示する必要があります。これまでのところ非常に単純ですが、ここに問題があります。キャプションは左揃えで、画像の左下隅から開始する必要があります (新聞のように)。

テーブルを使用した解決策を考えることはできますが、テーブルは画像や画像のキャプションではなく、テーブル データを表示するためにここにあるため、好きではありません。

テーブルソリューション:

だから、写真を投稿するたびにキャプションを書きますが、Tumblrサイトでは誰もそれを見ることができません

キャプションを表示するにはどのコードが必要ですか？

私は疑問に思っていました。Vaadinを使用して、コンポーネントのメインオブジェクト（Select、TextFieldなど）に関してコンポーネントのキャプションを表示する場所を指定する方法があります。

Selectオブジェクトの前に表示されるSelectのキャプションを取得しようとしています。デフォルトでは、キャプションはオブジェクトの上に表示されます。

キャプションを表示する場所を指定でき、LabelとSelectコンポーネントをHorizo​​ntalLayoutに追加して、希望どおりに表示する必要がない場合は、問題ありません。

誰か提案がありますか？=）

私は頭を包むことができないというかなり基本的な質問があります（おそらくここは午前5時だからです）。次のように簡略化できます。

HTML:

JS:

CSS を使用して、z-index プロパティと絶対配置を使用して、画像の上にキャプションを配置しました。問題は、ホバーするとキャプションが消え、マウスがまだ動いていると再び表示されるため、まばたきが発生することです。

明らかに、これは意図されたものではありません。基本的に、キャプション自体がホバーされているときに mouseover イベントを呼び出すべきではありません。誰かが修正しましたか？

テーブルの上にキャプションが表示されるテーブルがあります。

表の下部に別のキャプションを表示する必要があります。それはどのように可能でしょうか？

添付画像のレイアウトを実装しようとして失敗しました。テーブル設定 IE で適用された div が壊れた場合、キャプションが複数行であるときに要素がフローティングされると、レイアウトが再び壊れます。どんな提案でも大歓迎です。

レイアウトイメージ:

ここにCSSがあります

HTML