Versión de WordPress
Actualizaciones
ACTUALIZACIÓN 2.1 [ 14/06/2011 ]
- ejemplo de autoheight agregado + llamadas api
ACTUALIZAR 2.0 [ 09/06/2011 ]
- Errores arreglados
- renombrado a Phoenix Gallery: las mismas características de la galería y más
- navegación en miniatura añadida
Introducción
jQuery Ken Burns Slideshow es la manera perfecta de exhibir sus imágenes/anuncios con estilo. Cada elemento tiene un tiempo de presentación de diapositivas separado y puede editar su enlace, destino y muchas otras configuraciones individuales simplemente modificando el HTML.
Características
- admite .PNG, .JPG, .GIF
- API: llame a pausa, reproduzca, gotoNext, gotoPrev desde su html (fuera de la galería)
- altura automática: opción para cambiar el tamaño de la galería según la altura del contenido
- admite elementos ilimitados: gire tantas imágenes como desee
- modo de presentación de diapositivas: con tiempo independiente para cada elemento que puede definir en el HTML proporcionado
- valores que puede configurar para cada elemento: descripción (la descripción desde arriba), initialZoom (cualquier valor que desee), finalZoom, slideshowTime (el tiempo que el rotador de banner permanece enfocado en el elemento específico), tiempo de efecto de grabación (el tiempo que desea que tome el efecto), url (si no se establece una url, el elemento será solo una imagen sin enlace al hacer clic), tipo de transición (easeInSine, lineal, etc.), posición inicial, posición final (elija entre superior izquierda, superior central, superior derecha, centroizquierda,centrocentro,centroderecha,abajoizquierda,abajocentro,abajoderecha)
- redimensionable a su tamaño preferido: todo el contenido se colocará correctamente
Posibles posiciones de paneo (inicial y final)
Preguntas más frecuentes
¿Cómo establecer el número de miniaturas? Tengo estas imágenes de retrato en el control deslizante… ¿la navegación solo muestra 2 de ellas, mientras que hay espacio para 4?
No puede establecer el número de miniaturas que se muestran por ‘página’ porque se calcula automáticamente a partir del ancho/alto del pulgar y el espacio del pulgar. Así que intenta bajar eso para obtener más pulgares. También hay otro parámetro «nav_arrow_size: 40»: este es el espacio que se asigna para cada flecha (por lo que, de forma predeterminada, se restan 80 px para las flechas) y también puede reducirlo para obtener más pulgares.
¿Es posible poner un enlace en las imágenes (la imagen principal, por supuesto, no las miniaturas)
Si, claro, escribe
<a href="#"><img src="https://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/def1.jpg" /></a>
en vez de
<img src="https://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/def1.jpg" />
Intento agregar enlaces en la descripción pero rompe el guión.
Probablemente estés haciendo algo como esto.
MALO:
data-description="My link is <a href="http://something">here</a>"
El problema es que el «dentro de href» rompe el «de la descripción de datos». La solución es usar ‘ en lugar de «
BUENO:
data-description='My link is <a href="http://something">here</a>'
Hola. ¿Cómo puedo detener el deslizamiento automático de phoenixgallery?
tienes en los parametros
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
para deshabilitar la presentación de diapositivas, simplemente agregue un nuevo parámetro settings_slideshow y desactívelo así
targetgallery.phoenixgallery({
transition_type:"random",
nav_type:"thumbsa",
nav_position:"up",
thumb_width:100,
thumb_height:75,
thumb_space:20,
nav_space:25,
nav_arrow_size:40,
settings_shadow:"off",
settings_autoresize:"off",
settings_autoheight:"off",
settings_slideshow:"off",
settings_pauseonrollover:"off",
settings_usethumbarrows:'off',
transition_strips_x:10,
transition_strips_y:5,
arrows_normal_alpha:1,
arrows_roll_alpha:0.3,
thumbs_normal_alpha:1,
thumbs_roll_alpha:0.3
})
Por alguna razón, cuando agrego un enlace a la imagen, el efecto de zoom ya no funciona.
Esto se debe a que los atributos data-initialZoom, data-finalZoom, data-effectTime, etc. deben estar en el elemento secundario directo del div de la galería. Por ejemplo, si tienes
< img src="https://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/1.jpg" data-finalZoom="2"/>
el efecto funcionará, pero si agrega un enlace como este
<a href="#">< img src="https://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/1.jpg" data-finalZoom="2"/></a>
efecto no funcionará. Debe mover los atributos al elemento secundario directo de la galería de la siguiente manera:
<a href="#" data-finalzoom="2">< img src="https://codecanyon.net/item/ken-burns-media-gallery-slideshow/img/1.jpg" /></a>
Créditos
Fotografías creativas: http://www.flickr.com/photos/markjsebastian/
