JCE MediaBox

JCE MediaBox is an extension for Joomla! for creating responsive lightbox-style popups for images, video and article content.

With support for most common media formats, from images to video (mp4, wmv, quicktime etc.), Youtube, Vimeo, DailyMotion, and other content (pdf, html, external web pages, internal Joomla content), MediaBox can display using 6 different themes - Standard, Light, Shadow, Squeeze, UIKit and Bootstrap ( The UIKit and Bootstrap themes require that your template is using one of these css frameworks).

A full range of tutorials on creating popups for each media type is available here

JCE MediaBox is a free download. Forum based support is provided with a JCE Pro Subscription.

Download JCE MediaBox

Examples

Popup image on a text link - Winter

<a href="/images/mediabox/winter.jpg" target="_blank" type="image" class="jcepopup" title="Nature::Winter">Winter</a>

Single image popup

<a href="/images/mediabox/flower.jpg" target="_blank" type="image" class="jcepopup" title="Nature::Dandelion" data-mediabox-group="image"><img src="/images/mediabox/thumbnails/thumb_flower.jpg" alt="Flower" />

Simple gallery using 2 grouped images

<a href="/images/nature.jpg" target="_blank" class="jcepopup" data-mediabox-group="nature"><img src="/images/thumbnails/thumb_nature.jpg" alt="Nature" style="margin: 0 5px 0 0;" /></a> <a href="/images/winter.jpg" target="_blank" type="image/jpeg" class="jcepopup" data-mediabox-group="nature"><img src="/images/thumbnails/thumb_winter.jpg" alt="Winter" /></a>

Youtube popup

<a href="//www.youtube.com/embed/JX7167Nn0R4" target="_self" data-mediabox-width="480" data-mediabox-height="390" type="iframe" class="jcepopup" title="Joomla 3">Youtube popup</a>

Internal or External Pages

  <a href="/component/zoo/?task=item&item_id=767&Itemid=118" target="_blank" type="text/html" class="jcepopup" title="Tutorials::Create an Ajax popup" data-mediabox-width="800" data-mediabox-height="600">Internal </a>

  <a href="//en.wikipedia.org/wiki/Joomla" target="_blank" class="jcepopup" title="Joomla!" data-mediabox-width="800">External</a>

PDF Document

<a href="https://cdn.joomlacontenteditor.net/images/logo/joomla/Joomla_Brand_Manual.pdf" class="jcepopup" data-mediabox="1" 
data-mediabox-width="800">PDF Document</a>

Please Note: PDF Documents do not display correctly on iOS (iPhone and iPad) or at all on Android mobile devices. Because of this, on iOS the link will open the PDF in a new tab and on Android the Popup will open but will display a link to "View the PDF" which when tapped results in the PDF being downloaded.

Mp4 Video

<a href="/images/big_buck_bunny_trailer_480p.mp4" target="_blank" type="video/mp4" class="jcepopup" data-mediabox-controls="controls" data-mediabox-poster="images/big_buck_bunny.jpg" data-mediabox-height="483" data-mediabox-width="854">Mp4 Video</a>

WebM Video (supported browsers only)

<a href="/images/big_buck_bunny_trailer_480p.webm" target="_blank" type="video/webm" class="jcepopup" data-mediabox-controls="controls" data-mediabox-poster="images/big_buck_bunny.jpg" data-mediabox-height="483" data-mediabox-width="854">WebM Video</a>

Ogg Video (supported browsers only)

<a href="/images/big_buck_bunny_trailer_480p.ogg" target="_blank" type="video/ogg" class="jcepopup" data-mediabox-controls="controls" data-mediabox-poster="images/big_buck_bunny.jpg" data-mediabox-height="483" data-mediabox-width="854">Ogg Video</a>

Mp4 embedded using video with type="video/mp4". This video will display using the native player on browsers that support mp4 video.

<video src="/images/big_buck_bunny_trailer_480p.mp4" poster="/images/big_buck_bunny.jpg" controls="controls" width="640" height="368" type="video/mp4"></video>