Usted está aquí: Inicio Componentes Avanzados Galería UCA Tipo 2

UCA Slider Tipo 2

El Slider Tipo 2 es un componente que muestra una galería de imágenes con efectos de transición y un indice en la parte inferior para acceder a una imagen determinada.

Ejemplo de UCA Slider Tipo 2:

  • Demo 1
  • Demo 2
  • Demo 3

Pasos para implantar el componente:

  1. Subir las imágenes que incorporará el componente y sus correspondientes miniaturas (a una resolución de 128 x 48 pixeles) a una carpeta del espacio web.
  2. Insertar el siguiente código html en la página deseada:
    <h2 class="EncNar">UCA Slider Tipo 2</h2> <p>El Slider Tipo 1 es un componente que muestra una galería de imágenes con efectos de transición y una miniatura de las mismas a su derecha.</p> <h3 class="EncAzul">Ejemplo de UCA Slider Tipo 2:</h3> <div id="uca_slider-wrap"> <div id="uca_slider-container1" style="max-width: 700px;"> <div class="ws_images"> <ul> <li><img alt="Demo 1" id="wows1_0" src="../imagenes/uca-slider/demo-1.jpg" title="Titulo 1" /></li> <li><img alt="Demo 2" id="wows1_1" src="../imagenes/uca-slider/demo-2.jpg" title="Titulo 2" /></li> <li><img alt="Demo 3" id="wows1_2" src="../imagenes/uca-slider/demo-3.jpg" title="Titulo 3" /></li> </ul> </div> <div class="ws_bullets"> <div> <a href="#" title="Demo 1"><img src="../imagenes/uca-slider/thumbs/demo-1.jpg" /></a> <a href="#" title="Demo 2"><img src="../imagenes/uca-slider/thumbs/demo-2.jpg" /></a> <a href="#" title="Demo 3"><img src="../imagenes/uca-slider/thumbs/demo-3.jpg" /></a> </div> </div> <div class="ws_shadow"></div> </div> </div> <script type="text/javascript" src="http://www.uca.es/static/js/uca_slider/uca-slider.js"></script> <script type="text/javascript" src="http://www.uca.es/static/js/uca_slider/uca-script.js"></script> <!-- Por si queremos variar los parámetros...--> <script TYPE="text/javascript"> jQuery("#uca_slider-container1").wowSlider({ effect: "kenburns", prev: "", next: "", duration: 20 * 100, delay: 20 * 100, width: 540, height: 360, autoPlay: true, playPause: true, stopOnHover: false, loop: false, bullets: 0, caption: true, captionEffect: "fade", controls: true, onBeforeStep: 0, images: 0 }); </script>
  3. Parametrizar el código insertado:
    1. Modificar la localización (sección ws_images, campo src) de las imágenes completas de modo que enlacen con las subidas en el paso 1 (poniendo una línea <li> por cada imagen)
    2. Modificar el título (sección ws_images, campo title) de las imágenes, para que se muestre correctamente el texto deseado en el componente.
    3. Modificar la localización (sección ws_bullets, campo src) de las miniaturas de las imagenes subidas en el paso 1
    4. Modificar los parámetros de la galería en la última sección del código, para alargar o acortar las transiciones, mostrar u ocultar algunos botones, (se puede cambiar el efecto de transición indicando "kenburns", "basic_linear", "blur", o "fade") etc.
    5. Para modificar el ancho del componente, bastará establecer el valor del parámetro max-width del div uca_slider-container1 en las primeras líneas del código anterior.

IMPORTANTE: La página en la que se encuentra el componente no se podrá editar directamente mediante el TinyMCE del Plone, ya que éste desactivará alguna de las características del componente, por lo que siempre se deberá editar en modo "Editar sin editor visual" para que su funcionamiento no se vea comprometido.

Acciones de documento
Favoritos / Compartir