jbgallery docs

jbgallery 2.0 BETA

jbgallery è una pagina web widget di interfaccia utente scritta in javascript in cima alla libreria jQuery.
La sua funzione è quella di mostrare una singola immagine grande, più immagini, gallerie multiple, presentazioni, come sfondo di un sito, in modalità "finestra" o come un pop comune .-up
jbgallery ha due menu di base: il primo dispone di pulsanti lettore musicale mentre l'altro collega direttamente alle immagini singole.
ho aggiunto un menu "complessa" sulla versione 2.0, che nel ispirato al flickr cursore attrezzato slideshow che permette . scorrere le anteprime
jbgallery fornisce un'API pubblico per il controllo remoto del componente, quindi sarebbe più facile da legare anche con un menù più complesso. Esempi:

Installazione

Scaricare ed estrarre

jbgallery-2.0.beta.zip

Scaricare file singoli:

File extra:

  • jbpicasa.js: fonte - adattatore di prova che è possibile utilizzare costruzione di una struttura html, ottenendo i dati da un feed RSS esterno.

js e css (includere nel tag head)

HTML struttura (menu minimale)

Struttura HTML (thumbnails - menu con scorrimento)

Struttura HTML (didascalia)

JS

OPZIONI & DEFAULT

Scrivi opzioni QUI: 

    jQuery ("jbgallery.") jbgallery ({QUI}).;

DEFAULT

{Stile: "centrato", / / ​​centrato, zoom, menu originale: 'scorrimento', / / ​​falso, numeri, semplici, le scorciatoie cursore: [37,39], presentazione: false, dissolvenza: vero, popup: false, didascalia : vero, / / ​​NEW 2,0 autohide: false, / / ​​NEW cliccabili 2.0: false, / / ​​NEW 2,0 attuale: 1, / / ​​NEW 2,0 webkit:.! (navigator.userAgent.toLowerCase () ricerca (/ webkit /) = -1), IE6: (/ MSIE 6/i.test (navigator.userAgent)), IE7: (/ MSIE 7/i.test (navigator.userAgent)), etichette: {giocare: "play", avanti: " successivo ", prev:" prev ", fermata:" stop ", chiudere:" close ", info:" info "}, timer: {dissolvenza: 400, intervallo: 7000, autohide: 7000}, ritardi: {mousemove: 200 , ridimensionare: 500, passaggio del mouse: 800}, vicino: funzione (){}, prima: dopo la funzione (){},: function (ev) {}, carico: function (ev) {}, pronto: function () { }}

OPZIONI

  • stile: stringa ('zoom' / 'centrato' / 'originale')
  • slideshow: boolean (vero / falso)
  • menu: stringa / boolean ('cursore' / 'semplice' / 'numeri' / falso)
  • didascalia: boolean (info pulsante mostrare nel menu - NUOVO)
  • autohide: boolean (autohide interfaccia - NEW)
  • cliccabili: boolean (NEW)
  • numero (impostare la foto iniziale NUOVO): corrente
  • dissolvenza: boolean (vero / falso)
  • scorciatoie: array (keycode per eventi trigger sinistro / destro da tastiera)
  • prima: la funzione (callback)
  • carico: funzione (ev) (callback - nativo evento di caricamento dell'immagine)
  • dopo: la funzione (callback)
  • pronto: funzione (callback - interfaccia pronta)
  • popup: boolean (pulsante Mostra chiudere)
  • vicino: funzione (ev) (richiamata dopo cliccare sul pulsante vicino cioè window.close ()).
  • etichette: oggetto - default: 
    {Giocare: "play", avanti: "next", prev: "prev", fermata: "stop", chiudere: "close", info: "info"}
  • timer: oggetto - default: 
    {Dissolvenza: 400, intervallo del timer / / fadeIn-Out: 7000, / / ​​presentazione autohide timer: 7000 / / autohide timer}
  • ritardi: oggetto - default: 
    {MouseMove: 200, ridimensiona: 500, passaggio del mouse: 800}

API (sviluppatori / designer)

  • jQuery ("# ​​jbgallery") jbgallery ();. / / build oggetto PRIMO
  • jQuery ("# ​​jbgallery") jbgallery ("andare", 2);. / / vai alla foto 2 se esistono
  • jQuery ("# ​​jbgallery") jbgallery ("sinistra");. / / prec foto
  • jQuery ("# ​​jbgallery") jbgallery ("diritto");. Foto / / successivo
  • jQuery ("# ​​jbgallery") jbgallery ("play");. / / autoplay inizio
  • jQuery ("# ​​jbgallery") jbgallery ("stop");. / / autoplay arresto
  • jQuery ("# ​​jbgallery") jbgallery ("distruggere");. / / distruggere oggetti, eventi, expando
  • jQuery ("# ​​jbgallery") jbgallery ("corrente");. numero / / ritorno della foto corrente

SOMMARIO / ULTERIORI ELEMENTI

Per aggiungere il contenuto dell'immagine ulteriore o altro tipo di elementi è possibile utilizzare il seguente div. In caso contrario, è possibile aggiungere altri div copia gli stili di seguito. 



# Docs {width: 500px; destra: 200px; superiore: 15%; position: absolute; z-index: 1000;}. Docs # wrapper {padding: 10px; margin: 10px; background: # fff;}

BROWSER ZERO

  • Firefox 3.5 (winxp / linux)
  • Safari 3.2, 4, 5 (winxp)
  • Cromo / cromo (winxp / linux)
  • Opera 9 / 10 (winxp / linux)
  • Internet Explorer 6/7/8 (winxp)

DESIGN / GRAFICA

Questo componente è pubblicato con un layout grafico minimalista.
Siete liberi di personalizzare il css e chiedermi qualsiasi modifica aggiungere classi al menu semplice cura di me.
Se si utilizza API o menu design più complesso, o se scrivere plugin popolare html liste tramite ajax da Flickr o servizi simili, si prega di condividere con me per la prossima versione di questo plugin.

CREDITI

Questo lavoro si ispira http://www.ringvemedia.com/ e Chicca
Il cursore si ispira http://www.flickr.com/search/show/
Dipende jQuery (1.3.2/1.4.2) di John dimissioni .
Grazie a Simone Parato, Aaron Hutten, Alain Bourgeoa, Wenzel Steffen

COMMENTI & CONTATTI

Invia un commento nel mio blog. http://maxb.net/blog/

LICENZA

Copyright (c) 2010 Massimiliano Balestrieri
licenze licenza GPL: http://www.gnu.org/licenses/gpl.html

Più script e di stile css: www.htmldrive.net
gundam1