問題タブ [magnific-popup]

Magnific Popups ajax popup を使用して、Instagram のようなポップアップ エクスペリエンスを作成しています (左側の画像、右側のコメントなど)。左右のコンテンツボックスを常に同じ高さにする方法を見つけようとしています。右側の画像が大きすぎる場合は、反応する必要があるため、それに応じて div に収まります。また、ブラウザー全体が (おそらくモバイル デバイス上で) 小さくなると、画像が上部に表示され、コンテンツが下部に表示されます。

画像とコンテンツは次のようにフローティングされます。

そして、メディアクエリを使用して画面サイズを縮小すると、フロートがクリアされます。

私が説明しようとしていることを理解するのに役立つように、jsfiddle を作成しました。

jsフィドル

「開く」をクリックして iframe のサイズを変更すると、探している効果が表示されます。

では、ビュー コンテナーのサイズを設定し、左右のコンテンツ領域を常に同じ高さにするにはどうすればよいでしょうか? 単純に例を見るだけで、少しおかしいことがわかります。

編集

また、画像を垂直方向の中央に配置しようとしましたが、それも難しいようです。cssにテーブルセルを表示させようとしましvertical-align: middleたが、うまくいきませんでした。

このソリューションは、最新のすべてのブラウザーで動作するはずです。

Meteor アプリでMagnific-Popupライトボックスを使用しようとしています。私が抱えている問題は、ギャラリーを起動すると、ギャラリーのポップアップを閉じることができないことです。[x] ボタンをクリックしたり、背景をクリックしても効果はありません。それ以外の場合、ライトボックスは正常に機能しているようです。単一のポップアップを使用すると、期待どおりに機能します (閉じることを含む) が、ギャラリーは機能しません。Chrome インスペクタがクラッシュするため、何が起こっているのかを確認するのは困難です。次のエラーが表示されることがあります。

以下のコードで gallery=false を設定すると、ポップアップは正常に機能しますが、明らかにギャラリー機能が失われます...

ありがとうございました。

html:

js:

これが役立つ場合に備えて、一時的にサイトをhttp://miyako.meteor.com/に展開しました。これは Web 開発への私の最初の進出なので、乱雑なコードを許してください! :)

Magnific Popup バージョン 0.8.9を使用しています。

私は Ajax 経由でコンテンツをロードしており、コールバックを使用していますajaxContentAdded。このコールバックは、ポップアップに読み込まれたフォームを送信するためのイベント ハンドラーを次のように設定します。

これは正常に機能し、フォームの送信は正しく処理されます。イベント ハンドラー関数はそれをサーバーに投稿し、(エラーの場合) エラー メッセージを含むフォーム全体を返します。この目的のために、ポップアップのコンテンツを返されたフォームに置き換え、送信ハンドラーを再度セットアップします。

ただし、closeOnContentClick2 つの異なる時点で false に設定されているにもかかわらず、コンテンツが置き換えられた後にコンテンツがクリックされると、ポップアップはすぐに閉じます (最初は機能します)。

ちなみに、ポップアップのコンテンツには単一のルート要素があります。

著者または他の誰かがここで助けてくれることを願っています。ここで何が問題なのかわかりません。

どうもありがとうございました！

私はJavascriptに非常に慣れていないため、直感的なものもありますが、適度に迷っています. 無料のプラグインであるため、vimeo ビデオを紹介する Jquery Magnific-popup Web サイトを作成しようとしています。このポップアップ スクリプトにサムネイルをリンクしたいと思います。

私はJavascriptが初めてなので、どのファイルを含めてどれを使用しないかについて非常に混乱しています。

私はこのウェブサイトで作業しています: http://dimsemenov.com/plugins/magnific-popup/documentation.html#mfp-build-tool

そのためにどのスクリプトを使用し、どのスクリプトを省略すればよいでしょうか? 助けてください！助けてくれてありがとう

Magnific Popup Responsive lightbox プラグインを使用して YouTube ビデオを開きます。

私のコード:

Chrome では、リンクをクリックするとライトボックスが開き、ビデオが読み込まれる場合と読み込まれない場合があります。ほとんどの場合、ビデオなしでオーディオのみをロードします。

「発信元が " http://www.youtube.com " のフレームが、発信元が "[my domain]" のフレームにアクセスすることをブロックしました。プロトコル、ドメイン、およびポートが一致する必要があります。" という警告が表示されます。- Chrome では通常、iframe でこの警告が表示されます。また、.swf ファイルのロードにも失敗しています。

ローカルではなく、サーバー上で開発しています。

これは、Safari、Firefox、および IE8+ で正常に動作しています。この問題は Chrome でのみ発生しています。

使用するプラグイン: mb.extruderとmagnific-popup

次のようなコードを使用して、ページのインライン コンテンツに magnific-popup を使用する場合:

それは完璧に機能します。ただし、上記と同じコードを mb.extruder リンクとして使用すると、リンクが通常の URL として扱われ、ページが /#test-inline で読み込まれます。

ここに私のjquery関数があります：