IFRAME用のシャドウボックス

[Emmanuel_Schanzer]

私たちは、主流の数学、科学、社会科の授業の中でコンピュータサイエンスを教えるために Bootstrap カリキュラムを活用している教師のためのコミュニティサイトを運営しています。当社の IDE はクラウドベースであるため、Discourse の投稿内にそのインスタンスを埋め込むことが可能です。これはまさに驚くべきことであり、この機能一つだけで既にプラットフォームへの移行に大いに満足しています。

ただし、この方法で埋め込みたいコンテンツは他にも多くあり、その一部は投稿の幅を超えてしまうことがあります。CSS をカスタマイズして投稿の幅を広げる試みはうまくいっていません。最終的に私が望んでいるのは、IFRAME が画像と同様に扱われることです。つまり、サムネイルが表示され、それをクリックするとブラウザのウィンドウ幅いっぱいに広がるシャドウボックスが開くようにしたいのです。

これまで Discourse のプラグイン開発に触れたことはありませんが、特定のパターンに一致する URL を取得し、適切なマークアップを生成する Onebox 拡張のようなものも考えられます。もっと簡単な方法があるかもしれません。同様のユースケースに直面したことがある方はいますか？

[codinghorror (Jeff Atwood)]

Maybe @Johani would have some ideas. In general heavy embedding of live content is a bad idea, whereas “click-to-load” like codepen does is more ideal:

https://codepen.io/adrianroworth/pen/OpeyZq

[Emmanuel_Schanzer]

Thank you both for the quick reply!

@craigomez, I might be misreading your post, but it sounds like you’re suggesting I modify the source of the page I’m embedding, in order to have links in that page open in a shadowbox. Is that right? If so, let me clarify that I don’t want that – rather, I want the enclosing IFRAME (a node in the rendered topic, which just happens to contain another page) to be in a shadowbox. And if that’s not right, and I misunderstood, my apologies.

@codinghorror, click-to-load is a mighty fine solution. Happy to pursue that option, if there’s a resource somewhere to follow?

[sam (Sam Saffron)]

It would be super cool if you could maximize without needing to visit the site, I wonder if this is a feature @chriscoyier would be interested in adding, not sure how it would be wrangled, but it makes sense for this example you made, for sure.

[Emmanuel_Schanzer]

I’d love to make our editor click-to-load. Is there an example somewhere for how this was done with CodePen? I’m assuming whitelisting WeScheme.org in our installation is the least of the steps needed.

[mcwumbly (Dave McClure)]

check out this previous post/topic for additional context:

Embedding pens from CodePen

Hey Team, oEmbed for CodePen is ready to rock: http://blog.codepen.io/documentation/features/oembed/ Lemme know if you have any questions or anything.

Seems like that is done on the codepen side?

Make the preview “Click-to-Load” : Check the checkbox next to “use click-to-load” to enable the preview version for your embedded Pen. Preview embeds show a static image preview of your Pen with a “Run Pen” button. When your visitors click the button, the Pen will load.

via: https://blog.codepen.io/documentation/features/embedded-pens/

[Johani (Joe)]

This is now possible with a theme component:

IFrame Lightboxes

This is a theme component that adds the ability to open iFrames in lightboxes. Samples This component adds an “expand” button on top of the iframes you enable it on. [expand button] Clicking the button will open the iframe in fullscreen in a lightbox. [full screen iframe lightbox] Clicking either the dark area around the iframe or the x at the top right corner closes the lightbox. The same way it works for default image lightboxes. Settings There’s only one setting. You add the domains…

[Emmanuel_Schanzer]

Very interesting! I was able to install the theme using the linked directions (thanks!), but I don’t see a UI for editing the theme settings in order to whitelist my site. Any suggestions for where I should be looking? Thanks in advance!

[Johani (Joe)]

If you’ve installed the theme and cannot see the settings area, then that probably means you’re on a version of Discourse that does not support theme settings.

Even if you’re on the stable branch, the latest release, 2.0, supports theme settings so I would suggest you update Discourse and try again.

[Emmanuel_Schanzer]

Success! Thanks so much, @Johani! And thanks to everyone else who chimed in with suggestions and advice!