Componentes

• Olalla
• Editor JCE
• 17 Febrero 2014
• 27 Octubre 2019

JceMediaBox es un plugin del editor JCE que es mi preferido para Joomla, con este plugin podemos generar un ventana emergente estilo "caja de luz". Tanto se puede utilizar con o sin el Editor JCE. Se instala desde el instalador oficial de Joomla.

JCE MediaBox  tiene la capacidad de mostrar imágenes, vídeos, en línea y el contenido de iframe en un popup, cargando el contenido y dejando de fondo el anterior. Este plugin incluye 4 temas que emulan los scripts populares tales como la mesa de luz, ShadowBox y Squeezebox y tambien temas personalizados también.

Descargalo aqui!

Una vez instalado - Habiilitar y configurar plugin

Una vez instalado en tu joomla no te olvides habilitarlo/publicarlo para que funcione correctamente. ( plugins --> system --> jce mediabox)

Ahí podras configurar el tema, la velocidad desvanecimiento y la velocidad carga,  el ancho y el alto del popup, que componente no debe utilizarlo, que puede cargar y monton configuraciones mas.

 Para maquetar el popup

Muchas veces utilizamos este plugin para cargar algun articulo o contenido propio de la web, es lo normal.

Muchas veces no pilla el css que tenemos en nuestra plantilla, el motivo que encuentro y creo es que solo carga el contenido y no carga los estilos de css, por lo que suelo forzar la carga de nuestro css.

Ejemplo de usos de JCEMediabox en override virtuemart de detalles de productos.

En nuestro proyecto de superoliva.es que tiene virtuemart en la vista detalle de un producto tiene un link para hacer una pregunta sobre el producto.

En el override de productsdetails/default.php se monta el link:

<?php
     $askquestion_url = JRoute::_('index.php?option=com_virtuemart&view=productdetails&task=askquestion&virtuemart_product_id=' . $this->product->virtuemart_product_id . '&virtuemart_category_id=' . $this->product->virtuemart_category_id . '&tmpl=component', FALSE);
                ?>
     <a class="comentario jcepopup noicon" href="/<?php echo $askquestion_url ?>" rel="nofollow" rev="stylesheet1" data-mediabox-width="550" data-mediabox-height="500" data-mediabox-group="stylesheet1"><?php echo vmText::_('COM_VIRTUEMART_PRODUCT_ENQUIRY_LBL') ?></a>
            <?php

Los data-mediabox-width="550" y data-meidabox-height="500" indica las medidas del popup.

En el override de askquestion/form.php , que el que carga en popup tenemos que añadirle:

$doc             = JFactory::getDocument();
$doc->addStyleSheet(JURI::base(true). '/templates/nuestraplantilla/css/bootstrap.min.css');
$doc->addStyleSheet(JURI::base(true). '/templates/nuestraplantilla/css/custom.css');

Asi de esa forma cargamos el css de nuestra plantilla.

En este mismo ejemplo, una vez cubierto el formulario no carga otro vista de virtuemart, indicando que es correcto: askquestion/mail_confirmed.php, por lo que tenemos que hacer lo mismo en ese fichero, ademas este fichero tiene un button para cerrar el popup, por lo que tuve que crear un script que llame a la funcion del objeto javascript de jcemediabos:

<script>
    function cerrar(){
        //~ console.log(window.top.jcepopup);
        var objeto = window.top.jcepopup;
        objeto.closelink.click('Close');
    }
</script>

Y el evento de button llamar a la funcion cerrar.

JCE mediabox en item menu

Si necesitada de hacer cambios de codido podemos añadir un item de menu y este se abrá en un popup con JCEMediabox.

Ir a Menu Principal --> item menu deseado y en opciones (derecha)

 Debes poner en estilo css enlace: jcepopup como en la imagen siguiente:

Para usarlo en articulos:

Solo debes linkar la palabra o palabras que quieras, con lo que quieras que aparezca. 

1. Indicarle url.

2. Ventanas Emergentes:

• • Tipo de ventana Emergente --> Sistema JCE MediaBox
  • Escribes las dimensiones
  • Escojes tipo de multimedia: ej. enlaces internos/ajax.

Referencias:

Documentacion JCE MediaBox