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>

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>