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

Iscriviti al nostro feed per rimanere sempre aggiornato!

Nuovo! Seguici come lo vuoi!


Ken Burns Media Gallery / Slideshow - CodeCanyon Item for Sale

Ads

Ad: Bluehost hosting

WordPress Version

GALLERIA supporta immagini, video, audio linea Telefono iPad installazione minuto compatibile Ken Burns miniature effetto navigazione e di più!

Aggiornamenti

UPDATE 2.1 [14/06/2011]

  • aggiunto esempio autoheight + chiamate API

UPDATE 2.0 [09/06/2011]

  • bug fissi
  • rimarchiati a Phoenix Gallery - Galleria stesse caratteristiche + more
  • aggiunto navigazione miniature

Introduzione

jQuery Ken Burns Slideshowis il modo perfetto per mostrare le tue foto / annunci in grande stile. Ogni elemento ha un tempo di presentazione separati e si può modificare il loro legame, target e molte altre impostazioni individuali semplicemente modificando il codice HTML.

Caratteristiche

  • supporta.pngs,.JPG,.gif
  • API - chiamare pausa, giocare, gotoNext, gotoPrev dal tuo html (al di fuori della galleria)
  • autoheight - opzione per Autosize galleria a seconda dell'altezza del contenuto
  • supporta oggetti illimitati - ruotano molte immagini come si desidera
  • modalità di presentazione - a tempo indipendente per ogni elemento che è possibile definire nel codice HTML fornito
  • valori è possibile impostare per ogni elemento - descrizione (la descrizione dall'alto), initialZoom (qualsiasi valore che si desidera), finalZoom, slideshowTime (il tempo del rotatore banner rimane focalizzata sulla specifica voce), bruciare tempo effetto (il tempo che desiderare l'effetto di prendere), url (se non url è impostato l'oggetto sarà solo un'immagine senza collegamento al clic), transitionType (easeInSine, ecc lineari), initialPosition, posizione finale (scegliere topleft, topcenter, topright, MiddleLeft, middlecenter, MiddleRight, bottomleft, bottomcenter, bottomright)
  • ridimensionabile a vostra dimensione preferita - tutti i contenuti saranno posizione corretta

Possibili posizioni panning (iniziale e finale)

FAQ

Come impostare il numero di miniature, ho queste immagini ritratto del cursore.. navigazione mostra solo 2 di loro, mentre non vi è spazio per 4?

Non è possibile impostare il numero di miniature visualizzate per 'pagina' perché è calcolato automaticamente da larghezza pollice / altezza e lo spazio pollice. Quindi, cercare di ridurre tale per più pollici. Inoltre vi è un altro parametro "nav_arrow_size: 40" - questo è lo spazio che viene assegnato per ogni freccia (quindi al momento del default 80 px sono sottratto per le frecce) e si può anche abbassare questo per più pollici.

è possibile inserire un link sulle immagini (l'immagine principale offcourse non le miniature) Sì, certo, scrivere

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

invece di

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

Io cerco di aggiungere i collegamenti nella descrizione, ma mi si spezza il copione

Propably si sta facendo qualcosa di simile

CATTIVO :

 Dati-description = "Il mio legame è <a href="http://something"> qui </a>" 

Il problema è che la "href all'interno rompe il" dalla-descrizione dei dati. Le soluzioni è usare 'invece di "

BUONA :
 Dati-description = 'La mia connessione è <a href="http://something"> qui </a>' 
Salve. Come posso fermare l'auto-scorrimento del phoenixgallery

avete nei parametri

 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 }) 
per disabilitare presentazione è sufficiente aggiungere un nuovo parametro settings_slideshow e impostarlo fuori come questo
 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 }) 
Per qualche ragione quando aggiungo un link all'immagine l'effetto zoom non è più funzioni.

Questo perché gli attributi dati initialZoom, data-finalZoom, data-effectTime ecc bisogno di essere il figlio diretto della galleria div. Ad esempio, se si dispone di

 

effetto funzionerà, ma se si aggiunge link come questo
 <a href="#"> </a> 
effetto non funzionerà. È necessario spostare gli attributi per il figlio diretto della galleria in questo modo:
 <a href="#" data-finalzoom="2"> </a> 

Credits

Foto creative - http://www.flickr.com/photos/markjsebastian/

Scarica
Altri componenti di questa categoriaTutti i componenti di questo autore
CommentiDomande frequenti e risposte

Proprietà

Creato:
2 10 agosto

Ultimo aggiornamento:
N / A

Browser compatibili:
IE7, IE8, IE9, Firefox, Safari, Opera, Chrome

File inclusi:
JavaScript JS, HTML, CSS

Versione software:
jQuery

Parole chiave

eCommerce, eCommerce, Tutti gli articoli, frecce, navigazione personalizzata, Effetti, galleria, Immagine, Ken Burns, numeri, padella, Supporto immagini, rotatori, presentazione, miniature, transizioni, supporto video, zoom