問題タブ [shadowbox]

Apple の Web サイトには多くの視覚的に魅力的な要素があり、駆け出しの Web 開発者が特定の要素を見て、その外観を再現する方法を知りたがる場合があります。だから私は質問を提起します（そして答えを提供します）：

Apple はどのようにして角を丸くしたドロップ シャドウ ボックスを作成しますか?

説明するのは少しトリッキーな問題ですが、ここに行きます...

1) domain1 の swf ファイルは、domain1 の xml ファイルを読み取ってデータを表示します 2) また、domain1 でホストされている別の html ファイルの ShadowBox ポップアップを開くためのリンクも含まれています 3) この swf ファイルは、domain2 の iFrame にも埋め込まれています 4) domain2 には、 HTMLにもインストールされたShadowBox

この問題は、基本的にクロスサイト スクリプティングにかかっています。

ドメイン 2 に埋め込まれた swf は、ドメイン 2 の ShadowBox を起動してこのポップアップを開きますが、フラッシュ内の JavaScript 呼び出しはドメイン 1 からのものであり、クロスドメインのアクセス許可の問題が発生します。

誰でもこれを回避する方法を考えることができますか? JSONP は 1 つの選択肢のように思えますが、私はこれを完全に快適に使用できるわけではありません。JQuery には、これにアプローチする方法はありますか? 今のところ何も見つかりません...

シャドウボックスに正しい画像が表示されるという問題があります。私は、samll、medium、largeの画像を含むかなり基本的な画像ギャラリーを持っています。jQueryの例を次に示します。

これですべて機能し、クリックすると必要なすべてのタグが変更されていることがDOMでわかりますが、常に開くシャドウボックスのメイン画像はデフォルトの画像です（jQueryを介して読み込まれる新しい画像ではありません）。

これを回避する方法はありますか？

ロードするHTML：

サムネイル画像をクリックすると、次のようになります（正しく、Firefoxでこの表示選択ソースを確認できます）。

しかし、リンクをクリックすると、シャドウボックスに元の製品1の画像が開きます（非常に煩わしい）。

何か案は？

更新：ここのサンプルページ（http://www.adrianjacob.com/test/test.html）

修正済み：Shadowbox.clearCache（）; Shadowbox.setup（）;

jquery関数に追加されました:)

アディ

Google Chrome でシャドウボックス 3.0.3 を使用しようとしています

私は得ています：

クロームで

shadowbox.js:17 Uncaught TypeError: 未定義のプロパティ 'style' を読み取れません

ファイアフォックスで

F は未定義 g.find=(function(){var aD=/((?:((?:(...()}};g.skin=k;T.Shadowbox=g})(window); shadowbox.js (17 行目)

IEでは問題なく動作するようです

私のコードは以下の通りです：

何が原因でしょうか？

ヘルプ！私はライターチームのウェブサイトに取り組んでいます。

彼らは、シャドーボックス効果を使用して、自分が取り組んだ特定の仕事 (ポートフォリオ) の例を示したいと考えています。

たとえば、実際には .doc のスクリーンショットである画像を (オーバーレイで) 開くと、大まかに説明するキャプションが表示されます。問題は、ユーザーがファイル (.doc、.pdf) をデスクトップにダウンロードしたり、作業した別のサイトにリンクしたりできるように、キャプション内にリンクが必要なことです。

私はFancyboxでそれを行うことができましたが、リンクがホバーされたときに望ましくないテキストを表示する方法に含まれています(ブラウザの黄色のツールチップ)。

コードは次のとおりです。

この場合、それはあるサイトへのリンクです。

シャドーボックスで開く必要があるリンクのリストを Javascript で生成しています。最初は、任意のページ ロード (たとえば Ctrl-F5) で、リンクはシャドウ ボックスではなくウィンドウで開きます。運や偶然の偶然によって、シャドウボックスで開くことができれば、ページが再度リロードされるまで機能します。

ページ内のマークアップは次のとおりです。

blAgreements でリンクを作成する JavaScript は次のとおりです。

Shadowbox.init(); を呼び出しています。リスト項目の作成を追加した後、時々動作します。私が理解したいのは、なぜ一貫性がないのか、どうすれば信頼性を高めることができるのかということです。

更新 #1:これは競合状態のようです。少なくとも IE でページをロードし、クリックする前に待つと、最終的には機能します。IE8では約3秒待たなければなりません。FF はその動作に従っていないようです。

更新 #2: FF では、ページの読み込み後にリンクをクリックすると、他の Web ページと同じように URL が開きます。戻るボタンを押してリンクをもう一度クリックすると、URL がシャドウボックスに表示されます。

私はデザイン/プログラミングの世界に不慣れなので、問題は簡単に解決できると確信しています. moz-box-shadow エフェクトをヘッダーに追加しようとしています。しかし、そのコンポーネントを追加するとすぐに、スペースを占有しているヘッダーが水平方向に短くなります。ヘッダーは Twitter のように、シャドウ効果を使用するようにしたいと考えています。

また、幅を設定した方法は、クロスブラウザの問題を引き起こす可能性がありますか?

フルカレンダーでシャドーボックスを呼び出す方法..イベントがあり、ユーザー(クライアントブラウザー)がそのイベントをクリックすると、シャドーボックスまたはライトボックスが呼び出されると仮定します...どんなアイデアでも役立ちます..ありがとう

私は子ページ（iframe - shadowbox）にこの機能を持っています：

テキスト入力「Name」の値をメイン ページの div に送信し、そこで「Hello,」というメッセージを表示します。
Firefox では問題なく動作します。ただし、Google Chrome では機能しません。値を送信したり、シャドウボックスを閉じたりしません。
Google Chrome の親ページにアクセスする代わりの方法はありますか?

前もって感謝します、
アレクサンダー。

私はほとんどの場合、モーダルエフェクトにShadowBox.jsを使用します。ShadowBoxでうまくやっていけないように見えるという要件があり、それを処理できる別の推奨事項があるかどうか疑問に思います。要件は次のとおりです。

ギャラリーページでは、ユーザーはギャラリー内のすべての写真を表示します。クリックして写真を開くと、モーダルがギャラリー固有のナビゲーション（簡単）でポップアップ表示されます。

モーダルは、暗いコンテンツの通常の効果がありますが、写真（場合によってはビデオ）が表示される一種のフレームがあります。

フレームボックスの幅は常に900ピクセルで、内側の画像の最大幅は800ピクセルです。

写真は常に900ピクセルのフレームの中央に配置され、両側に少なくとも50ピクセルのパディングがあります。たとえば、画像の幅が600ピクセルの場合、画像の両側に150ピクセルが表示されます。

写真はすべて、アップロードする前にトリミングおよび準備されるため、幅が800ピクセルを超えることはありません。

シャドウボックスで寸法を簡単に設定できますが、これにより画像が強制的に引き伸ばされ、寸法がダンプされ、標準のinitオプションを使用すると、画像のサイズが変更されたモーダルが得られます。

前もって感謝します