SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribuciones sur SPIP-Zone, 256 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) Mailsubscribers

    16 janvier 2013 – 274 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes (...)

  • (fr) noiZetier v2

    9 novembre 2012 – 36 commentaires

    Le noiZetier offre une interface d’administration permettant d’insérer au choix des éléments modulaires de squelettes (noisettes) et de les ajouter ainsi à ses squelettes. Compatibilité La version 2 du noizetier fonctionne sous SPIP 3. Elle est (...)

  • (fr) cirr : plugin « rédacteur restreint »

    29 octobre 2010 – 60 commentaires

    Ce plugin « cirr : rédacteur restreint » permet d’affecter des rubriques aux rédacteurs et modifie les droits afin qu’un rédacteur restreint (ou un administrateur restreint) voit dans l’espace privé uniquement les rubriques qui lui sont affectées (et leur (...)

  • (fr) Un retour d’expérience d’utilisation de Formidable

    26 octobre – commentaires

    Il s’agissait de créer un formulaire d’inscription à un évènement modérer les inscriptions dans le privé publier les inscriptions dans le public Nous avons discuté de cette présentation lors de l’apéro SPIP du 15 février 2016 à la Cantine (...)

  • (fr) Métas +

    3 décembre – 14 commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)