Bella galleria fotografica su jquery. Fotorama è una galleria jquery adattativa, installazione e configurazione. Plugin "Galleria timer"

In questa lezione, ti mostrerò come creare minimalista, ma allo stesso tempo comodo e funzionale galleria fotografica su jQuery, o la Galleria delle immagini, come confortevole. La galleria ha la possibilità di creare categorie, seguita dalla filtrazione. È anche possibile lanciare uno slideshow. La galleria funziona in tutti i browser, quindi non ci saranno problemi con l'adattamento.

Due librerie gratuite saranno utilizzate per creare questa galleria. JQuery: Quicksand.e Bella foto. Semplificano notevolmente la creazione della galleria. Come sempre, puoi vedere il risultato sulla pagina Demo, oltre a scaricare l'archivio con le gallerie di lavoro e tutti i file di origine. L'unico meno, se così da parlare, è creare una miniatura manuale per immagini di grandi dimensioni. E in tutto il resto di questo galleria Attenzione decente.

Fonti

Marcatura HTML.

Innanzitutto, analizzeremo il pannello con l'elenco delle categorie, questo è un elenco marcato di ul. Inoltre, ogni elemento della lista deve avere un nome di classe unico.

Categorie:

Qualunque cosa

Categoria 1.

Categoria 2.

Categoria 3.

Categoria 4.

Nome Immagini

Come menzionato sopra, gli elementi della lista sono immagini nella galleria. Ogni elemento dell'elenco include composito. È direttamente l'immagine stessa, più precisamente la sua miniatura, nonché una descrizione. Miniatura è un collegamento all'immagine principale. L'attributo REL è richiesto per chiamare JavaScript e aprire l'immagine principale.

Non dimenticare anche 2 cose importanti, l'attributo elemento list lisci L'attributo dati-ID deve essere unico. L'attributo tipo dati contiene una classe di classe, che ho descritto sopra. Il markup sembra essere tutto.

Stili CSS.

Soprattutto actuinare l'attenzione sugli stili non, poiché usiamo la biblioteca già pronta Bella fotoche è responsabile per aumentare l'immagine e il codice CSS è un bel po '. Tuttavia, vale la pena notare per 5 opzioni per il design dell'immagine ingrandita, anche se idealmente 3, poiché in due versioni vengono rimosse solo.

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

Portfolio-categ (margin-bottom: 30px;)
.PortFolio-categ. li (
Display: in linea;
Margin-destra: 10 px;
}
.image-block (
Blocco di visualizzazione;
Posizione: relativo;
}
.image-block img (
Confine: 1 px solido # D5D5D5;
Border-Radius: 4px 4px 4 px 4 px;
Sfondo: #ffffff;
Imbottitura: 10 px;
}
.image-block img: Hover (
Confine: 1 px solido # A9CF54;
Box-shadow: 0 0 5 px # A9CF54;
}
.Portfolio-area li (
Galleggiante: sinistra;
Margine: 0 12px 20px 0;
Overflow: nascosto;
Larghezza: 245 px;
Imbottitura: 5 px;
}
.Home-portfolio-text (margin-top: 10 px;)
li.attivo A (decorazione del testo: sottolineatura;)

In linea di principio, con gli stili dovrebbero essere tutto chiaro. Affinché le categorie siano in fila in un numero, la proprietà del display si attacca in linea. Per dare un effetto tratto d'immagine, vengono impostati il \u200b\u200bcolore di sfondo (bianco) e il rientro in 10 pixel. Le dimensioni degli elementi dell'elenco sono impostate in Area .PortFolio-Area LI.

jquery.

Bene, infine, la cosa più importante è che l'intera lezione. Questo è un codice jquery. Iniziamo con filtraggio di immagini, per categoria.

// Seleziona tutti gli elementi figlia della zona del portafoglio e scrivono nella variabile
vAR $ Data \u003d $ (". Portfolio-area"). Clone ();

$ ("Portfolio-categ li"). Clic (funzione (E) (
$ (". Filtro li"). Rimoveclass ("attivo");

VAR FILTRECLASSS \u003d $ (questo) .ATTR ("CLASS"). SPLIT ("") .slice (-1);

If (FilterClass \u003d\u003d "tutto") (
VAR $ FIREDEDDATA \u003d $ DATA.FIND ("Portfolio-Item2");
) ALTRO (
VAR $ FIREDEDDATA \u003d $ DATA.FIND ("Portfolio-Item2");
}
$ ("Portfolio-area"). QuickSand ($ FILTREDDATA, (
Durata: 600,
Adjustyight: "Auto"
), FUNZIONE () (

Lightboxphoto ();
});
$ (questo) .ADDCLASS ("ACTIVE");
Restituire false;
});

US Il metodo del metodo del clone () e del selettore, seleziona tutti gli elementi figlio da .PortFolio-Area e scrivili nella variabile $ dati. Successivamente, traccia il clic su una delle categorie, l'elemento LI dall'elenco con la classe Classe .PortFolio-categ. Facciamo tutte le categorie non attive, eliminando il rimoveCLASS ("ACTIVE"), se questo non lo fa, nel tempo, tutte le categorie saranno attive e filtrando per interrompere.

Dato che faremo clic sull'elemento dell'elenco, quindi nel selettore questo selettore contiene un elemento dell'elenco LI, prende solo il valore dell'attributo di classe e utilizzando il metodo diviso, dividiamo il nome della classe in più parti, il Border è uno spazio (cioè, se la classe era "tutto attivo» dopo aver rotto, otteniamo un array da "tutti" e "attivi"). E ancora ulteriormente dal metodo della fetta, selezionare il primo elemento dell'array (nel nostro caso "tutto") e scrivi il risultato risultante nella variabile FilterClass. Se il gap non era il nome della classe non per cambiare.

Quindi, verificare se nella stringa di filtro variabile tutti., Selezionico tutti gli elementi con la classe Portfolio-Item2 dal massiccio di $ Data, che abbiamo considerato sopra. Elementi selezionati (e questi sono tutti gli elementi di elenco, cioè tutte le immagini) inserite nella variabile FILTEREDDATA.

Altrimenti, se il filterclass non è uguale tutti., Nella variabile FiltreData, non tutte le voci dell'elenco, ma solo quelle il cui attributo di tipo dati coincide con la classe di categoria. In breve, gli elementi di una sola categoria.

E in definitiva la variabile ricevuta trasmetta alla biblioteca jQuery Quicksand.che rende le immagini filtranti. Tutto riguarda il filtraggio.

Ora, come per aumentare l'immagine nella finestra pop-up. Tutto è molto più facile qui.

JQuery ("A"). Prettyphoto ((
AnimationsPeed: "Veloce",
Slideshow: 5000,
Tema: "Facebook",
Show_title: falso,
Overlay_Gallery: falso.
});

Il clic è monitorato per riferimento, che attributo rel. Inizia con la prettyhoto. Dopo di che la biblioteca sta entrando bella fotoE l'immagine è aumenti meravigliosi. A proposito, trasmettiamo anche diversi parametri. Ad esempio la velocità dell'animazione - veloce, ritardo nella presentazione - 5 secondi, l'argomento di Facebook (solo 5 argomenti che si trovano nella cartella Immagini / prettyphoto) e proibiscono anche la visualizzazione del nome dell'immagine e dell'aumento l'immagine quando si passa il mouse.

A lungo scelto l'argomento per l'argomento di oggi. Di conseguenza, ho notato che non abbiamo ancora fatto una selezione con galleria di immagini. Nel mio eccellente argomento, da allora gallerie Presente in molti siti. Francamente, tutti loro non sono molto attraenti. Date le attuali tendenze di sviluppo jquery, html5. Ecc. Ho pensato, perché deve esserci una soluzione molto più attraente rispetto a quelle che mi hanno incontrato prima. Così. Dopo aver trascorso il giorno, era possibile trovare un numero enorme di script. Da tutta questa montagna, ho deciso di portarmi via solo, perché amo come hai già notato sui post precedenti.
Galleria di immagini Applicabile non solo nel caso con album fotografici.. È possibile utilizzare lo script, penso che sia corretto, come portfolio per fotografi, designer eccetera. Effetti jquery. Aiuteranno ad attirare l'attenzione dei visitatori e semplicemente dare eleganza al tuo sito.
Così. Alla tua attenzione una collezione gallerie di immagini JQuery Plugins per il sito.
Non dimenticare di commentare e ricordare, per non perdere questa selezione, puoi aggiungerlo ai tuoi preferiti cliccando su un asterisco nella parte inferiore dell'articolo.

Photobox.

Galleria di immagini gratis, facile, adattivaIn quali effetti tutti gli effetti, le transizioni sono fatte da CSS3. Ideale per creare un sito-Troyolio di un fotografo.

S gallery.

Attraente JQuery Plugin Gallery Immagini. L'animazione funziona con CSS3.

Diamonds.js.

Originale plugin per creare una galleria di immagini. Le miniature sono forma romba., cosa dentro questo momento Molto popolare. Questo modulo è fatto usando CSS3. L'unico minus di questa galleria è l'assenza della Likebox, in cui la foto sarebbe aperta a grandezza naturale. Cioè, sarà necessario per i tumori per fissare il plugin Lightbox. Questo script genera un messetto adattivo di immagini a rombo.

Superbox.

Galleria moderna di immagini usando JQuery, CSS3 e HTML5. Siamo tutti abituati che quando si fa clic sull'anteprima, l'immagine completa si apre nella Likebox (finestra pop-up). Gli sviluppatori di questo plugin hanno deciso che la Likebox era già parlato. Immagini in questa galleria aperta sotto l'anteprima. Guarda la demo e assicurati che una soluzione così simile sia molto moderna.
|

Galleria di dissolvenza diagonale liscia

Galleria moderna delle immagini in cui le anteprime sono distribuite sullo spazio dello schermo. Lo script può eseguire la scansione della cartella con la foto sul server, cioè non è necessario inserire separatamente ciascuna immagine. Basta caricare le immagini nella cartella sul server e specificare il percorso della directory nelle impostazioni. Successivamente, la sceneggiatura farà tutto te stesso.

Gamiglia Gamba.

Galleria elegante, facile e adattiva di immagini con una griglia nello stile di Pinterest, che è diventato molto popolare. La sceneggiatura funziona alla grande su computer fissi e su dispositivi mobili Con qualsiasi risoluzione dello schermo. Una soluzione eccellente per la creazione di un portafoglio di web designer.

Griglia anteprima con anteprima in espansione

Il plugin è griglia adattativa delle immagini. Quando si fa clic qui sotto, la foto viene lanciata di più e descrizione. Ben adatto per creare un portafoglio.

jgallery.

jgallery is. galleria di immagini Adaptive a schermo intero. Effetti, transizioni e persino stile sono facilmente regolabili.

Glisse.js.

Immagini semplici, ma molto spettacolari della galleria plugin. Questa è esattamente la soluzione quando è necessario creare un album fotografico. Il plugin supporta gli album e ha un effetto molto bello della svolta.

Flusso di mosaico.

Semplice, adattivo galleria di immagini con una griglia nello stile di Pinterest.

Galereya.

Un'altra elegante galleria con una griglia in uno stile Pinterest con un filtro per categoria. Lavori in browser: Chrome, Safari, Firefox, Opera, IE7 +, Browser Android., Chrome Mobile, Firefox Mobile.

minimo.js.

Eccellente galleria gratuita di immagini Usando JQuery, 5 e CSS3. Ha un aspetto molto attraente e, indubbiamente, attirerà l'attenzione dei tuoi visitatori.

fliplightbox.

Una semplice galleria di immagini. Quando si fa clic sull'anteprima, un'immagine completa si apre nella Likebox.

galleria di Blueimp.

Galleria flessibile. Capace di visualizzare nella finestra Modal non solo le immagini, ma anche video. Lavora perfettamente su dispositivi sensoriali. È facilmente personalizzato e c'è la possibilità di espandere il funzionario utilizzando plug-in aggiuntivi (vedere il seguente plugin).

Molte volte hanno recensioni su varie gallerie di immagini, ha raccolto una vasta collezione di presentazioni spettacolari e -Plagins. Ci sono nel salvadanaio e nel Lighbox esclusivamente su CSS3, senza collegare ulteriori librerie JS. Ma il tempo non sta fermo, gli utenti stanno sempre più utilizzando vari dispositivi mobili per il surfing su Internet, il che significa che l'adattabilità degli elementi Web e in particolare le gallerie fotografiche con l'effetto "" diventa una delle priorità a cui i web designer e gli sviluppatori dovrebbero prestare attenzione .

Presento un'altra selezione di 15 plug-in jquery adattivi, che sono amici, come con i browser desktop e si adattano perfettamente agli schermi di vari dispositivi mobili (laptop, smartphone, tablet, ecc.).

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

1. Ilightbox.

ilighbox. - Questo è un jquery lightbox-plugin con un supporto di vasta gamma tipi diversi File: immagini, video, flash / swf, ajax, cornici e carte integrate. Questo plugin aggiunge anche pulsanti. social networksConsentire agli utenti di condividere contenuti tramite Facebook, Twitter o Reddit. Eccellente caratteristica dell'organizzazione di presentazioni spettacolari, gallerie di immagini e clip video, con la visualizzazione nelle normali modalità / modalità a schermo intero.

ilighbox. Funziona abbastanza rapidamente e durante la visualizzazione sui dispositivi mobili, più che visualizza correttamente il contenuto elaborato. Tra le altre cose, utilizzando questo plugin, è possibile implementare facilmente l'output dei blocchi di informazioni per tipo di finestra modale.

Dipendenza: jQuery.
Supporta i browser: IE7 +, cromo, firefox, safari e opera
Licenza: E l'inferno lo sa))))

2. SwipipeBox.

Swipipebox. - Questo è un plugin jquery con supporto touch Screens. Piattaforme mobili. Oltre alle immagini, il plugin supporta un video incorporato da YouTube e Vimeo. Swipebox è molto facile per fissare qualsiasi progetto, il plugin ha diverse opzioni intuitive per la configurazione della sua funzionalità e del comportamento. Sul sito Web dello sviluppatore, una documentazione dettagliata per il collegamento e l'utilizzo del plugin, senza acqua in eccesso, tutto è solo nel caso, quindi non è difficile capire dove, e perché, penso che non sarà difficile.

Dipendenza: jQuery.
Supporta i browser: IE9 +, cromato, safari, firefox, opera, iOS4 +, Android e Windows Phone
Licenza: Non ho definito, forse sarai fortunato)))

3. MagnificPopup.

Per un lungo periodo, ben noto e ben collaudato, plug-in su jquery o Zepto.js. L'autore del plugin - Dmitry Semenov, che è uno sviluppatore e plugin Photoswipe, che racconterà appena sotto. Arriva sotto forma di un plugin jQuery / Zepo, ha più opportunità assenti in Photoswipe, come supporto video, mappatura e contenuto Ajax, implementazione di finestre modale con moduli integrati. Per tutti i criteri, questo è un altro strumento meraviglioso nello sviluppatore web. Separatamente c'è un plugin per WordPress e la documentazione dettagliata per la configurazione e l'uso. Delude solo la mancanza di documentazione in russo, a giudicare dal nome e dal cognome, l'autore sembra essere il russo, mai compreso a causa della dancità, o a causa della consapevolezza immaginaria della sua sensazione e del blah. Bene, ok, a chi deve essere sacrificato, anche noi non affondiamo anche il tè))).

Dipendenza: jQuery 1.9.1+ o Zepto.js
Supporta i browser: IE7 (parzialmente), IE8 +, cromo, firefox, safari e opera
Licenza: MIT LICENY.

4. Photoswipe.

Dipendenza: JavaScript o JQuery
Supporta i browser
Licenza: MIT LICENY.

11. Featherlight.

6 K.Bit Lightbox-Plugin, per sviluppatori più o meno esperti, dotati di più caratteristiche correlate. Oltre a supportare tutti i tipi di contenuto comuni (testo, immagini, IFRAME, AJAX), c'è una connessione opzionale opzionale, nonché è possibile sviluppare la propria estensione per questo plug-in, che soddisferà pienamente le tue esigenze durante la creazione di un nuovo progetto . Come tutte questa economia (sviluppo di espansione) funziona, non è stato particolarmente deliberato, ma quelli che inseriranno questo plugin, penso che capirà)))).

Dipendenza: jQuery.
Supporta i browser: IE8 +, Chrome, Firefox, Safari e Opera
Licenza: MIT LICENY.

12. LightGallery.

LightGallery. - Plugin-Multifunzionale con multiple caratteristiche aggiuntive. Viene fornito con più di 20 opzioni, per configurare i dettagli della lightbox più piccoli. C'è tutto, bene, o quasi tutto)). Una galleria di immagini a pieno titolo con miniature ordinatamente costruite, con elementi di navigazione e uno scorrimento in miniatura. Semplice markup HTML sotto forma di un elenco non ordinato

Aspetto

usando CSS.

LightGallery.

Dipendenza: jQuery.
Supporta i browser: IE7 +, cromo, firefox, safari, opera, ios, Android e Windows Phone
Licenza: MIT LICENY.

13. Stripjs.

Insolito, direi nemmeno: un'implementazione insolita della lightbox, più precisamente, non proprio la solita presentazione dei contenuti, quando un'immagine o un video, nel design della Likebox, appaiono a destra, compilando l'intero schermo, ma solo su la dimensione specificata di un'immagine o un video a grandezza naturale. Sul grandi schermi Questo approccio è chiaro, la possibilità di interazione con la pagina rimane. Sui piccoli schermi di dispositivi mobili, tutto questo design innovativo, va agevolmente in lightbox classica. L'idea è interessante, guarda la demo, forse qualcuno inserirà un tale creativo.

Dipendenza: jQuery.
Supporta i browser: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ e Android 3+
Licenza: Creative Commons By-NC-ND 3.0 License

14. LightLlayer.

Un plug-in lightbox facile da usare che è ben combinato con qualsiasi progetto e sembra buono su qualsiasi schermata. Il plugin LightLlayer presenta il controllo sul set di impostazioni, come la modifica del colore dello sfondo e il grado della sua trasparenza, la posizione dell'unità di base, la selezione degli effetti di transizione durante l'apertura / chiusura, le funzioni che gli utenti possono manipolare in modo indipendente. Il plugin funziona alla grande con il contenuto di siti Web esterni, lettori video integrati e carte.

Dipendenza: jQuery.
Supporta i browser: IE9 +, Chrome, Firefox, Safari e Opera
Licenza: MIT LICENY.

15. FLUIDBOX.

Fluidbox - Likebox Plugin esclusivamente per le immagini. Il numero di tutti i tipi di varianti della rappresentazione dell'immagine è veramente impressionante. Il plugin funziona alla grande con immagini in vari progetti, comprese le immagini flottanti, un'immagine con posizionamento assoluto, immagini e foto incorniciata dal telaio e aventi tratti, con immagini singole e combinate nella galleria. In generale, in una vana acqua da versare, per dipingere tutte le capacità del plugin in una breve visione non funzionerà comunque, quindi è meglio guardare la demo, twist, girare e pensare che questo plugin piacerà molti.

Dipendenza: jQuery.
Supporta i browser: IE9 +, Chrome, Firefox, Safari, Opera
Licenza: MIT LICENY.

Questo è probabilmente tutto! Spero che questa piccola recensione ti aiuterà a capire la pila dei prodotti proposti di sviluppo web. Voglio notare che non tutti i plugin presentati nella selezione dei plugin che ho usato sui progetti di lavoro, la maggior parte di essi si è rivelata sui siti di prova o su LaChak, quindi se sorgono domande, molto probabilmente li risolverà insieme, e insieme, Come sempre tutto funzionerà con noi.

Stai cercando un adatto modello russificato per i tuoi obiettivi? Probabilmente, in questo caso, dovresti visitare le markeple TemplateMonster. Per la semplice ragione che recentemente una nuova sezione modello è apparsa sul sito. Ora ogni utente può familiarizzare con la raccolta che aggiornerà e aggiornerà. I testi per i modelli sono stati scritti manualmente. Ma questo non è l'unico vantaggio dei dati soluzioni pronte. Dopotutto, nei loro pacchetti puoi trovare tutto ciò che faciliterà il lavoro sullo sviluppo del progetto online, incluso l'editor visivo.

Con tutto rispetto, Andrew

1. Galleria jquery con effetto Pagina Pagina

Questa soluzione può essere utilizzata per portare gli ultimi articoli nel blog o per la presentazione delle merci.

Un modo unico per visualizzare le tue foto come jQuery di una galleria insolita.

3. Galleria jquery di immagini per la merce, plugin "slidejs"

jQuery Plugin è perfetto per l'implementazione della pagina del prodotto con più immagini. La transizione tra le immagini può essere eseguita con una miniatura o utilizzando le frecce di navigazione.

L'immagine aumenta quando si passa il cursore del mouse.

5. Elegante Galleria Lightbox "PPGallery"

6. JQuery Touch-Gallery Mini Gallery

7. Nuova Galleria JQuery con miniature

Galleria professionale JQuery 2011.

8. JQuery Plug "NIVO ZOOM"

Un altro plugin jQuery di alta qualità dagli sviluppatori del cursore Nivo. Aumentare l'immagine premendo la miniatura.

9. Galleria jquery "Galleria murale 3D"

Nuova Galleria JQuery 2011. Nastro immagine allungato all'intera larghezza dello schermo. La navigazione tra le foto viene eseguita in tre modi: utilizzando la ruota del mouse, utilizzando un rotolo da sopra la galleria e con un blocco con miniature da sotto. La galleria sembra molto impressionante.

Le immagini nella galleria aumentano e diminuiscono in modo casuale creando l'effetto delle bolle.

11. Display inusuale dell'immagine nella galleria jquery

Usando il cursore dall'alto, è possibile modificare la distanza tra le immagini nella pila. Quando fai clic sull'immagine, gira.

12. Galleria JQuery Plugin "MB.Gallery"

13. Galleria JQuery che si estende a schermo intero

Plugin 2011. Una nuova galleria con una descrizione di immagini, che si estende sull'intera area della finestra del browser indipendentemente dalle sue dimensioni. Miniature implementate interessanti di immagini. La transizione tra le foto viene eseguita utilizzando la freccia della miniatura e utilizzando la ruota del mouse.

14. Easy Jquery Gallery

Il plugin esegue la scansione automatica della cartella e crea copie ridotte di immagini.

16. Galleria elegante con biblioteche JQuery e Raphael

Effetto interessante Quando si aggira il cursore del mouse sulla miniatura.

17. Nuova versione del plugin JQuery "supersibato" versione 3.1

Più di recente, ho già menzionato questa soluzione JQuery per creare gallerie a schermo intero. Oggi voglio immaginare ultima versione Questo plug-in professionista. Lo script è completamente riscritto, ora la galleria funziona ancora più velocemente, e alcune impostazioni interessanti vengono aggiunte, ad esempio, la navigazione utilizzando la tastiera, la velocità variabile di modifica dell'immagine, la dimensione dello schermo e altri.

18. JQuery Plugin "Galleria 1.2.2"

Nuova galleria jquery per i tuoi progetti.

La galleria galleggia sulla pagina facendo clic sul pulsante. Le miniature vengono visualizzate attorno a un'immagine più ampia. È possibile controllare il turno di immagine automatico. Tecnologie usate: JQuery, CSS, PHP.

20. Plugin "Galleria timer"

galleria jquery. È implementato un cambio automatico di diapositive e miniature a scorrimento se ce ne sono troppi.

Immagini della galleria dei plugin su jquery.

22. Galleria JavaScript per la visualizzazione sui dispositivi mobili Photoswipe

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

23. Galleria JavaScript con effetto 3D

24. Galleria "JQuery Morphing Gallery"

Nuovo jQuery Slider.. Diversi effetti animati freschi quando cambiano le diapositive.

25. JQuery Plug "Galleria 1.2.3"

26. Galleria di immagini della parete dell'immagine del jquery

La Galleria originale sotto forma di una miniatura sparse sullo schermo di varie dimensioni stilizzate sotto la foto. Quando fai clic sulla miniatura c'è un'area con una descrizione dell'immagine e quando si preme ripetutamente l'originale quadro generale.

27. Galleria CSS3.

Effetto interessante quando si libra.

28. Galleria con miniature "Galleria TN3"

galleria Jqyery con miniature. Implementato la possibilità di visualizzare in una finestra compatta e nella finestra all'intero schermo, nonché la possibilità di disconnettere / abilitare il turno automatico di diapositive.

29. Grid-Gallery Gallery Grid

La griglia dell'immagine è allungata a seconda della larghezza della finestra del browser. Un effetto interessante quando si libra: la riga attiva e la colonna sono evidenziate.

30. Galleria JQuery "Swap Gallery"

JQuery Light Gallery in alcune righe di codice.

La pagina Demo mostra diverse varianti del menu Mega Drop-Down, in vari disegni di stile. In questo menu, è possibile configurare: l'effetto di cadere, il tasso di Fallout e fare anche una scelta tra la perdita della clique o guidare il mouse all'oggetto.

31. Galleria di immagini JQuery

galleria jquery con firma dell'immagine. Diversi effetti del cambio di scorrimento. La navigazione tra le immagini viene eseguita utilizzando le frecce o premendo la miniatura.

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

33. JQuery Plugin Portfolio del fotografo "Portfolio Image Navigation"

Soluzione JavaScript originale per la progettazione del portfolio del fotografo. La navigazione tra le immagini viene eseguita utilizzando la freccia su / sinistra / destra e con mini-quadrati (imitazione del movimento nello spazio 2D). È possibile raggruppare le foto da diverse foto di sessioni in diverse righe verticali e navigate attraverso di loro utilizzando gli elementi di navigazione. Vedi la dimostrazione.

34. Plugin "jmfullzoom"

Plugin per visualizzare le immagini che si estendono sull'intera dimensione della finestra del browser. È possibile utilizzare per visualizzare il lavoro dal portafoglio.

35. Photo Map.

Galleria integrata S. Google card.. È possibile distribuire sull'intero schermo facendo clic sull'icona nell'angolo in basso a destra. È perfetto per i siti turistici.

36. Galleria di immagini con miniature

galleria jquery con miniature.

37. Galleria jQuery "Galleriffic"

Slideshow con miniature.

38. JQuery CSS3 Plugin "Effetto display onda"

Rappresentazione di immagini e contenuti d'onda sulla pagina. Quando fai clic sulla miniatura, tutte le immagini aumentano e il loro nome appare. Con un'altra pressione, il blocco descrive la descrizione della foto.

Molte opzioni e impostazioni di visualizzazione.

42. Plogger.

43. Una semplice galleria carina fatta su CSS, senza usare script

Sembra bello e funziona bene in tutti i browser moderni.

È possibile controllare la presentazione automatica (Start / Stop), commutazione di diapositive utilizzando le frecce della tastiera, la rottura automatica della pagina delle diapositive, se ce ne sono molti, più gallerie sono supportate su una pagina, le firme per scivoli, supportare l'API e la capacità Per creare gli effetti di transizione della diapositiva

46. \u200b\u200bGalleria sotto forma di una pila di foto

È così che sarà il risultato della Galleria, che creeremo con te. Puoi vedere la demo e se lo desideri, scarica il risultato finale della Galleria.

Ciao a tutti! Oggi parleremo forse la migliore galleria fotografica gratuita, video slider video e foto, parliamo di "Photorama". Nonostante il fatto che lo script non sia già supportato e l'autore è passato a project Soggetti simili Funziona alla grande e continua a deliziare gli occhi.

I principali vantaggi (+)

Semplicità Installazioni, impostazioni e utilizzo. Oltre alle jQuery, avrai bisogno collega solo 2 fileE per l'output della Galleria è necessario specificare solo i collegamenti alle immagini.
Include significativamente velocità Download del sito.
Adattabilità. La tua galleria sembra buona e al telefono, e sul computer portatile e anche sullo schermo del televisore.
Abbondanza di impostazioni e funzioni Collegato separatamente, attraverso gli attributi dei tag HTML.
Supporto per i dispositivi sensoriali.
Supporto video.
Opportunità caricamento pigro immagini.
E un sacco di tutto il resto, che dovrà vedere l'utente sofisticato.

Minuss (-)

Mancanza di supporto per l'utente. La probabilità che il tuo problema sarà considerato o corretto quasi uguale a zero. Sì, è cattivo, ma non fatale.

Prima connessione Opzione Fotorama

Questa opzione è la più facile, ma non la migliore, vale la pena utilizzarlo solo se è necessario visualizzare la galleria sulla maggior parte delle pagine del sito. Inoltre l'opzione è utilizzare CDN.

Controlla la presenza di jQuery.Vai a fonte Sito (scorciatoia da tastiera Ctrl + U) → cercando di trovare approssimativamente tale linea: https://ajax.googleapis.com/ajax/libs/jquery/x.x.x.x.x/jquery.min.js
Utilizzare Ctrl + F per facilitare la ricerca. Se non c'è una linea amata, allora dovrai connettere jQuery. Su WordPress, questo può essere fatto inserendo il codice sottostante, alle funzioni. Funzioni.php. In effetti, questo script è usato nei conflitti. versioni diverse JQuery e opera secondo tale schema: Elimina il jQuery precedentemente registrato, registra uno nuovo, visualizza lo script. Le versioni attuali della biblioteca jquery possono essere trovate qui.
Puoi semplicemente inserire una tale stringa tra e :
<script SRC \u003d. "http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> script \u003e.
Connetti fotorama.css e fotorama.js.Inserire il seguente codice tra i tag e , su WordPress Questo viene fatto nel file di intestazione (header.php). "http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" Rel \u003d "styesheet"\u003e
На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

Второй вариант подключения [шорткод + Autoptimize]

В этом варианте подключения файлы скрипта будут выводиться только на нужных страницах через [шорткод ]. А если вы используете плагин Autoptimize, то код скрипта в придачу интегрироваться в файлы темы. Эти нехитрые манипуляции должны увеличить скорость загрузки сайта.

Проверяем наличие jQuery. Так же как и в первом варианте, смотрите выше.
Скачиваем файлы фоторамы → распаковываем → загружаем в отдельную папку в корне сайта.
Для создания шорткода в файл функций темы (functions.php) вставляем код, расположенный ниже, изменяем ссылки к файлам на свои..js"> ";) add_shortcode (" Foto "," sd ");
Ora quando scrivi un articolo alla fine, inserisci un punto corto

Creare direttamente una galleria

La galleria viene visualizzata dal codice HTML utilizzando Contenitore

C class \u003d "fotorama"Il codice di uscita dell'immagine è posizionato nel contenitore o link all'immagine . Quando si scrive un articolo sul motore WordPress, spegnere l'editor sulla modalità testo e immettere il contenitore

C class \u003d "fotorama".

Sembra questo:

O così (la numerazione dei collegamenti è facoltativa):

1 3 4

ESEMPI DI IMPOSTAZIONI DI FOTORAAMA

Dimensione del contenitore

La dimensione del blocco delle fotografie è la dimensione della prima immagine, altre immagini sono scalabili in proporzione al primo. Per correggere questa situazione, è possibile specificare manualmente le dimensioni.

Ci sono altre impostazioni:

DATA-WIDTH \u003d "98%" // Larghezza relativa Data-Ratio \u003d "800/600" // Aspect Ratio di data-minwidth \u003d "420" // min. Data-maxwidth \u003d "900" larghezza // max. DATA-MINHEIGHT \u003d "320" larghezza // min. Data-Maxheight \u003d "100% // relativo max. Altezza dati-altezza \u003d" 100% // altezza relativa

Miniatures.

DATA-NAV \u003d "Thumbs" risponde per le miniature

Ma questo metodo non è molto efficace, poiché lo script deve scaricare tutte le foto contemporaneamente per la generazione in miniatura, quindi sarà più razionale preparare piccole copie di immagini. Wordpress fa automaticamente le miniature, li useremo. Per ottenere un collegamento in miniatura aggiungere -70x70 al nome del file (https: //sight/wp-conpttent/uploads/2017/11/27ltl9erxk.jpg → https: //syt/wp-content/uploads/2017/11/27ltl9erxk-70x70.jpg).

La miniatura predefinita è 64 × 64. È possibile regolare questo parametro utilizzando il DATA-THUNWWIDTH (LARGHETH) e DATA-Thumbheight (altezza). Se hai bisogno di una miniatura per avere le proprie dimensioni, impostare le impostazioni di larghezza e altezza per il file in miniatura:

Codice HTML + Fotorama

Il Photorara elabora perfettamente HTML e CSS, che espande in modo significativo la funzionalità dello script. Lavorare con riferimenti, blocchi, tabelle, paragrafi, scrivere CSS e molto altro. Di seguito sono riportati alcuni esempi della Galleria. Se la parte visiva non viene visualizzata, quindi premere il pulsante "Risultato".

Mostra / nascondi esempi

Vedi la penna ooppwb di Ivanov Klim (@dreamerklim) su Codepen.

Vedi la penna aveevb di Ivanov Klim (@dreamerklim) su Codepen.

Modalità schermo intero

DATA-AllectionfulLScreen \u003d "TRUE" // nel DATA-AllectionfulLScreen \u003d Finestra del browser "nativo" // Tutti i monitor

C'è un'opportunità per aggiungere una grande immagine separata per modalità schermo intero Attraverso i dati completi:

Altro

DATA-AUTOPLAY \u003d "TRUE" // AUTORUN DATA-AUTOPLAY \u003d "3000" // Intervallo tra vetrini in SM DATA-DEBITÀ \u003d "ONE" // Commenti sui dati Data-tastiera \u003d "Vero" // Frecce di navigazione Data-shuffle \u003d "True" // immagini in un disturbo Data-Navposition \u003d "Top" // miniature in alto DATA-Loop \u003d Scorrimento ciclico "vero" // Proviamo a connettere tutto e aggiungere video

dATA-DEBITÀ \u003d "One" Tastiera dati \u003d "True" Data-Shuffle \u003d "True" Data-Navposition \u003d "Top" Data-AutoPlay \u003d "True" Data-Loop \u003d "True">

"Qualche tipo di commento 1">

"Qualche tipo di commento 2"> Per trovare lavoro che ami

Condividere.

Tweet.

Piace

La campana.