SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribuciones sur SPIP-Zone, 222 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 6 de febrero de 2016

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) GIS 4

    11 août 2012 – 1339 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • (fr) Massicot

    7 octobre 2015 – 63 commentaires

    Recadrez et redimensionnez vos images directement dans l’espace privé de SPIP ! Inspiré par le plugin photospip, ce plugin plus minimaliste permet de recadrer et redimensionner les images dans l’espace privé de SPIP. Une fois le plugin installé (...)

  • (fr) Métas

    8 août 2009 – 53 commentaires

    Ce petit plugin permet l’ajout, depuis l’espace privé, de metatags aux articles et rubriques de SPIP, ainsi que la mise en exergue de mots importants.

  • (fr) Formidable, le générateur de formulaires

    23 janvier 2012 – 2137 commentaires

    Un générateur de formulaires facilement configurable pour les non-informaticiens et facilement extensible pour les développeurs. Introduction L’objectif était de créer un plugin permettant de générer des formulaires. Historiquement, 2 plugins (...)

  • (fr) Formulaire de contact avancé

    23 mars 2009 – 1373 commentaires

    Un formulaire de contact configurable, avec de multiples options.