Galleria pop-up Jquery. Galleria di immagini in jQuery. Galleria jQuery "Galleriffic"

Gallerie di immagini e cursori sono alcuni dei formati jQuery più popolari. Grazie a loro, puoi aggiungere la quantità necessaria di contenuti visivi al sito, risparmiando spazio prezioso.

Gallerie e dispositivi di scorrimento rendono la pagina meno caricata, ma consentono comunque di aggiungere tutte le immagini necessarie per trasmettere il messaggio. Saranno particolarmente utili per i negozi online.

Nell'articolo di oggi, abbiamo raccolto le migliori gallerie di immagini e cursori jQuery per te.

Per installarli, è sufficiente aggiungere i plug-in selezionati alla sezione head della pagina HTML insieme alla libreria jQuery e configurarli secondo la documentazione (solo un paio di righe di codice).

Scegli quale di questi elementi si adatterà perfettamente al tuo progetto.

1. Cursore Bootstrap

Bootstrap Slider è un dispositivo di scorrimento delle immagini ottimizzato per dispositivi mobili con scorrimento a sfioramento. Sarà fantastico su qualsiasi schermo e in qualsiasi browser. Puoi caricare immagini, video, testo, miniature e pulsanti nei dispositivi di scorrimento.

2. Dispositivo di scorrimento Anteprima prodotto

Il dispositivo di scorrimento Anteprima prodotto rappresenta il pieno potenziale di jQuery e si integra perfettamente in qualsiasi interfaccia. Sarai anche soddisfatto della qualità e della purezza del codice di questo plugin.

3. Galleria di immagini espandibile

La Galleria immagini espandibile è un fantastico plug-in che si trasforma in una galleria a schermo intero con un solo clic. Può essere utilizzato per la sezione Chi siamo o per visualizzare le informazioni sul prodotto.

4. Fotorama

Fotorama è un plug-in per la galleria reattiva jQuery che funziona sia con browser desktop che mobili. Offre molte opzioni di navigazione: miniature, scorrimento, pulsanti avanti e indietro, presentazioni automatiche e marcatori.

5. Cursore immersivo

Immersive Slider ti consente di creare un'esperienza di presentazione unica simile al cursore di Google TV. È possibile modificare l'immagine di sfondo da sfocare per mantenere la messa a fuoco nella foto principale.

6. Leastjs

Leastjs è un plug-in jQuery reattivo per aiutarti a creare una fantastica galleria. Quando passi con il mouse sopra l'immagine, viene visualizzato il testo, quando fai clic, la finestra si espande a schermo intero.

7. Modello di pannelli scorrevoli

Questo plugin è perfetto per un portfolio. Creerà blocchi di immagini disposti orizzontalmente (verticalmente su non schermi di grandi dimensioni) a cui verrà collegato il contenuto selezionato.

8. Modello di portafoglio di Squeezebox

Il modello di portafoglio di Squeezebox offre effetti di movimento per i portafogli. Quando passi con il mouse sopra l'immagine (o il blocco) principale, vengono visualizzati gli elementi ancorati.

9. Riproduzione casuale delle immagini

Shuffle Images è un fantastico plug-in reattivo che ti consente di creare una galleria di immagini che cambiano al passaggio del mouse.

10. Plugin lightbox jQuery gratuito

Il plugin gratuito jQuery Lightbox consente di mostrare una o più immagini su una pagina. Possono anche essere ingranditi e riportati alle dimensioni originali.

11. PgwSlider - Cursore reattivo per jQuery

PgwSlider è un cursore di immagine minimalista. Il codice jQuery è leggero, quindi la velocità di caricamento di questo plugin ti sorprenderà piacevolmente.

12. Galleria Polaroid sparse

La Polaroids Gallery sparsa è uno straordinario dispositivo di scorrimento realizzato in design piatto... I suoi elementi si muovono in modo irregolare quando si cambia immagine, il che sembra sorprendente.

13. Filtro contenuti rimbalzante

Filtro contenuto rimbalzante - soluzione perfetta per e portafoglio. Questo plugin consente agli utenti di saltare rapidamente da una categoria all'altra.

14. Semplice jQuery Slider

Semplice jQuery Slider è all'altezza del suo nome. Questo plugin combina elementi JavaScript, HTML5 e CSS3. Nella demo, per impostazione predefinita, è disponibile solo il caricamento del testo, ma se si apportano alcune modifiche, è possibile aggiungere anche contenuti visivi.

15. Glide JS

Glide JS - Semplice, veloce e reattivo cursore jQuery... È facile da installare e non occupa molto spazio.

16. Dispositivo di scorrimento a schermo intero con parallasse

Questo fantastico dispositivo di scorrimento jQuery con la possibilità di caricare immagini e testo funzionerà per qualsiasi sito Web. Delizia gli utenti con facilità effetto di parallasse e la lenta apparizione del testo.

Ho recensito varie gallerie di immagini molte volte, ho raccolto una vasta collezione di presentazioni e plugin spettacolari. C'è anche Lighbox nel salvadanaio esclusivamente su CSS3, senza collegare ulteriori librerie js. Ma il tempo non si ferma, gli utenti utilizzano sempre più dispositivi mobili per navigare in Internet, il che significa che l'adattabilità degli elementi web e, in particolare, le gallerie fotografiche con l'effetto "" stanno diventando una delle priorità a cui i web designer e gli sviluppatori dovrebbero prestare attenzione.

Vi presento un'altra selezione di 15 reattivo jQuery plugin che sono amici di entrambi 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 plug-in che ti piace e crea, crea, crea ...

1.iLightbox

iLighbox È un plug-in lightbox jQuery leggero con una vasta gamma di supporto tipi diversi file: immagini, video, Flash / SWF, contenuti Ajax, cornici e mappe incorporate. Questo plugin aggiunge anche pulsanti social networksconsentendo agli utenti di condividere contenuti tramite Facebook, Twitter o Reddit. Grande opportunità per organizzare presentazioni spettacolari, gallerie di immagini e video, con visualizzazione in modalità normale e schermo intero.

iLighbox funziona in modo abbastanza intelligente e se visualizzato su dispositivi mobili, oltre a visualizzare correttamente il contenuto elaborato. Tra le altre cose, usando questo plugin, puoi facilmente implementare la visualizzazione di blocchi di informazioni come una finestra modale.

• Dipendenza: jQuery
• Supporto per il browser: IE7 +, Chrome, Firefox, Safari e Opera
• Licenza: E il diavolo lo sa solo)))

2. SwipeBox

Swipebox È un plugin jQuery con supporto schermi tattili piattaforme mobili. Oltre alle immagini, il plug-in 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. Sul sito web dello sviluppatore, c'è una documentazione dettagliata sulla connessione e l'uso del plug-in, senza acqua non necessaria, tutto è solo il caso, quindi penso che non sarà difficile capire cosa, dove e perché.

• Dipendenza: jQuery
• Supporto per il browser: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android e Windows Phone
• Licenza: Non ho deciso, forse sei fortunato)))

3. MagnificPopup

Un plug-in lightbox noto e collaudato basato su jQuery o Zepto.js. L'autore del plugin è Dmitry Semenov, che è lo sviluppatore del plugin PhotoSwipe, di cui parlerò di seguito. Fornito come plug-in jQuery / Zepto, ha funzionalità più avanzate che mancano a PhotoSwipe, come il supporto video, la visualizzazione di mappe e contenuti Ajax e l'implementazione di modali con moduli incorporati. Secondo tutti i criteri, questo è un altro ottimo strumento nella gabbia dello sviluppatore web. Separatamente, c'è un plugin per WordPress e una documentazione dettagliata sulla configurazione e sull'uso. Deprimendo solo la mancanza di documentazione in russo, a giudicare dal nome e dal cognome, l'autore sembra essere russo, mai compreso a causa della nocività di questo, o della consapevolezza immaginaria della sua intelligenza, ma blah. Bene, va bene, chi ha bisogno di capirlo, anche noi non siamo tè alla coque))).

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

4. PhotoSwipe

• Dipendenza: Javascript o jQuery
• Supporto per il browser
• Licenza: Licenza MIT

11. FeatherLight

Plug-in lightbox da 6 kb per sviluppatori più o meno esperti, dotato di tutto il necessario funzioni essenziali... 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 tutta questa economia (sviluppo dell'estensione), non ho approfondito, ma quelli che questo plugin inserirà, penso che lo capiranno))).

• Dipendenza: jQuery
• Supporto per il browser: IE8 +, Chrome, Firefox, Safari e Opera
• Licenza: Licenza MIT

12. LightGallery

LightGallery - plug-in lightbox multifunzionale con molti ulteriori opportunità... Viene fornito con oltre 20 opzioni per personalizzare i dettagli più piccoli della Lightbox. C'è tutto, beh, o quasi tutto)). Una galleria di immagini completa con miniature ordinate, controlli di navigazione e scorrimento delle miniature. Markup HTML semplice come elenco non ordinato

utilizzando l'attributo data-src per immagini a dimensione intera. È lo stesso con i video di Youtube e Vimeo. Supporta perfettamente tutti i formati video HTML5, MP4, WebM, Ogg ... Miniature animate, layout reattivo con supporto per dispositivi mobili, effetti di diapositive e transizioni fluide dell'apparenza durante il cambio di immagini e altri contenuti. Aspetto facilmente formato e configurato con usando CSS... Precarico delle immagini e ottimizzazione del codice. Navigazione tramite tastiera per desktop e possibilità di utilizzare icone di caratteri aggiuntive. LightGallery - Qui è dove si trova la vera "combinazione", l'importante è non perdersi nell'abbondanza di impostazioni e ampie possibilità di questo plugin.
Per coloro che hanno bisogno di un dispositivo di scorrimento decente, consiglio di prestare attenzione agli stessi sviluppatori.
• Dipendenza: jQuery
• Supporto per il browser: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android e Windows Phone
• Licenza: Licenza MIT



13. StripJS

Insolito, direi anche: un'implementazione insolita di un lightbox, o meglio, una presentazione non abbastanza familiare dei contenuti, quando un'immagine o un video, nel design di un lightbox, appare sulla destra, riempiendo non l'intero schermo, ma solo per una determinata dimensione di un'immagine o video a grandezza naturale. Su schermi di grandi dimensioni, questo approccio è comprensibile, rimane la possibilità di interagire con la pagina. Su piccoli schermi di dispositivi mobili, tutto questo design innovativo passa senza soluzione di continuità alla classica lightbox. L'idea è interessante, guarda la demo, forse qualcuno come questo inserirà.

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



14. LightLayer

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

• Dipendenza: jQuery
• Supporto per il browser: IE9 +, Chrome, Firefox, Safari e Opera
• Licenza: Licenza MIT



15. FluidBox

Fluidbox è un plug-in lightbox esclusivamente per immagini. Il numero di possibili variazioni nella presentazione delle immagini è davvero impressionante. Il plug-in funziona alla grande con immagini di vari design, tra cui immagini fluttuanti, immagini con posizionamento assoluto, immagini e foto incorniciate e rientrate, con immagini singole e combinate in una galleria. In generale, è inutile versare acqua, dipingere tutte le possibilità del plugin in una breve presentazione non funzionerà ancora, quindi è meglio guardare la demo, girare, girare e penso che molti apprezzeranno questo plugin.

• Dipendenza: jQuery
• Supporto per il browser: IE9 +, Chrome, Firefox, Safari, Opera
• Licenza: Licenza MIT



Questo è probabilmente tutto! Spero che questa breve panoramica ti aiuti a comprendere il mucchio di prodotti di sviluppo web offerti. Voglio notare che lontano da tutti i plug-in presentati nella raccolta che ho usato su progetti di lavoro, ho esplorato la maggior parte di essi su siti di test o su una vernice, quindi se sorgono domande, molto probabilmente li risolveremo insieme, ma insieme, come sempre ce la faremo.

Cerchi un modello di lingua russa adatto ai tuoi scopi? In tal caso, dovresti probabilmente visitare il marketplace di TemplateMonster. Per la semplice ragione che recentemente è apparsa sul sito una nuova sezione di modelli. Ora ogni utente può conoscere 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 pronte... Dopotutto, nei loro pacchetti puoi trovare tutto ciò che faciliterà il lavoro sullo sviluppo di un progetto online, incluso un editor visivo.

Con tutto il rispetto, Andrew

Ciao! Oggi parleremo della migliore galleria fotografica, del video e del cursore fotografico gratuiti, parliamo di "cornice per foto". Nonostante il fatto che la sceneggiatura non sia supportata già da 2 anni e l'autore sia passato progetto simile funziona benissimo e continua a deliziare l'occhio.

Vantaggi principali (+)

1. Semplicità installazione, configurazione e utilizzo. Oltre a jQuery, avrai bisogno di collega solo 2 filee per visualizzare la galleria, devi solo specificare i collegamenti alle immagini.
2. Colpisce leggermente velocità caricamento del sito.
3. Adattabilità... La tua galleria ha un bell'aspetto sul tuo telefono, laptop e persino sullo schermo della TV.
4. Un'abbondanza di impostazioni e funzioni, collegato separatamente, tramite gli attributi dei tag HTML.
5. Supporto per dispositivi touch.
6. Supporto video.
7. Possibilità caricamento lento immagini.
8. E molte, molte altre cose che soddisferanno l'utente sofisticato.

Svantaggi (-)

1. Mancanza di supporto utente. La probabilità che il problema venga risolto o risolto è quasi zero. È male, ma non fatale.

La prima opzione per il collegamento di Fotorama

Questa opzione di connessione è la più semplice, ma non la migliore, dovrebbe essere utilizzata solo se è necessario visualizzare la galleria sulla maggior parte delle pagine del sito. Il vantaggio di questa opzione è l'uso di una CDN.

1. Verifica di jQuery.Vai a fonte sito (scorciatoia da tastiera Ctrl + U) → cercando di trovare qualcosa del genere: https://ajax.googleapis.com/ajax/libs/jquery/X.X.X/jquery.min.js

   Usa Ctrl + F per una ricerca più semplice. Se la linea ambita non c'è, allora devi includere jQuery. Su WordPress, questo può essere fatto incollando il codice qui sotto nel file Functions.php del tuo tema. In effetti, questo script viene utilizzato per i conflitti versioni diverse jQuery e agisce secondo il seguente schema: rimuove il jQuery precedentemente registrato, ne registra uno nuovo, visualizza lo script. Le versioni correnti della libreria jQuery sono disponibili qui.

   Puoi semplicemente inserire una linea come questa tra e :

   <script src \u003d "Http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> script\u003e
2. Includiamo fotorama.css e fotorama.js.Incolla il seguente codice tra i tag e , su WordPress questo viene fatto nel file di intestazione del tema (header.php). "Http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel \u003d "foglio di stile"\u003e
3. На этом подключение галереи первым способом окончено. Как использовать написано в разделе "Непосредственно создание галереи".

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

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

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

Crea una galleria direttamente

La galleria viene visualizzata con codice HTML tramite contenitore

c class \u003d "fotorama", il contenitore contiene il codice di output dell'immagine o link all'immagine ... Quando scrivi un articolo in WordPress, imposta l'editor in modalità testo e inserisci il contenitore
c class \u003d "fotorama".
Sembra così:

O in questo modo (la numerazione dei collegamenti è facoltativa):
1 3 4
Esempi di impostazioni Fotorama
Dimensioni del contenitore
La dimensione del blocco della cornice digitale è la dimensione della prima immagine, le altre immagini vengono ridimensionate in proporzione alla prima. Per correggere questa situazione, è possibile specificare manualmente le dimensioni.

Ci sono anche altre impostazioni:
Data-width \u003d "98%" // larghezza relativa data-ratio \u003d "800/600" // aspect ratio data-minwidth \u003d "420" // min. larghezza data-maxwidth \u003d "900" // max. larghezza data-minheight \u003d "320" // min. height data-maxheight \u003d "100% // relativa altezza massima data-height \u003d" 100% // altezza relativa
miniature
Data-nav \u003d "thumbs" è responsabile per le anteprime

Ma questo metodo non è molto efficace, poiché lo script deve caricare tutte le foto in una volta per generare miniature, quindi sarebbe più razionale preparare in anticipo piccole copie delle immagini. WordPress esegue il rendering automatico delle anteprime, le useremo. Aggiungi -70x70 al nome del file per ottenere un link alla miniatura (https: //site/wp-content/uploads/2017/11/27ltl9eRXk.jpg → https: //site/wp-content/uploads/2017/11/27ltl9eRXk-70x70.jpg).

Per impostazione predefinita, l'anteprima è 64x64. È possibile regolare questo parametro utilizzando data-thumbwidth (larghezza) e data-thumbheight (altezza). Se è necessario che la miniatura abbia le proprie dimensioni, impostare i parametri di larghezza e altezza per il file di miniature:

Codice HTML + Fotorama
La cornice digitale gestisce perfettamente HTML e CSS, il che espande notevolmente la funzionalità dello script. Lavora con collegamenti, blocchi, tabelle, paragrafi, scrivi CSS e altro. Di seguito sono riportati alcuni esempi di come funziona la galleria. Se la parte visiva non viene visualizzata, fare clic sul pulsante "Risultato".
Mostra / Nascondi esempi
Guarda la penna ooppwb di Ivanov Klim (@DreamerKlim) su CodePen.
Vedi la penna aVEEVb di Ivanov Klim (@DreamerKlim) su CodePen.
Modalità schermo intero
data-allowfullscreen \u003d "true" // nella finestra del browser data-allowfullscreen \u003d "native" // monitor completo
È possibile aggiungere un altro quadro generale per la modalità a schermo intero tramite pieno di dati:

Altro
data-autoplay \u003d "true" // autoplay data-autoplay \u003d "3000" // intervallo tra le diapositive in ms data-caption \u003d "One" // commenti per immagini data-keyboard \u003d "true" // freccia di navigazione data-shuffle \u003d "true" // le immagini sono fuori servizio data-navposition \u003d "top" // miniature in alto data-loop \u003d "true" // scorrimento ciclico Proviamo a connettere tutto e aggiungere un video
data-caption \u003d "One" data-keyboard \u003d "true" data-shuffle \u003d "true" data-navposition \u003d "top" data-autoplay \u003d "true" data-loop \u003d "true"> "qualche commento 1"> "qualche commento 2"> Per trovare lavoro che ami
In questo tutorial ti mostrerò come creare un ambiente minimalista ma confortevole e funzionale galleria fotografica su jQueryo una galleria di immagini, poiché è conveniente per chiunque. La galleria ha la possibilità di creare categorie, seguite da filtri. È anche possibile avviare una presentazione. La galleria funziona in tutti i browser, quindi non ci saranno problemi con l'adattamento.
Per creare questa galleria verranno utilizzate due librerie gratuite JQuery: Quicksande Bella foto... Rendono molto più facile creare una galleria. Come sempre, puoi vedere il risultato del lavoro sulla pagina demo, nonché scaricare l'archivio dalla galleria di lavoro e tutti i file di origine. L'unico inconveniente, se così posso dire, è la creazione manuale di miniature per immagini di grandi dimensioni. Altrimenti, questo galleria degno di attenzione.
FONTI
Markup HTML
Innanzitutto, diamo un'occhiata al pannello con un elenco di categorie, questo è un elenco puntato ul. Inoltre, ogni elemento dell'elenco deve avere un nome di classe univoco.


• categorie:


• Tutti


• Categoria 1


• Categoria 2


• Categoria 3


• Categoria 4











Nome dell'immagine






Come indicato sopra, gli elementi dell'elenco sono immagini nella galleria. Ogni elemento dell'elenco include quelli compositi. 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'attributo id-dati dell'elemento elenco deve essere univoco. L'attributo tipo di dati contiene la classe di categoria, l'elenco di cui ho descritto sopra. Riguarda il markup.
Stili CSS
Non mi concentrerò sugli stili, poiché stiamo usando una libreria già pronta Bella foto, che è responsabile dell'aumento dell'immagine e c'è molto codice css. Tuttavia, vale la pena notare che ci sono 5 opzioni per progettare un'immagine ingrandita, sebbene idealmente solo 3, poiché in due opzioni viene rimosso solo l'arrotondamento.
Pertanto, mostrerò solo gli stili CSS per le anteprime e un elenco di categorie.
Portfolio-categ (margine inferiore: 30px;)
.portfolio-categ li (
display: inline;
margine destro: 10px;
}
.image-block (
blocco di visualizzazione;
posizione: relativa;
}
.image-block img (
bordo: 1px solido # d5d5d5;
bordo-raggio: 4px 4px 4px 4px;
sfondo: #FFFFFF;
imbottitura: 10px;
}
.image-block img: hover (
bordo: 1px solido # A9CF54;
box-shadow: 0 0 5px # A9CF54;
}
.portfolio-area li (
galleggiante: a sinistra;
margine: 0 12px 20px 0;
troppo pieno: nascosto;
larghezza: 245px;
imbottitura: 5px;
}
.home-portfolio-text (margin-top: 10px;)
li.active a (text-decoration: underline;)
In linea di principio, tutto dovrebbe essere chiaro con gli stili. Per allineare le categorie, la proprietà display è impostata su in linea. Per dare l'effetto di un tratto all'immagine, imposta il colore di sfondo (bianco) e un rientro di 10 pixel. Le voci dell'elenco sono dimensionate in .portfolio-area li.
jQuery
E infine, la cosa più importante, quindi per quello che l'intera lezione. Questo è il codice jQuery. Cominciamo filtrando le immagini per categoria.
// Seleziona tutti i figli dell'area del portfolio e scrivi nella variabile
var $ data \u003d $ (". portfolio-area"). clone ();
$ (". portfolio-categ li"). click (funzione (e) (
$ (". filter li"). removeClass ("active");
Var filterClass \u003d $ (this) .attr ("class"). Split ("") .slice (-1);
If (filterClass \u003d\u003d "all") (
var $ filteredData \u003d $ data.find (". portfolio-item2");
) altro (
var $ filteredData \u003d $ data.find (". portfolio-item2");
}
$ (". portfolio-area"). sabbie mobili ($ filteredData, (
durata: 600,
AdjustHeight: "auto"
), funzione () (
LightboxPhoto ();
});
$ (questo) .addClass ("attivo");
restituire false;
});
Usando il metodo clone () e il selettore, selezioniamo tutti i figli dell'area .portfolio e li scriviamo nella variabile $ data. Successivamente, seguiamo il clic su una delle categorie, l'elemento li dell'elenco con la classe .portfolio-categ. Rendiamo inattive tutte le categorie rimuovendo removeClass ("attivo"), se ciò non viene fatto, nel tempo tutte le categorie saranno attive e il filtro verrà interrotto.
Poiché facciamo clic su un elemento dell'elenco, il selettore contiene un elemento dell'elenco, ovvero li, prendiamo il valore dell'attributo class da esso e utilizziamo il metodo split per dividere il nome della classe in più parti, il bordo è uno spazio (ovvero, se la classe era " all active "quindi dopo la divisione otteniamo un array di" all "e" active "). Quindi, usando il metodo slice, selezioniamo il primo elemento dell'array (nel nostro caso, "all") e scriviamo il risultato risultante nella variabile filterClass. Se non c'era spazio, il nome della classe non cambierà.
Quindi, controlliamo se la variabile filterClass contiene la stringa tutti, quindi utilizzando il metodo .find, selezioniamo tutti gli elementi con la classe portfolio-item2 dall'array $ data di cui abbiamo discusso in precedenza. Gli elementi selezionati (e questi sono tutti gli elementi dell'elenco, ovvero tutte le immagini) vengono inseriti nella variabile filteredData.
Altrimenti, se filterClass non è uguale tutti, quindi nella variabile filterData non inseriremo tutti gli elementi dell'elenco, ma solo quelli il cui attributo tipo di dati corrisponde alla classe della categoria. In breve, gli articoli appartengono a una sola categoria.
E alla fine trasferiamo la variabile risultante nella libreria sabbie mobili jquery, che filtra le immagini. Si tratta solo di filtrare.
Ora per l'ingrandimento dell'immagine nel popup. Qui è tutto molto più semplice.
JQuery ("a"). PrettyPhoto ((
animationSpeed: "fast",
presentazione: 5000,
tema: "facebook",
show_title: false,
overlay_gallery: false
});
Un clic viene tracciato su un collegamento il cui attributo rel inizia con prettyPhoto. Quindi entra in gioco la biblioteca bella fotoe l'immagine viene miracolosamente ingrandita. A proposito, passiamo anche ad alcuni parametri. Come la velocità dell'animazione - veloce, ritardo della presentazione di diapositive - 5 secondi, tema di Facebook (ci sono 5 temi in totale nella cartella images / prettyPhoto), oltre a proibire la visualizzazione del nome dell'immagine e l'ingrandimento dell'immagine quando si passa il mouse.
Condividere
Condividere
Tweet
Piace
Piace