SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribuciones sur SPIP-Zone, 71 visitantes en este momento

Portada del sitio > Affichage multimédia > Galeries et diaporamas > MediaBox > MediaBox

MediaBox

11 de mayo de 2010 – por Martin Gaitan – commentaire

Todas las versiones de este artículo: [Español] [français]

5 votos

Introducción

La MediaBox es una caja multimedia polivalente y personalizable. El plugin está basado en la moderna biblioteca ColorBox, que ha sido enriquecida y adaptada a SPIP.

Por defecto, mediabox propone 5 pieles. Es bastante fácil de crear configuraciones particulares para un sitio. Mediabox también es multilingüe.

En el sitio público, la caja se puede activar con sólo añadir las clases en los enlaces (con la opción de especificar la anchura y la altura del iframe en cada enlace).

Para necesidades más complejas, Mediabox también se puede invocar directamente en Javascript con un montón de opciones operativas.

Configuración

La página de configuración de mediabox está accesible desde el menú homonimo.

El panel de control le permite modificar los selectores CSS utilizados para asociar los vínculos que activan la caja.

También es posible cambiar la apariencia de la caja mediante la selección de la piel, la transición animada entre dos fotos y la altura máxima y el ancho.

Estos ajustes afectan a la operación en el sitio público (pero no en el espacio privado).

Uso básico

Activación de la caja
Por defecto, la caja se activa para los links asociados a la clase mediabox, así como a los links con un atributo html type con los valores image/jpeg, image/png, o image/gif. SPIP asigna automáticamente el atributo type para las imágenes del portafolio.

Ejemplos :

Abrir en iframe
Para que las cajas se abran en un iframe, es suficiente con adjuntar la claseboxIframe

Ejemplo :

Parametrización de dimensiones
Es posible especificar las dimensiones de la caja, caso por caso.

Basta con adjuntar una clase al vínculo en cuestión, por ejemplo: boxWidth-200px para fijar el ancho a 200px, boxHeight-300px para fijar la altrua a 300px.

Observa que la clase no se compone sólo del valor sino que debe indicarse la unidad CSS válida (px, em, pt ...). El caso particular ’%’ se denota pc (el caracter ’%’ no está permitido para nombre de clases).

Crear una galería

Para realizar una galería de miniaturas cliqueables que esten asociadas a un mismo grupo de imágenes, simplemente hay que utilizar el mismo valore para el atributo html rel.

Los links que tengan el mismo valor rel estarán asociados a la misma galería. Es posible que exista más de una galería en una misma página.

La mediabox permite navegar la galería paso a paso, o activar un modo «diaporama» (diapositivas) automático.

Ejemplo:

Los links marcados por el «selector de galería» (configurado desde el panel de control) son asociados automáticamente con un atributo rel="galerieauto". No use este valor para sus galerías.

Uso avanzado en javascript

Es posible activar la caja mediante javascript, sobre una lista de objetos:

o abrirla mediante un llamado director sin selección :

opciones
una lista de propiedades opcionales con la forma {propiedad:valor,...} :

  • href : (cadena) un ancla dentro de la página o una url externa que se carga mediante ajax. En este caso es posible usar la sintáxis jquery para especificar un selector dentro de la página cargada $.fn.mediabox({href:"spip.php?page=sommaire #contenu"});
  • overlayClose : (boleano, true por defecto) Si es verdadero, cierra la caja cuando el usuario hace click fuera de ella.
  • iframe : (boleano, false por defecto) abre la caja dentro de un iframe si es verdadero.
  • title : (cadena, atributo title del vínculo por defecto) para proporcionar un título al contenido a mostrar
  • height : (cadena) alto de la caja, en formato CSS
  • width: (cadena) ancho de la caja, en formato CSS
  • minHeight : (cadena) alto mínimo de la caja, en formato CSS
  • minWidth: (cadena) ancho mínimo de la caja, en formato CSS
  • maxHeight: (cadena) alto máximo de la caja, en formato CSS
  • maxWidth: (cadena) ancho máximo de la caja, en formato CSS
  • autoResize : (boleano, falso por defecto) redimensiona la caja cuando el contenido cambia de tamaño. Atención a los eventuales efectos indeseados.
  • onOpen : (función, null por defecto) callback a una función cuando se abre la caja
  • onShow : (función, null por defecto) callback a una función cuando se muestra la caja
  • onClose : (función, null por defecto) callback a una función cuando se cierra la caja

Ten en cuenta que cada argumento se puede suministrar como una función:

API modalbox

La Mediabox también se puede utilizar como una caja modal, con una API específica.
La API modalbox se usa, por ejemplo, en la interfaz privada de SPIP con el plugin médiathèque. Si usas conjuntamente ese plugin con la mediabox, ahora las ventanas emergentes de edición de documentos se mostrarán con mediabox, más ergonómica que la que viene por defecto con médiathèque.

Apertura de una ventana modal
Se realiza con la siguiente llamada :

href corresponde a una URL o ancla, como la opción href de la mediabox.

Las opciones de modalboxload son las mismas que las de mediabox con un valor falso por omisión para
overlayClose (al hacer clic fuera de la caja, esta no desaparece) que corresponde a la utilización de un cuadro de diálogo modal.

Esta nomenclatura es especialmente adecuada para enviar un enlace a una página completa que incluye javascript para ser cargada con una dirección URL. Por ejemplo, para llenar el formulario de entrada en un cuadro de modal (y dejar el link a la página completa sin Javascript)

El link carga la página de conexión en el cuadro modal mediante el uso de las posibilidades ajax de Zpip.

Cierre de la caja modal
Se realiza a traves de la función

Si es necesario algún tratamiento después del cierre, en este caso hay que añadir una devolución de llamada en el evento OnClose al abrir la caja.

Dernière modification de cette page le 1ro de noviembre de 2017

Volver arriba

Sus comentarios

Comentar este artículo

¿Quién es usted?
  • [Conectarse]

Para mostrar su avatar con su mensaje, guárdelo en gravatar.com (gratuit et indolore) y no olvide indicar su dirección de correo electrónico aquí.

Añada aquí su comentario Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Añadir un documento

Volver arriba

Hablando de eso...

  • (fr) Passer un site SPIP sous https://

    23 février 2017 – 40 commentaires

    Comment migrer simplement votre site SPIP de http:// vers https:// Le protocole https:// devient de plus en plus courant : C’est mieux pour la vie privée de tous La plupart des grands sites l’a déjà adopté Certains navigateurs commencent à afficher (...)

  • (fr) SPIP 3.2, Agenda et FullCalendar

    6 juin – 17 commentaires

    Nous avions publié un article sur la manière d’utiliser FullCalendar avec SPIP 3.0 afin d’afficher des évènements sous forme d’Agenda. La version de FullCalendar a changé avec SPIP 3.2. Le présent article est donc un tutoriel adapté à SPIP 3.2. Pour (...)

  • (fr) PHANTOM (HTML5UP)

    18 juillet – commentaires

    Squelette SPIP pour intégrer le modèle Phantom de HTML5UP. https://html5up.net/phantom Installation A l’activation, le plugin installe aussi les plugins suivants : crayons, favicon, metasplus+, Couleur d’objet, champs extras, SPIP reset centre (...)

  • (fr) Cycle2

    7 août 2014 – 119 commentaires

    La seconde version de la librairie Javascript « jQuery Cycle », qui permet de produire des diaporamas, se nomme « Cycle2 » : http://jquery.malsup.com/cycle2/. Voici cette nouvelle librairie mise en plugin pour SPIP. Si vous utilisez déjà « jQuery (...)

  • (fr) Galleria (fr)

    16 novembre 2011 – 193 commentaires

    Une galerie d’image qui utilise la librairie javascript Galleria. Description Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé (...)