Share
Le librerie JavaScript, come MooTools, possono risparmiare un sacco di tempo quando si sviluppa un sito. In questo tutorial, ti mostrerò come combinare molte delle funzioni di MooTools per creare una bella galleria fotografica.
Prima di iniziare, dai un'occhiata alla demo. Sarà più facile capire lo scopo di ogni passaggio se conosci l'obiettivo.
Innanzitutto, crea un semplice file HTML e aggiungi un collegamento al foglio di stile (main.css) e a due file JavaScript (mootools.js e main.js). Crea quei file nella stessa directory. Quindi vai a MooTools Core Builder. Seleziona tutti i componenti e quindi fai clic su Scarica. Questo scaricherà mootools-1.2-core.js. Copia il contenuto di quel file nel file mootools.js. Poi vai su MooTools More Builder e seleziona tutti i componenti e fai clic su Scarica. Copia di nuovo i contenuti e incollali nella parte inferiore di mootools.js.
(Nota: la maggior parte dei siti, inclusa questa galleria fotografica, non ha bisogno di tutti i componenti, tuttavia, se li si utilizza tutti all'inizio e quindi quelli che non è necessario rendere lo sviluppo molto più semplice. nel bel mezzo di un progetto e ti sei reso conto che volevi un aspetto diverso incluso in uno dei componenti che non hai scaricato, dovresti scaricarlo di nuovo prima di continuare. In questo modo, devi solo scaricarlo di nuovo dopo aver finito.)
Galleria fotografica
Ora dobbiamo creare il layout per la nostra galleria fotografica usando HTML e CSS. Aggiungi il seguente codice all'interno dei tag body del tuo file HTML.
Galleria fotografica
Scorrere verso l'altoScorri in bassoSinistraDestra
Questo crea un contenitore per circondare tutto il codice nel sito, un titolo, una sezione per le immagini e controlli per il sito. Perché tutti i tag img vuoti? Nel CSS qui sotto, diamo loro taglie e un colore di sfondo diverso, così possiamo testare la galleria senza dover aggiungere e ridimensionare le immagini reali. Ora aggiungiamo il CSS al file main.css.
* margine: 0; padding: 0; delineare: none; .hide display: none; body background: # 000; color: #fff; padding: 30px; font-family: Arial, Helvetica, sans-serif; #container width: 596px; altezza: 400px; background: # 111; overflow: hidden; border: 1px solid # 333; h1 background: # 222; larghezza: 592px; altezza: 29px; padding-left: 7px; border-bottom: 1px solid # 333; font-size: 18px; line-height: 29px; font-weight: normale; #picture_section padding: 7px 0 7px 7px; larghezza: 590px; altezza: 332px; overflow: hidden; #inside width: 590px; altezza: 332px; #picture_section img border: 0; altezza: 57px; larghezza: 111px; float: sinistra; background: # 333; margin-bottom: 7px; margin-right: 7px; cursor: pointer; #controls_vert background: # 222; larghezza: 600px; altezza: 23px; border-top: 1px solid # 333; #controls_horz background: # 222; larghezza: 600px; altezza: 23px; border-top: 1px solid # 333; #up height: 10px; larghezza: 10px; margin-right: 7px; background: url (up.jpg) no-repeat; text-trattino: -9999px; float: sinistra; margin: 7px; margin-bottom: 6px; cursor: pointer; #down height: 10px; larghezza: 10px; background: url (down.jpg) no-repeat; text-trattino: -9999px; float: sinistra; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: pointer; #left height: 10px; larghezza: 10px; background: url (left.jpg) no-repeat; text-trattino: -9999px; float: sinistra; margin: 7px; margin-bottom: 6px; cursor: pointer; #right height: 10px; larghezza: 10px; background: url (right.jpg) no-repeat; text-trattino: -9999px; float: sinistra; margin: 7px; margin-left: 0; margin-bottom: 6px; cursor: pointer; div # up.deactivated opacity: 0.2; Filtro: alpha (opacità = 20); cursore: predefinito; div # down.deactivated opacity: 0.2; Filtro: alpha (opacità = 20); cursore: predefinito; div # right.deactivated opacity: 0.2; Filtro: alpha (opacità = 20); cursore: predefinito; div # left.deactivated opacity: 0.2; Filtro: alpha (opacità = 20); cursore: predefinito;
Ecco come appare con quello applicato.
Poiché la galleria inizia in alto, la freccia su viene automaticamente disabilitata. Inoltre, le frecce sinistra e destra sono automaticamente nascoste, perché verranno visualizzate solo quando l'immagine grande viene fatta esplodere. Inoltre, vengono mostrate solo le parti superiori delle immagini nella sesta riga, per far sapere all'utente che ci sono altre informazioni qui sotto.
Ora aggiungiamo la sovrapposizione che mostrerà le immagini grandi. Innanzitutto, aggiungi il seguente codice subito prima del tag body di chiusura nel tuo file HTML.
unClicca sull'immagine per tornare alla galleria.
Aggiungi quanto segue alla fine del tuo file CSS per far apparire le div come una sovrapposizione sulle miniature.
#display_picture_container position: absolute; top: 0; a sinistra: 0; larghezza: 700px; altezza: 400px; padding-top: 16px; #display_picture position: absolute; top: 61px; a sinistra: 31px; larghezza: 596px; altezza: 330px; background: # 000; opacità: 0.8; Filtro: alpha (opacità = 80); text-align: center; font-size: 11px; padding-top: 16px; #display_picture_img position: absolute; top: 108px; a sinistra: 65px; altezza: 272px; larghezza: 530px; cursor: pointer;
Questo crea questo effetto:
L'immagine grande apparirebbe dove il div (display invisible) display_picture_img è (sotto il clic sull'immagine per tornare al testo della galleria).
Questo è un buon momento per raccogliere tutte le tue foto e ridimensionarle. Prima di tutto, crea una cartella "pictures" e una cartella "thumbs". Aggiungi tutte le tue immagini alla cartella delle immagini e assegnale il nome 1.jpg, 2.jpg, 3.jpg, ecc. Ridimensiona tutte le dimensioni della dimensione display_picture_img: 530 pixel di larghezza e 272 pixel di altezza. Quindi copia questi file nella directory thumbs e ridimensiona le copie a 111 pixel di larghezza per 57 pixel di altezza. Non importa quante immagini hai. Tuttavia, ti consiglio di utilizzare più di 26 per questo tutorial in modo da poter utilizzare lo scorrimento verticale.
La prima cosa da fare è rimuovere tutto il 
Accentsconagua
var number_of_pictures = 32; function show_pictures () var while_pictures = 1; mentre (while_pictures <= number_of_pictures) var new_image = new Element('img', 'src': 'thumbs/' + while_pictures + '.jpg', 'id': 'image_' + while_pictures, 'events': 'click': function() $('display_picture_img').innerHTML = "![](\"")
"; $ ('display_picture_container'). fade (1); $ ('big_picture'). fade (.999999); $ ('controls_vert'). setStyle ('display', 'none'); if (this.id .replace ('image _', ") == 1) $ ('left'). set ('class', 'deactivated'); . $ ( 'A destra') cancella ( 'classe'); else if (this.id.replace ('image _', ") == number_of_pictures) $ ('left'). erase ('class'); $ ('right'). set ('class', 'disattivato '); else $ (' left '). set (' class ',' activated '); $ (' right '). cancella (' classe '); $ (' controls_horz '). setStyle (' display ',' block '); $ (' left '). tween (' margin-left ',' 286px ');); new_image.inject ($ (' inside ')); // precarica tutti i images var preload_image = new Element ('img', 'src': 'pictures /' + while_pictures + '.jpg', 'class': 'hide'); preload_image.inject ($ ('container')); // NOTA: non ho creato un attributo alt perché non verrà visto da nessuno qui comunque. While_pictures ++; window.addEvent ('domready', function () show_pictures (); $ ('display_picture_container') .fade ('nascondi');); Ecco come appare:
Per spiegarlo, iniziamo dal basso. In MooTools, il codice window.addEvent esegue il codice all'interno quando il DOM è pronto per il rendering degli elementi. $ ('Display_picture_container'). Fade ('nascondi'); nasconde il display_picture_container div e tutto il suo contenuto. Ho usato il metodo fade ('nascondi') perché lo sbiadiremo più tardi. Non creiamo un display: nessuno; dichiarazione nel nostro file CSS o JavaScript lo nascondono in questo modo; deve essere nascosto dalla funzione che useremo per mostrarlo di nuovo più tardi (dissolvenza).
Ora per la maggior parte: la funzione show_pictures. Prima di tutto, impostiamo la variabile number_of_pictures. Questo dice alla funzione di aggiungere miniature dalla cartella thumbs usando ogni numero intero da 1 al numero specificato. Per aggiungere più immagini a questa presentazione, tutto ciò che devi fare è aggiungerle alle cartelle, ridimensionarle e aumentare il valore number_of_pictures. Ho usato 32.
La parte successiva è il funzionamento interno di show_pictures. Questo, come suggerisce il nome, mostra tutte le immagini. Precarica anche le immagini più grandi in background. All'interno della funzione, while_pictures è definita come 1. Questa è la variabile che useremo come punto di partenza per la visualizzazione di tutte le immagini. La seguente istruzione while mostra che il codice interno verrà eseguito una volta per ogni immagine, iniziando da uno e salendo al numero totale di immagini (number_of_pictures). Notare che while_pictures ++; è alla fine del ciclo while, per farlo aumentare di uno ogni volta che il ciclo si ripete.
Successivamente, creiamo un'istanza Element per un elemento img. Possiamo aggiungere src, id, classe, evento e altri attributi. Tuttavia, abbiamo solo bisogno di src, id ed eventi. Usando 'src': 'thumbs /' + while_pictures + '.jpg', diciamo che vogliamo che l'immagine dell'rrc sia qualunque sia il numero corrente di oru e all'interno della cartella thumbs. Gli ID di tutte le nostre miniature saranno image_1, image_2, ecc.
Ora vogliamo avere un'immagine grande dopo aver cliccato su una miniatura, quindi creiamo un evento click. La prima riga sotto quella rende display_picture_img div contian l'immagine grande con un id di big_picture e una classe dell'ID della miniatura (image_1, image_2, ecc.). Ricorda che, in questo momento, il div display_picture_img è nascosto.
Ora usa il metodo .fade (1) per dissolvere il div di display_picture_container e tutto il suo contenuto. L'1 rappresenta il livello di opacità (1 è 100%, 0,5 è 50%, ecc.). Tuttavia, questo causa un errore in tutti tranne i browser più recenti come Firefox 3 e Safari. Sbiadiscono in modo corretto, ma gli altri appaiono nell'immagine e sfiorano l'area più scura circostante. Dopo molte sperimentazioni, ho scoperto che se si dispone della grande immagine (che ha big_picture come id) si dissolvono con il proprio metodo di dissolvenza, funziona, ma solo se la dissolvenza non è impostata su 1. Tuttavia, vogliamo l'immagine essere al 100% di opacità. Pertanto, l'ho impostato su .999999, che non ha alcuna trasparenza evidente.
Quindi ora l'immagine grande è sullo schermo. Tuttavia, vogliamo anche che i controlli si spostino verso il centro e diventino frecce sinistra e destra, anziché frecce su e giù. Prima di tutto, nascondiamo i controlli verticali (controls_vert). Possiamo usare display: none; per questo, perché non lo sbiadiremo dentro o fuori. Quindi usiamo un'istruzione if, if else e else per determinare se l'immagine su cui è stato fatto clic è la prima o l'ultima nella nostra galleria. Se era il primo, non vogliamo che sia in grado di andare a sinistra, perché non esiste uno precedente. La stessa cosa è necessaria a destra. In seguito, quando lavoreremo con le frecce sinistra e destra, avremo il rilevamento se ha o meno una classe disattivata. Questo determinerà se l'evento click funzionerà per questo. (Inoltre, controlla il CSS. Imposta l'immagine della freccia al 20%, risparmiando la necessità di avere 8 immagini freccia direzionali invece di 4.)
Successivamente, mostriamo i controlli orizzontali impostandone lo stile di visualizzazione da bloccare. Quindi, nascondendo i controlli verticali e mostrando i controlli orizzontali, li abbiamo appena disattivati. Tuttavia, vogliamo che i controlli orizzontali siano centrati. Ho realizzato questo creando un'interpolazione che anima un aumento del margine sinistro di 286 px, che è il centro della galleria.
Ora che abbiamo creato la nostra nuova immagine, dobbiamo inserirla all'interno del documento. Il metodo di iniezione consente di inserire l'elemento img appena creato nel div interno.
Vogliamo anche precaricare ognuna delle immagini, quindi non ci sarà alcun ritardo quando le persone effettivamente cliccano sulle immagini per farle svanire. Creiamo un nuovo elemento img per ogni immagine che è piena. Tuttavia, usa la classe hide, che, nel nostro CSS, usa display: none; per nascondere il contenuto. Quindi iniettiamo l'immagine del preloader nascosto nel contenitore div.
Ecco come appare dopo aver fatto clic su una miniatura:
Ora dobbiamo far sparire l'immagine quando clicchiamo su di essa. Inserisci il seguente codice dopo $ ('display_picture_container'). Fade ('nascondi'); dichiarazione in main.js.
$ ('display_picture_img'). addEvent ('click', function () $ ('display_picture_container'). fade (0); $ ('big_picture'). fade (0); $ ('up'). setStyle ( 'margin-left', '286px'); $ ('controls_horz'). setStyle ('display', 'none'); $ ('controls_vert'). setStyle ('display', 'block'); $ (' left '). setStyle (' margin-left ',' 7px '); $ (' up '). tween (' margin-left ',' 7px ');); Ciò aggiunge un evento click al div contenente l'immagine grande. Quando si fa clic, il contenitore si dissolve fino a nulla e, a causa del bug sopracitato, l'immagine stessa viene sbiadita a 0. Quindi impostiamo il div nascosto per avere lo stesso margine più alto a sinistra del div di sinistra. Quindi riportiamo i controlli orizzontali ai controlli verticali istantaneamente, quindi, dopo aver impostato il div di sinistra nascosto sul margine sinistro originale, animiamo il margine sinistro della freccia verso l'alto al suo 7px originale usando un'altra interpolazione. Ora puoi fare clic sulle miniature per farle esplodere e quindi fare clic sull'immagine grande per nasconderla di nuovo. Quasi fatto!
Ora prendi il seguente codice e incollalo sopra il codice appena inserito.
var vertical_moves = 0; var rows = Math.ceil (number_of_pictures / 5); if (rows> 5) $ ('up'). addEvent ('click', function (event) if (! $ ('up'). hasClass ('deactivated')) vertical_moves--; $ (' giù '). cancella (' classe '); $ (' dentro '). tween (' margin-top ',' - '+ (64 * vertical_moves) +' px '); if (vertical_moves == 0) $ ('su'). set ('classe', 'disattivato');); $ ('down'). addEvent ('click', function (event) if (! $ ('down'). hasClass ('deactivated')) vertical_moves ++; $ ('up'). cancella ('classe' ); $ ('inside'). tween ('margin-top', '-' + (64 * vertical_moves) + 'px'); if (vertical_moves == (rows-5)) $ ('down') .set ('classe', 'disattivato');); else $ ('up'). set ('class', 'deactivated'); $ ('down'). set ('class', 'deactivated'); var current_id = 1; $ ('left'). addEvent ('click', function () if (! $ ('left'). hasClass ('deactivated')) current_id = $ ('big_picture'). get ('classe') .replace ('image_', "); current_id--; $ ('big_picture'). fade ('nascondi'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '. jpg '); $ (' big_picture '). fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 1) $ (' left ') .set ('class', 'deactivated'); if (current_id == (number_of_pictures-1)) $ ('right'). erase ('class');; $ ('right') .addEvent ('click', function () if (! $ ('right'). hasClass ('deactivated')) current_id = $ ('big_picture'). get ('class'). replace ('immagine_' , "); current_id ++; $ ('big_picture'). fade ('nascondi'); $ ('big_picture'). set ('src', 'pictures /' + current_id + '.jpg'); $ ('big_picture ') .fade (1); $ (' big_picture '). set (' class ',' image_ '+ current_id); if (current_id == 2) $ (' left '). cancella (' classe '); if (current_id == number_of_pictures) $ ('right'). set ('class', 'deactivated');); La prima cosa che faremo è impostare lo scorrimento verticale. Prima di tutto, creeremo una variabile chiamata vertical_moves con valore 0. Questo ci dirà quante righe ha spostato verso il basso. Quindi scopriamo quante righe di immagini abbiamo, con 5 immagini di seguito. La funzione Math.ceil arrotonda qualsiasi numero che abbia un decimale in un numero intero. Ad esempio, ho 32 immagini. 32 diviso per 5 è 6.4, il che equivale a 6. Tuttavia, vogliamo comunque che vengano mostrate le immagini aggiuntive; anche se ci sono solo due immagini nell'ultima riga, vogliamo che contino come un'intera riga. Poiché Math.ceil arrotonda tutto, la quantità di righe diventa 7.
Successivamente, rileviamo se ci sono più di cinque righe. Se non ci sono, disattiviamo le frecce su e giù. Con cinque righe o meno, tutte le immagini vengono visualizzate senza la necessità dei pulsanti di scorrimento. Tuttavia, se ci sono sei o più, vogliamo aggiungere eventi a loro. Per il div up freccia, aggiungiamo un evento e quindi rileviamo se è stato etichettato come disattivato o meno. Se è disattivato, verrà visualizzato con solo il 20% di opacità e quando si fa clic su di esso, non farà nulla. Inoltre, non avrà più un puntatore come un cursore. Tuttavia, se non ha quella classe, continua. Se stai salendo, diminuisce la quantità di file verso il basso che hai sparito, quindi vertical_moves diminuisce di una riga. Quindi cancella qualsiasi classe che ha il down div. Se si trova sulla riga inferiore e la freccia giù è disattivata, una volta spostata su una riga, sarà in grado di spostarsi nuovamente verso il basso. Pertanto, impedisce che venga disattivato.
Successivamente, fa muovere tutte le miniature rilevando quali sono le nuove vertical_moves, moltiplicandole per 64 e rendendole negative. Il numero 64 viene utilizzato perché corrisponde all'altezza di una riga di miniature più il margine sottostante. Quindi applica questo valore al margine superiore. Ad esempio, se il margine superiore fosse originariamente di -128px, si sposterebbe verso l'alto perché il nuovo margine superiore sarebbe solo -64px. Il metodo dell'interpolazione lo rende sfumato nella sua nuova posizione. All'interno del file main.css, ha il div di picture_section nascondere il suo overflow. Questo è così che quando si applica un margine negativo in alto, lo nasconde invece di sporgere. Quindi determina se è nella parte superiore della galleria. Se lo è, disattiva la freccia su in modo che non possa andare più lontano. La freccia in giù ha le stesse azioni applicate, tranne che al contrario.
Ora faremo funzionare correttamente i pulsanti sinistro e destro. Prima di tutto, impostiamo current_id uguale a uno per creare la variabile. Questo ci aiuterà a determinare quale grande immagine viene visualizzata (ricorda che i pulsanti sinistro e destro appaiono solo quando viene visualizzata un'immagine grande). Quindi aggiungiamo un evento click al div sinistro e controlliamo se è disattivato o meno. Se non lo è, rileviamo la classe di img con l'id di big_picture. Questo è stato impostato prima come immagine_ (inserire il numero dell'immagine corrente qui). Usiamo il metodo get per trovare questo e il metodo replace per rimuovere il prefisso image_. Quindi lo sottraggiamo di uno, perché, spostandoci a sinistra, torneremo a un'immagine con un id di uno in meno.
Successivamente, nascondiamo l'immagine stessa all'istante, e poi cambia src all'immagine precedente. Quindi sfumiamo l'immagine fino al 100% di opacità. Dopodiché, cambiamo la classe dell'immagine con il suo nuovo valore, che consente a un utente di andare a sinistra ripetutamente. Quindi rileviamo se si trova nella prima immagine. Se è così, non possiamo più andare a sinistra, quindi disattiviamo il pulsante sinistro. Se è la penultima foto dopo aver cliccato a sinistra, vuol dire che era solo sull'ultima immagine, dove il pulsante destro sarebbe stato disabilitato. In questo caso, abilitiamo il pulsante giusto in modo che possano proseguire in avanti. Quasi le azioni identiche vengono applicate al pulsante destro, tranne, di nuovo, al contrario.
Ora questo è tutto. L'immagine grande si attenua quando fai clic su una miniatura, puoi spostarti a sinistra e a destra, tornare alla galleria principale facendo clic sull'immagine grande e scorrere verso l'alto e verso il basso. Ma aspetta! Dopo aver sviluppato un buon browser come Firefox, è necessario testarlo in altri browser popolari come Safari, IE6 e IE7. Li ho testati tutti, e hanno funzionato tutti, tranne che per la sorpresa! -Internet Explorer 6. Quando fai clic su un'immagine e i controlli orizzontali escono, scivolano troppo in IE6. Per qualche ragione, IE6 pensa che ciò che ogni altro browser pensa sia 286px è solo 143px. Quindi, cambia il seguente codice:
$ ('left'). tween ('margin-left', '286px'); A questo:
if (Browser.Engine.trident4) $ ('left'). tween ('margin-left', '143px'); else $ ('left'). tween ('margin-left', '286px'); Browser.Engine.trident4 restituisce true se il browser è IE6. In caso contrario, restituisce false e esegue il codice originale. E il seguente codice:
$ ('su'). setStyle ('margin-left', '286px'); A questo:
if (Browser.Engine.trident4) $ ('up'). setStyle ('margin-left', '143px'); else $ ('up'). setStyle ('margin-left', '286px'); Ora funziona su tutti i browser. A questo punto, puoi anche visitare il sito MooTools e selezionare solo i componenti che hai usato. Anche se mootools.js, main.js, main.css e il file HTML utilizzano meno di 100kb insieme, puoi sempre ridurre le dimensioni per ottimizzare l'esperienza per gli utenti con una connessione Internet più lenta. Tuttavia, ho lasciato l'intera libreria MooTools nel codice sorgente per questo, così le persone che vogliono cambiare le cose nella galleria possono usare tutti i componenti.
.
