JCE MediaBox

JCE MediaBox is an optional plugin for Joomla! 1.5, Joomla! 2.5 and Joomla! 3 which creates customizable content popups in a manner similar to the popular Lightbox and Slimbox scripts, as well as providing tooltips.

JCE MediaBox popups and tooltips are themeable and include 4 themes; Standard, Light, Shadow and Squeeze.

JCE MediaBox does not add a button to the editor toolbar. JCE plugins are used to create JCE MediaBox popups, but JCE MediaBox can be used without the JCE Editor.

Unlike Lightbox and Slimbox, JCE MediaBox can create popups to almost any type of media item, from images, to flashquicktime,windows media files, as well as support for YoutubeGoolge VideoMetaCafeDaily Motion, and Vimeo media links (additional types supported with add-ons), and internal and external website pages.

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

Examples

Popup image on a text link - Winter

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

Single image popup

dandelion-53800 1280

<a href="/images/stories/dandelion-53800_1280.jpg" target="_blank" type="image" class="jcepopup" title="Nature::Dandelion" data-mediabox-group="image"><img src="/images/stories/thumbnails/thumb_dandelion-53800_1280.jpg" alt="dandelion-53800 1280" width="120" height="90" title="water_lillies.jpg" />

Simple gallery using 2 grouped images

dandelion-71003 1280 winter-84723 1280

<a href="/images/stories/dandelion-71003_1280.jpg" target="_blank" class="jcepopup" data-mediabox-group="nature"><img src="/images/stories/thumbnails/thumb_dandelion-71003_1280.jpg" alt="dandelion-71003 1280" width="120" height="90" style="margin: 0 5px 0 0;" /></a> <a href="/images/stories/winter-84723_1280.jpg" target="_blank" type="image/jpeg" class="jcepopup" data-mediabox-group="nature"><img src="/images/stories/thumbnails/thumb_winter-84723_1280.jpg" alt="winter-84723 1280" width="120" height="90" /></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/item/create-an-iframe-or-ajax-popup" target="_blank" type="text/html" class="jcepopup" title="Tutorials::Create an Ajax popup" data-mediabox-width="640">Internal </a>
  <a href="//en.wikipedia.org/wiki/Joomla" target="_blank" class="jcepopup" title="Joomla!" data-mediabox-width="800">External</a>

FLV Video

<a href="/images/big_buck_bunny_trailer_480p.flv" target="_blank" type="video/x-flv" class="jcepopup" data-mediabox-controls="controls" data-mediabox-poster="/images/big_buck_bunny.jpg" data-mediabox-height="483" data-mediabox-width="854">FLV Video</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>

FLV embedded using video with type="video/x-flv" and played using the bundled Flash media player.

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

Mp4 embedded using video with type="video/mp4". This video will display using the native player on browsers that support mp4 video, and played using the bundled Flash media player on browsers that don't (IE 6,7,8)

<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>

Video samples from https://www.bigbuckbunny.org (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org

Share this product