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 per WorldWideScripts.net

Rep les nostres RSS per estar al dia!

Nou! Segueix-nos com vulguis!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Versió

GALERIA suporta imatges, vídeo, àudio del telèfon en línia iPad instal·lació minuts compatible Ken Burns miniatures efecte de navegació i molt més!

Actualitzacions

ACTUALITZA 2 0.1 [14/06/2011]

  • afegit exemple autoheight + trucades a l'API

ACTUALITZA 2 0.0 [06/09/2011]

  • errors corregits
  • rebranded a Phoenix Gallery - mateixes característiques galeria + més
  • agregat de navegació de miniatures

Introducció

jQuery Ken Burns Slideshowis la manera perfecta de mostrar les seves imatges / anuncis en estil. Cada article té un termini presentació separada i vostè pot editar el seu enllaç, objectiu i molts altres ajustaments individuals simplement modificant el codi HTML.

Característiques

  • dóna suport.PNGs,.jpgs,.GIF
  • API - trucar pausa, jugar, gotoNext, gotoPrev des del teu html (fora de la galeria)
  • autoheight - opció per autoSize la galeria en funció de l'altura del contingut
  • dóna suport als articles il·limitats - giren tantes fotos com vulgui
  • manera de presentació de diapositives - amb el temps independent per a cada element que es pot definir en el codi HTML proporcionat
  • valors que es poden configurar per a cada article - descripció (la descripció de la part superior), initialZoom (qualsevol valor que vostè desitja), finalZoom, slideshowTime (el temps que el banner rotador manté enfocat en el tema específic), cremar temps de l'efecte (el temps que desitjar l'efecte de prendre), URL (si no hi ha url es fixa l'element serà només una imatge sense vincle de clic), transitionType (easeInSine, etc. lineal), initialPosition, posició final (triar topLeft, topcenter, topright, middleleft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • de mida variable a la seva mida preferit - tots els continguts seran posició adequada

Posicions de panorama possibles (inicial i final)

Preguntes més freqüents

Com modificar el nombre de miniatures, tinc aquestes imatges de retrat en el control lliscant.. la navegació només mostra 2 d'ells, mentre que hi ha espai per a 4?

No es pot establir el nombre de miniatures que es mostren per pàgina 'perquè es calcula automàticament d'ample polze / alçada i l'espai polze. Així que tracti de baixar aquest per més polzes. També hi ha un altre paràmetre "nav_arrow_size: 40" - aquest és l'espai que s'assigna per a cada fletxa (pel que en defecte 80 px estan restat de les fletxes) i també es pot reduir aquest per més polzes.

¿És possible posar un enllaç a les imatges (la imatge principal offcourse no les miniatures) Sí, és clar, escriure

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

en comptes de

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

Tracte d'afegir enllaços a la descripció però trenca el guió

A més probablement vostè està fent alguna cosa com això

BAD:

 dades-description = "El meu vincle és <a href="http://something"> aquí </a>" 

El problema és que el "href dins trenca el" de la descripció de les dades. Les solucions és utilitzar "en lloc de"

BO:
 Descripció de dades = 'El meu vincle és <a href="http://something"> aquí </a>' 
Hola. Com puc aturar l'auto-lliscament de la phoenixgallery

que té en els paràmetres

 targetgallery.phoenixgallery ({ transition_type: "aleatòria", nav_type: "thumbsa", nav_position: "dalt", 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 diapositives només ha d'afegir un nou paràmetre settings_slideshow i configurar-lo perquè fos com això
 targetgallery.phoenixgallery ({ transition_type: "aleatòria", nav_type: "thumbsa", nav_position: "dalt", 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 }) 
Per alguna raó, quan afegeixo un enllaç a la imatge l'efecte de zoom ja no funciona.

Això es deu als atributs de dades initialZoom, dades finalZoom, dades effectTime etc. han d'estar en el fill directe de la galeria div. Per exemple, si vostè té

 

efecte funcionarà, però si s'agrega enllaç com aquest
 <a href="#"> </a> 
efecte no funcionarà. Cal moure els atributs al fill directe de la galeria d'aquesta manera:
 <a href="#" data-finalzoom="2"> </a> 

Crèdits

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

Descarregar
Altres components d'aquesta categoriaTots els components d'aquest autor
Comentaris dels clientsPreguntes freqüents i respostes

Propietats

Creat:
Agost 2 10

Darrera actualització:
N / A

Els navegadors compatibles:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

Arxius inclosos:
JavaScript JS, HTML, CSS

Versió del programari:
jQuery

Paraules clau

eCommerce, eCommerce, Tots els Articles, fletxes, navegació, personalitzada, efectes, galeria, imatge, ken crema, nú, meros, pa, fotos suport, rotador, slideshow, miniatures, transicions, suport de ví, deo, zoom