WorldWideScripts.net Delivering the best Add-Ons in more than 37 languages.

中文(简体), English, हिन्दी/हिंदी, Español/Castellano, العربية, Русский язык, Français, 中文 (台灣), বাংলা, Bahasa Indonesia, اردو, Português, Deutsch, Bahasa Melayu (بهاس ملايو‎), 日本語 (にほんご), فارسی, Italiano, తెలుగు, Türkçe, ગુજરાતી, Język polski/polszczyzna, Tiếng Việt, ಕನ್ನಡ, Українська мова, ไทย
JavaScript / Images and Media

Ken Burns Media Gallery / Slideshow

— Add- On para WorldWideScripts.net

@es1wwsSuscríbete a nuestro RSS para estar al día!

¡Nuevo! Síguenos como quieras!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versión

GALERÍA soporta imágenes, vídeo, audio del teléfono en línea iPad instalación minutos compatible Ken Burns miniaturas efecto de navegación y mucho más!

Actualizaciones

ACTUALIZA 2 0.1 [14/06/2011]

  • añadido ejemplo autoheight + llamadas a la API

ACTUALIZA 2 0.0 [06/09/2011]

  • errores corregidos
  • rebranded a Phoenix Gallery - mismas características galería + más
  • agregado de navegación de miniaturas

Introducción

jQuery Ken Burns Slideshowis la manera perfecta de mostrar sus imágenes / anuncios en estilo. Cada artículo tiene un plazo presentación separada y usted puede editar su enlace, objetivo y muchos otros ajustes individuales simplemente modificando el código HTML.

Características

  • apoya.PNGs,.jpgs,.GIF
  • API - llamar pausa, jugar, gotoNext, gotoPrev desde tu html (fuera de la galería)
  • autoheight - opción para autoSize la galería en función de la altura del contenido
  • apoya los artículos ilimitados - giran tantas fotos como desee
  • modo de presentación de diapositivas - con el tiempo independiente para cada elemento que se puede definir en el código HTML proporcionado
  • valores que se pueden configurar para cada artículo - descripción (la descripción de la parte superior), initialZoom (cualquier valor que usted desea), finalZoom, slideshowTime (el tiempo que el banner rotador mantiene enfocado en el tema específico), quemar tiempo del efecto (el tiempo que desear el efecto de tomar), URL (si no hay url se fija el elemento será sólo una imagen sin vínculo de clic), transitionType (easeInSine, etc. lineal), initialPosition, posición final (elegir topLeft, topcenter, topright, middleleft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • de tamaño variable a su tamaño preferido - todos los contenidos serán posición adecuada

Posiciones de panorama posibles (inicial y final)

PF

Cómo modificar el número de miniaturas, tengo estas imágenes de retrato en el control deslizante.. la navegación sólo muestra 2 de ellos, mientras que hay espacio para 4?

No se puede establecer el número de miniaturas que se muestran por página 'porque se calcula automáticamente de ancho pulgar / altura y el espacio pulgar. Así que trate de bajar ese para 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 en forma predeterminada 80 px están restado de las flechas) y también se puede reducir este para más pulgares.

¿es posible poner un enlace en las imágenes (la imagen principal offcourse no las miniaturas) Sí, claro, escribir

 <a href="#"> <img src = "img / def1.jpg" /> </a> 

en lugar de

 <img src = "img / def1.jpg" /> 

Trato de añadir enlaces en la descripción pero rompe el guión

Además probablemente usted está haciendo algo como esto

MALO :

 datos-description = "Mi vínculo es <a href="http://something"> aquí </a>" 

El problema es que el "href dentro rompe el" de la descripción de los datos. Las soluciones es utilizar "en lugar de"

BIEN :
 Descripción de datos = 'Mi vínculo es <a href="http://something"> aquí </a>' 
Hola. ¿Cómo puedo detener el auto-deslizamiento de la phoenixgallery

que tiene en los parámetros

 targetgallery.phoenixgallery ({ transition_type: "aleatoria", nav_type: "thumbsa", nav_position: "arriba", 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 }) 
desactivar diapositivas sólo tiene que añadir un nuevo parámetro settings_slideshow y configurarlo para que fuera como esto
 targetgallery.phoenixgallery ({ transition_type: "aleatoria", nav_type: "thumbsa", nav_position: "arriba", 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 añado un enlace a la imagen el efecto de zoom ya no funciona.

Esto se debe a los atributos de datos initialZoom, datos finalZoom, datos effectTime etc. tienen que estar en el hijo directo de la galería div. Por ejemplo, si usted tiene

 

efecto funcionará, pero si se agrega enlace como este
 <a href="#"> </a> 
efecto no va a funcionar. Es necesario mover los atributos al hijo directo de la galería de este modo:
 <a href="#" data-finalzoom="2"> </a> 

Créditos

Fotos creativas - http://www.flickr.com/photos/markjsebastian/

Descargar
Otros componentes de esta categoríaTodos los componentes de este autor
ComentariosPreguntas frecuentes y respuestas

Propiedades

Creado:
02 de agosto 10

Ultima actualizacion:
N / A

Los navegadores compatibles:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Archivos incluidos:
JavaScript JS, HTML, CSS

Versión del software:
jQuery

Palabras clave

eCommerce, eCommerce, Todos los objetos, flechas, navegació, n personalizada, efectos, galerí, a, imagen, ken quema, nú, meros, pan, fotos apoyo, rotador, slideshow, miniaturas, transiciones, soporte de ví, deo, zoom