Bellissima gallery fotografica su jquery. Fotorama: galleria jQuery reattiva, installazione e configurazione. Plug-in Galleria timer

In questa lezione ti mostrerò come creare una galleria fotografica minimalista, ma allo stesso tempo comoda e funzionale utilizzando jQuery, oppure una galleria di immagini, come preferisci. La galleria ha la possibilità di creare categorie, seguite dal filtraggio. È anche possibile avviare una presentazione. La galleria funziona su tutti i browser, quindi non ci saranno problemi con l'adattamento.

Per creare questa gallery utilizzeremo due librerie jQuery gratuite: Quicksand e PrettyPhoto. Rendono la creazione di una galleria molto più semplice. Come sempre potete vedere il risultato del lavoro nella pagina demo, e anche scaricare l'archivio dalla working gallery e tutti i file sorgenti. L'unico inconveniente, per così dire, è la creazione manuale di miniature per immagini di grandi dimensioni. Sotto tutti gli altri aspetti, questa galleria merita attenzione.

FONTI

Markup HTML

Per prima cosa, diamo un'occhiata al pannello con l'elenco delle categorie, questo è un elenco puntato ul. Inoltre, ogni elemento dell'elenco deve avere nome unico classe.

Categorie:

Tutto

Categoria 1

Categoria 2

Categoria 3

Categoria 4

Nome dell'immagine

Come accennato in precedenza, gli elementi dell'elenco sono immagini nella galleria. Ogni elemento dell'elenco include componenti. Questa è l'immagine stessa, o meglio la sua miniatura, oltre a una descrizione. La miniatura è un collegamento all'immagine principale. L'attributo rel è necessario per chiamare javascript e aprire l'immagine principale.

Non dimenticare anche 2 cose importanti: l'elemento li list deve avere un attributo data-id univoco. L'attributo data-type contiene la classe categoria, il cui elenco ho descritto sopra. Sembra che tutto riguardi il markup.

Stili CSS

Non mi concentrerò particolarmente sugli stili, poiché utilizziamo la libreria PrettyPhoto già pronta, che è responsabile dell'ingrandimento dell'immagine, e c'è parecchio codice CSS. Tuttavia, vale la pena notare che ci sono 5 opzioni per progettare un'immagine ingrandita, anche se idealmente solo 3, poiché in due opzioni viene rimosso solo l'arrotondamento.

Pertanto, mostrerò solo Stili CSS per le miniature e un elenco di categorie.

Categoria portafoglio (margine-bottom:30px;)
.portfolio-categli (
visualizzazione: in linea;
margine destro: 10px;
}
.blocco-immagine(
blocco di visualizzazione;
posizione: relativa;
}
.blocco immagine img (
bordo: 1px solido #d5d5d5;
raggio del bordo: 4px 4px 4px 4px;
sfondo:#FFFFFF;
imbottitura: 10px;
}
.blocco immagine img:al passaggio del mouse (
bordo: 1px solido #A9CF54;
box-ombra:0 0 5px #A9CF54;
}
.portfolio-area li (
galleggiante: sinistra;
margine: 0 12px 20px 0;
overflow: nascosto;
larghezza: 245px;
imbottitura: 5px;
}
.home-portfolio-testo (margine-top:10px;)
li.active a ( decorazione del testo:underline; )

In linea di principio, tutto dovrebbe essere chiaro con gli stili. Per allineare le categorie, la proprietà display è impostata su inline . Per dare l'effetto di delineare un'immagine, impostare colore di sfondo(bianco) e un riempimento di 10 pixel. Le dimensioni degli elementi dell'elenco sono impostate in .portfolio-area li .

jQuery

E infine, la cosa più importante è lo scopo dell'intera lezione. Questo è il codice jQuery. Iniziamo filtrando le immagini per categoria.

// Seleziona tutti gli elementi secondari di portfolio-area e scrivi in una variabile
var $dati = $(".portfolio-area").clone();

$(".portfolio-categ li").click(funzione(e) (
$(".filter li").removeClass("active");

Var filterClass=$(this).attr("class").split(" ").slice(-1);

Se (filterClass == "tutto") (
var $filteredData = $data.find(".portfolio-item2");
) altro (
var $filteredData = $data.find(".portfolio-item2");
}
$(".portfolio-area").quicksand($filteredData, (
durata: 600,
regolareAltezza: "automatico"
), funzione () (

LightboxFoto();
});
$(this).addClass("attivo");
restituire falso;
});

Utilizzando il metodo clone() e un selettore, selezioniamo tutti gli elementi figli di .portfolio-area e li scriviamo nella variabile $data. Successivamente, tracciamo il clic su una delle categorie, l'elemento li dell'elenco con la classe .portfolio-categ . Rendiamo inattive tutte le categorie rimuovendo RemoveClass(“active”), se ciò non viene fatto, nel tempo tutte le categorie saranno attive e il filtraggio verrà interrotto.

Poiché clicchiamo su un elemento della lista, questo selettore contiene un elemento della lista, cioè li , da esso prendiamo il valore dell'attributo class e utilizzando il metodo split dividiamo il nome della classe in più parti, il bordo è uno spazio (cioè se la classe era "tutta attiva", dopo la divisione otteniamo un array di "tutti" e "attivi"). Quindi, utilizzando il metodo slice, selezioniamo il primo elemento dell'array (nel nostro caso "all") e scriviamo il risultato risultante nella variabile filterClass. Se non c'è spazio, il nome della classe non cambierà.

Successivamente, controlliamo se la variabile filterClass contiene la stringa all , quindi utilizzando il metodo .find selezioniamo tutti gli elementi con la classe portfolio-item2 dall'array $data, che abbiamo visto sopra. Gli elementi selezionati (e questi sono tutti gli elementi dell'elenco, cioè tutte le immagini) vengono inseriti nella variabile filteredData.

Altrimenti, se filterClass non è uguale a all , non inseriremo tutti gli elementi dell'elenco nella variabile filterData, ma solo quelli il cui attributo data-type corrisponde alla classe Category. Insomma, elementi di una sola categoria.

Infine, passiamo la variabile risultante alla libreria jquery sabbie mobili, che filtra le immagini. Questo è tutto per il filtraggio.

Ora, per quanto riguarda l'ingrandimento dell'immagine nella finestra pop-up. Qui è tutto molto più semplice.

JQuery("a").prettyPhoto((
animazioneVelocità: "veloce",
presentazione: 5000,
tema: "Facebook",
mostra_titolo: falso,
overlay_gallery: falso
});

Tiene traccia di un clic su un collegamento che attributo rel inizia con PrettyPhoto. Poi entra in gioco la libreria PrettyPhoto e l'immagine viene miracolosamente ingrandita. A proposito, stiamo anche passando diversi parametri. Ad esempio, la velocità dell'animazione è elevata, il ritardo della presentazione è di 5 secondi, il tema del design di Facebook (ci sono 5 temi in totale, si trovano nella cartella images/prettyPhoto) e proibiamo anche di mostrare il nome dell'immagine e ingrandire l'immagine quando si passa il mouse.

Ho passato molto tempo a scegliere l’argomento per l’argomento di oggi. Di conseguenza, ho notato che non abbiamo ancora realizzato raccolte con gallerie di immagini. Secondo me è un argomento eccellente, poiché molti siti hanno gallerie. Francamente, non sono tutti molto attraenti. Considerando le attuali tendenze nello sviluppo di jquery, html5, ecc., ho pensato che dovessero esserci soluzioni molto più attraenti di quelle che avevo incontrato prima. COSÌ. Dopo aver trascorso una giornata, siamo riusciti a trovare un numero enorme di script. Di tutta questa montagna, ho deciso di selezionare solo, perchè la adoro, come avete già notato dai post precedenti.
La galleria immagini è applicabile non solo nel caso degli album fotografici. La sceneggiatura può essere utilizzata, credo sarebbe ancora più corretto, come portfolio per fotografi, designer, ecc. Effetti Jquery aiuterà ad attirare l'attenzione dei visitatori e aggiungerà semplicemente eleganza al tuo sito.
COSÌ. Portiamo alla tua attenzione una raccolta di plug-in della galleria di immagini jquery per il sito.
Non dimenticate di commentare e ricordate, per non perdere questa collezione, potete aggiungerla ai preferiti cliccando sulla stellina in fondo all'articolo.

PHOTOBOX Una galleria di immagini gratuita, leggera e adattiva in cui tutti gli effetti e le transizioni sono realizzati utilizzando css3. Ideale per creare il sito web del portfolio di un fotografo.

S Gallery Un attraente plugin per la galleria di immagini Jquery. L'animazione funziona utilizzando css3.

DIAMONDS.JSOPlugin originale per creare una galleria di immagini. Le miniature hanno la forma di un diamante, che è questo momento molto popolare. Questo modulo è realizzato utilizzando css3. L'unico inconveniente di questa galleria è la mancanza di una lightbox in cui la foto si aprirebbe a grandezza naturale. Cioè, dovrai avvitare il plugin lightbox. Questo script genera una griglia adattiva di immagini a forma di diamante.

Superbox Una moderna galleria di immagini che utilizza Jquery, css3 e html5. Siamo tutti abituati al fatto che quando si fa clic su un'anteprima, l'immagine completa si apre in una lightbox (finestra pop-up). Gli sviluppatori di questo plugin hanno deciso che la lightbox aveva già esaurito la sua utilità. Le immagini di questa gallery si aprono sotto l'anteprima. Guarda la demo e scopri che questa soluzione sembra molto più moderna.
| Galleria con dissolvenza diagonale fluida Una moderna galleria di immagini in cui le anteprime sono distribuite sull'intero spazio dello schermo. Lo script può scansionare una cartella con foto sul server, ovvero non è necessario inserire ciascuna immagine separatamente. Basta caricare le immagini in una cartella sul server e specificare il percorso della directory nelle impostazioni. Quindi lo script farà tutto da solo.

Galleria Gamma Una galleria di immagini elegante, leggera e reattiva con una griglia in stile Pinterest che è diventata molto popolare al giorno d'oggi. La sceneggiatura funziona benissimo su entrambi computer desktop e così via dispositivi mobili con qualsiasi risoluzione dello schermo. Soluzione perfetta per creare un portfolio di web designer.

GRIGLIA DI MINIATURA CON ANTEPRIMA ESPANDIBILE Il plugin è una griglia di immagini reattiva. Quando fai clic qui sotto, verranno visualizzate una foto e una descrizione più grandi. Buono per creare un portfolio.

jGalleryjGallery è una galleria di immagini reattiva a schermo intero. Effetti, transizioni e persino stile sono facilmente personalizzabili.

Glisse.js Un plugin per gallerie di immagini semplice ma molto efficace. Questa è esattamente la soluzione quando devi creare un album fotografico. Il plugin supporta gli album e ha un effetto capovolgimento molto interessante.

Mosaic Flow Una galleria di immagini semplice e reattiva con una griglia in stile Pinterest.

GalereyaUn'altra galleria elegante con una griglia in stile Pinterest filtrata per categoria. Funziona con i browser: Chrome, Safari, Firefox, Opera, IE7+, browser Android, Chrome per dispositivi mobili, Firefox per dispositivi mobili.

less.jsOttima galleria di immagini gratuita che utilizza JQUERY, 5 e CSS3. Ha un aspetto molto attraente e attirerà senza dubbio l'attenzione dei tuoi visitatori.

flipLightBox Una semplice galleria di immagini. Quando fai clic sull'anteprima, l'immagine completa si apre in una lightbox.

blueimp GalleryGalleria flessibile. Capace di visualizzare non solo immagini, ma anche video in una finestra modale. Funziona alla grande su dispositivi touch. È facile da personalizzare ed è possibile espandere le funzionalità utilizzando plugin aggiuntivi (vedi il plugin successivo).

Ho esaminato più volte varie gallerie di immagini e ho raccolto un'ampia raccolta di presentazioni e plug-in spettacolari. Lightbox è disponibile anche esclusivamente su CSS3, senza collegare librerie js aggiuntive. Ma il tempo non si ferma, gli utenti utilizzano sempre più diversi dispositivi mobili per navigare in Internet, il che significa che l'adattabilità degli elementi web e in particolare delle gallerie fotografiche con l'effetto " " diventa una delle priorità a cui i web designer e gli sviluppatori dovrebbero prestare attenzione A.

Presento un'altra selezione di 15 plugin jQuery adattivi che sono compatibili sia con i browser desktop e si adattano perfettamente agli schermi di vari dispositivi mobili (laptop, smartphone, tablet, ecc.).

Guarda la demo sui siti web degli sviluppatori, scarica il plugin che ti piace e crea, crea, crea...

1. iLightbox

iLighbox è un plugin jQuery Lightbox leggero con supporto per un'ampia gamma di vari tipi file: immagini, video, Flash/SWF, contenuti Ajax, frame e mappe incorporate. Questo plugin aggiunge anche pulsanti social networks, che consente agli utenti di condividere contenuti tramite Facebook, Twitter o Reddit. Un'ottima opportunità per organizzare spettacolari presentazioni, gallerie di immagini e video, con visualizzazione in modalità normale e schermo intero.

iLighbox funziona abbastanza rapidamente e, se visualizzato su dispositivi mobili, visualizza più che correttamente il contenuto elaborato. Tra le altre cose, utilizzando questo plugin, puoi facilmente implementare la visualizzazione dei blocchi di informazioni come una finestra modale.

Dipendenza: jQuery
Supporto browser: IE7+, Chrome, Firefox, Safari e Opera
Licenza: Il diavolo lo sa)))

2. SwipeBox

Swipebox è un plugin jQuery con supporto per schermi tattili piattaforme mobili. Oltre alle immagini, il plugin supporta video incorporati da Youtube e Vimeo. Swipebox è molto facile da collegare a qualsiasi progetto; il plugin ha diverse opzioni intuitive per personalizzarne funzionalità e comportamento. Il sito Web dello sviluppatore contiene una documentazione dettagliata sulla connessione e l'utilizzo del plug-in, senza inutili complicazioni, tutto è pertinente, quindi penso che non sarà difficile capire cosa, dove e perché.

Dipendenza: jQuery
Supporto browser: IE9+, Chrome, Safari, Firefox, Opera, IOS4+, Android e Windows Phone
Licenza: non determinata, forse sarai fortunato)))

3.MagnificPopup

Un plugin lightbox noto da tempo e ben collaudato basato su jQuery o Zepto.js. L'autore del plugin è Dmitry Semenov, che è anche lo sviluppatore del plugin PhotoSwipe, di cui parlerò di seguito. Fornito come plugin jQuery/Zepto, ha funzionalità più avanzate non presenti in PhotoSwipe, come supporto video, visualizzazione di mappe e contenuti Ajax, implementazione di finestre modali con moduli integrati. Secondo tutti i criteri, questo è un altro ottimo strumento per uno sviluppatore web. C'è un plugin separato per WordPress e una documentazione dettagliata sulla configurazione e sull'utilizzo. L'unica cosa deprimente è la mancanza di documentazione in russo, a giudicare dal nome e cognome l'autore sembra russo, non si è mai capito se fosse dannoso, o per un'immaginaria consapevolezza della propria raffinatezza, ma bla. Bene, ok, chi ha bisogno di capirlo, anche noi non abbiamo bollito il tè alla coque))).

Dipendenza: jQuery 1.9.1+ o Zepto.js
Supporto browser: IE7 (parzialmente), IE8+, Chrome, Firefox, Safari e Opera
Licenza: licenza MIT

4.Scorri foto

Dipendenza: Javascript o jQuery
Supporto del browser
Licenza: licenza MIT

11.PiumaLuce

Plugin lightbox a 6 kbit, per sviluppatori più o meno smaliziati, dotato di tutto il massimo funzioni necessarie. Oltre a supportare tutti i tipi di contenuto comuni (testo, immagini, iframe, Ajax), c'è la possibilità di collegarne uno aggiuntivo e puoi anche sviluppare la tua estensione per questo plugin, che soddisferà pienamente le tue esigenze durante la creazione di un nuovo progetto. Come funziona l'intera faccenda (sviluppo dell'estensione), non l'ho approfondito, ma coloro che installano questo plugin, penso che lo capiranno))).

Dipendenza: jQuery
Supporto browser: IE8+, Chrome, Firefox, Safari e Opera
Licenza: licenza MIT

12. Galleria della luce

LightGallery è un plugin lightbox multifunzionale con molti caratteristiche aggiuntive. Viene fornito con oltre 20 opzioni per personalizzare i più piccoli dettagli del Lightbox. C'è tutto qui, beh, o quasi tutto)). Galleria di immagini completa con miniature ben organizzate, elementi di navigazione e scorrimento delle miniature. Semplice markup HTML sotto forma di elenco non ordinato

Aspetto

utilizzando i CSS

Dipendenza: jQuery
Supporto browser: IE7+, Chrome, Firefox, Safari, Opera, iOS, Android e Windows Phone
Licenza: licenza MIT

Insolito, direi addirittura: un'implementazione insolita del lightbox, o meglio, una presentazione insolita dei contenuti, quando un'immagine o un video, nel design del lightbox, appare a destra, riempiendo non l'intero schermo, ma solo una determinata dimensione di un'immagine o un video a grandezza naturale. SU grandi schermi Questo approccio è comprensibile; l'interazione con la pagina rimane possibile. Sui piccoli schermi dei dispositivi mobili, tutto questo design innovativo si trasforma dolcemente in un classico “lightbox”. L'idea è interessante, guarda la demo, forse qualcuno aggiungerà tanta creatività.

Dipendenza: jQuery
Supporto browser: IE7+, Chrome, Firefox, Safari, Opera, iOS 5+ e Android 3+
Licenza: licenza Creative Commons BY-NC-ND 3.0

Un plug-in lightbox facile da usare che si adatta bene a qualsiasi progetto e ha un bell'aspetto su qualsiasi schermo. Il plugin LightLayer fornisce il controllo su molte impostazioni, come la modifica del colore di sfondo e del grado di trasparenza, la posizione del blocco base, la scelta degli effetti di transizione all'apertura/chiusura, funzioni che gli utenti possono manipolare in modo indipendente. Il plug-in funziona perfettamente con contenuti di siti Web esterni, lettori video incorporati e mappe.

Dipendenza: jQuery
Supporto browser: IE9+, Chrome, Firefox, Safari e Opera
Licenza: licenza MIT

Fluidbox è un plugin lightbox esclusivamente per immagini. Il numero di possibili variazioni nella presentazione delle immagini è davvero impressionante. Il plugin funziona benissimo con immagini in vari design, comprese immagini fluttuanti, immagini con posizionamento assoluto, immagini e fotografie incorniciate e rientrate, con immagini singole e combinate in una galleria. In generale, è una perdita di tempo, non è ancora possibile descrivere tutte le funzionalità del plugin in una breve presentazione, quindi è meglio guardare la demo, girarla, capovolgerla e penso che a molte persone piacerà questo plugin .

Dipendenza: jQuery
Supporto browser: IE9+, Chrome, Firefox, Safari, Opera
Licenza: licenza MIT

Probabilmente è tutto! Spero che questa breve recensione ti aiuti a comprendere l'enorme quantità di prodotti di sviluppo web offerti. Vorrei sottolineare che non ho utilizzato tutti i plugin presentati nella selezione su progetti funzionanti, ne ho testati la maggior parte su siti di prova o in seminario, quindi se sorgono domande, molto probabilmente le risolveremo insieme e insieme, come sempre, ce la faremo.

Stai cercando un modello russo adatto ai tuoi scopi? In questo caso, probabilmente dovresti visitare il marketplace di TemplateMonster. Per il semplice motivo che proprio di recente sul sito è apparsa una nuova sezione di modelli. Ora ogni utente può familiarizzare con la raccolta, che verrà aggiornata e aggiornata. I testi per i modelli sono stati scritti a mano. Ma questo non è l’unico vantaggio dei dati. soluzioni già pronte. Dopotutto, nei loro pacchetti puoi trovare tutto ciò che renderà più semplice il tuo lavoro sullo sviluppo di un progetto online, incluso un editor visivo.

Con tutto il rispetto, Andrea

Galleria jQuery

Una soluzione simile può essere utilizzata per visualizzare gli ultimi articoli del blog o per presentare i prodotti.

Un modo unico per visualizzare le tue foto in una fantasiosa galleria jQuery.

Il plugin jQuery è perfetto per implementare una pagina di prodotto con più immagini. La transizione tra le immagini può essere eseguita utilizzando le miniature o utilizzando le frecce di navigazione.

L'immagine si ingrandisce quando ci si passa sopra con il mouse.

Galleria jQuery professionale 2011.

Un altro plugin jQuery di alta qualità dagli sviluppatori di Nivo slider. Ingrandisci l'immagine cliccando sulla miniatura.

Nuova galleria jQuery per il 2011. Il feed delle immagini copre l'intera larghezza dello schermo. Puoi navigare tra le foto in tre modi: utilizzando la rotellina del mouse, scorrendo nella parte superiore della galleria e utilizzando il blocco delle miniature in basso. La galleria sembra davvero impressionante.

Le immagini nella galleria vengono ingrandite e ridotte nuovamente in modo casuale creando un effetto bolla.

Utilizzando il cursore in alto, puoi modificare la distanza tra le immagini nella pila. Quando si fa clic su un'immagine, questa ruota.

Plugin dal 2011. Una nuova galleria con descrizioni di immagini, che si estende su tutta l'area della finestra del browser, indipendentemente dalle sue dimensioni. Le miniature delle immagini sono implementate in modo interessante. La transizione tra le foto viene effettuata utilizzando le frecce vicino alla miniatura e utilizzando la rotellina del mouse.

Il plugin esegue automaticamente la scansione della cartella e crea piccole copie delle immagini.

Effetto interessante quando passi il mouse sulla miniatura.

Una nuova versione

Di recente ho già menzionato questa soluzione jQuery per la creazione di gallerie a schermo intero. Oggi voglio presentarvi ultima versione questo plugin professionale. Lo script è stato completamente riscritto, ora la galleria funziona ancora più velocemente e sono state aggiunte alcune impostazioni interessanti, ad esempio la navigazione tramite tastiera, la velocità variabile di cambio delle immagini, le dimensioni dello schermo e altre.

Nuova gallery jQuery per i tuoi progetti.

La galleria viene visualizzata sulla pagina quando si preme un pulsante. Intorno all'immagine ingrandita vengono visualizzate le miniature. È possibile controllare il cambio automatico delle immagini. Tecnologie utilizzate: jQuery, CSS, PHP.

Galleria jQuery. Implementato il cambio automatico delle diapositive e lo scorrimento delle miniature se ce ne sono troppe.

Plugin per la galleria di immagini che utilizza jQuery.

Una galleria di immagini ottimizzata per la visualizzazione su dispositivi mobili (telefoni o tablet).

Nuovo Dispositivo di scorrimento jQuery. Diversi fantastici effetti animati quando si cambiano le diapositive.

Una galleria originale sotto forma di miniature di varie dimensioni sparse sullo schermo, stilizzate come quadri. Quando si fa clic sulla miniatura viene visualizzata un'area con la descrizione dell'immagine e quando si fa nuovamente clic viene visualizzata l'originale immagine di grandi dimensioni.

Interessante effetto hover.

Galleria jQyery con miniature. È stata implementata la possibilità di visualizzare in una finestra compatta e in una finestra a schermo intero, nonché la possibilità di disabilitare/abilitare il cambio automatico delle diapositive.

La griglia dell'immagine viene allungata in base alla larghezza della finestra del browser. Un interessante effetto al passaggio del mouse: la riga e la colonna attive vengono evidenziate.

Galleria jQuery leggera in poche righe di codice.

La pagina demo presenta diverse opzioni per i mega menu a discesa, in diversi stili. In questo menu puoi configurare: l'effetto di eliminazione, la velocità di eliminazione e anche scegliere tra l'eliminazione facendo clic o passando il mouse su un elemento.

Galleria jQuery con didascalie delle immagini. Diversi effetti di transizione delle diapositive. La navigazione tra le immagini viene effettuata utilizzando le frecce o facendo clic sulla miniatura.

L'immagine e le sue miniature sono realizzate sotto forma di cerchi.

Una soluzione Javascript originale per progettare il portfolio di un fotografo. La navigazione tra le immagini si effettua utilizzando le frecce Su/Sinistra/Destra e utilizzando i mini-quadrati (imitazione del movimento nello spazio 2D). Puoi raggruppare le foto di diverse sessioni fotografiche in diverse righe verticali e spostarti tra di esse utilizzando gli elementi di navigazione. Guarda la dimostrazione.

Plugin per visualizzare immagini che si estendono fino all'intera dimensione della finestra del browser. Può essere utilizzato per visualizzare le opere di un portfolio.

Galleria integrata con Google Map. Puoi espanderlo a schermo intero facendo clic sull'icona nell'angolo in basso a destra. Perfetto per i siti web di viaggio.

Galleria jQuery con miniature.

Presentazione con miniature.

jQuery CSS

Presentazione ondulata di immagini e contenuti su una pagina. Quando si fa clic su una miniatura, tutte le immagini vengono ingrandite e vengono visualizzati i loro nomi. Premendolo nuovamente si apre un blocco con la descrizione della foto.

Molte opzioni e impostazioni di visualizzazione.

Sembra bellissimo e funziona benissimo in tutti i browser moderni

Puoi controllare la presentazione automatica (avvio/arresto), cambiare diapositiva utilizzando le frecce della tastiera, l'impaginazione automatica dei titoli delle diapositive se ce ne sono molti, supporta più gallerie su una pagina, didascalie per le diapositive, supporto API e la possibilità di crearne di tue effetti di transizione delle diapositive

Ecco come dovrebbe apparire il risultato della gallery che creeremo. Puoi guardare la demo e, se lo desideri, scaricare il risultato finale della gallery.

Ciao a tutti! Oggi parleremo forse della migliore galleria fotografica, video e slider fotografico gratuiti, parliamo di "cornice per foto". Nonostante il fatto che la sceneggiatura non sia stata supportata per 2 anni e l'autore sia passato a un progetto su un argomento simile, funziona benissimo e continua a soddisfare la vista.

Principali vantaggi (+)

Facile da installare, configurare e utilizzare. Oltre a jQuery, avrai bisogno collega solo 2 file e per visualizzare la galleria è sufficiente fornire i collegamenti alle immagini.
Influisce leggermente sulla velocità di caricamento del sito.
Adattabilità. La tua galleria avrà un bell'aspetto su un telefono, un laptop e persino sullo schermo della TV.
Numerose impostazioni e funzioni che possono essere collegate separatamente tramite gli attributi dei tag HTML.
Supporto per dispositivi touch.
Supporto video.
Possibilità di caricamento lento delle immagini.
E molte, molte altre cose che piaceranno a un utente sofisticato.

Lati negativi (-)

Mancanza di supporto da parte degli utenti. La probabilità che il tuo problema venga affrontato o corretto è quasi zero. Sì, questo è brutto, ma non fatale.

Questa opzione di connessione è la più semplice, ma non la migliore; va utilizzata solo se è necessario visualizzare la gallery sulla maggior parte delle pagine del sito. Il vantaggio di questa opzione è l'utilizzo della CDN.

Controllo di jQuery. Vai a fonte site (scorciatoia da tastiera Ctrl + U) → cercando di trovare qualcosa di simile a questa riga: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js
Per facilitare la ricerca, usa Ctrl + F . Se la linea desiderata non è presente, dovrai connettere jQuery. Su WordPress, questo può essere fatto incollando il codice seguente nel file delle funzioni del tema (functions.php). In effetti, questo script viene utilizzato per i conflitti versioni diverse jQuery e funziona secondo il seguente schema: cancella la jQuery precedentemente registrata, ne registra una nuova e visualizza lo script. Versioni attuali Le librerie jQuery possono essere trovate qui.
Puoi semplicemente inserire questa riga tra e :
Colleghiamo fotorama.css e fotorama.js. Inserisci il seguente codice tra i tag e, in WordPress questo viene fatto nel file header del tema (header.php).
Questo completa la connessione della galleria utilizzando il primo metodo. Come usarlo è scritto nella sezione “Creazione diretta di una galleria”.

In questa opzione di connessione, i file di script verranno visualizzati solo sulle pagine necessarie tramite [shortcode]. E se utilizzi il plugin Autoptimize, anche il codice dello script verrà integrato nei file del tema. Queste semplici manipolazioni dovrebbero aumentare la velocità di caricamento del sito.

Controllo di jQuery. Proprio come nella prima opzione, vedi sopra.
Scarica i file della cornice digitale → decomprimi → carica in cartella separata alla radice del sito.
Per creare uno shortcode, inserisci il codice seguente nel file delle funzioni del tema (functions.php), modifica i collegamenti ai file con i tuoi..js"> "; ) add_shortcode("foto","sd");
Ora, quando scrivi un articolo, inserisci lo shortcode alla fine

La galleria viene visualizzata in codice HTML utilizzando contenitore c class="fotorama", il contenitore contiene il codice di output dell'immagine o collegarsi all'immagine . Quando scrivi un articolo utilizzando il motore WordPress, imposta l'editor in modalità testo e inserisci il contenitore c class="fotorama" .

Sembra questo:

Oppure così (la numerazione dei link è facoltativa):

1 3 4

Esempi di impostazioni di Fotorama Dimensioni del contenitore

La dimensione del blocco cornice digitale corrisponde alla dimensione della prima immagine, le altre immagini vengono ridimensionate in proporzione alla prima. Per correggere questa situazione, è possibile specificare manualmente le dimensioni.

Ci sono altre impostazioni:

Data-width="98%" //larghezza relativa data-ratio="800/600" //proporzioni data-minwidth="420" //min. larghezza data-maxwidth="900" // larghezza massima larghezza data-minheight="320" // larghezza min. altezza data-maxheight="100% // altezza massima relativa data-height="100% // altezza relativa

Miniature

Data-nav="thumbs" è responsabile delle miniature

Ma questo metodo non è molto efficace, poiché lo script deve caricare tutte le foto contemporaneamente per generare le miniature, quindi sarebbe più razionale preparare in anticipo piccole copie delle immagini. WordPress crea automaticamente le miniature, che è ciò che useremo. Per ottenere un collegamento alla miniatura, aggiungi -70x70 al nome del file (https://site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https://site/wp-content/uploads/2017/ 11/27ltl9eRXk-70x70.jpg).

Per impostazione predefinita, la miniatura è 64 × 64. Puoi regolare questo parametro utilizzando data-thumbwidth (larghezza) e data-thumbheight (altezza). Se hai bisogno che la miniatura abbia una propria dimensione, imposta i parametri di larghezza e altezza per il file di miniatura:

Codice HTML + Fotorama

Photoframe elabora perfettamente HTML e CSS, espandendo significativamente la funzionalità dello script. Lavora con collegamenti, blocchi, tabelle, paragrafi, scrivi CSS e molto altro. Di seguito sono riportati alcuni esempi del lavoro della galleria. Se la parte visiva non viene visualizzata, fare clic sul pulsante "Risultato".

Mostra/Nascondi esempi

Guarda la Pen ooppwb di Ivanov Klim (@DreamerKlim) su CodePen.

Guarda la penna aVEEVb di Ivanov Klim (@DreamerKlim) su CodePen.

Modalità schermo intero data-allowfullscreen="true" //nella finestra del browser data-allowfullscreen="native" //sull'intero monitor

È possibile aggiungere un'immagine grande separata per modalità schermo intero tramite dati completi: