TechBlogSD - Tutto per WordPress e sviluppo WEB
Istruzioni WEB e WordPress, notizie, recensioni di temi e plugin

Come aggiungere un widget per il filtro delle immagini nel sito Weebly?

1

Il widget di filtraggio delle immagini gratuito per il sito Weebly ti consente di visualizzare gli elementi del portfolio in un layout a tre colonne con opzione di filtro basata sulla categoria predefinita. Aiuta gli utenti a filtrare la categoria pertinente, fare clic su qualsiasi risultato filtrato e andare a quella particolare pagina per maggiori dettagli. Puoi utilizzare questo widget non solo per i portafogli, ma anche per voci di menu, prodotti e in molti altri scenari utili. Il widget apparirà come sotto e puoi scaricare i file qui.

Come aggiungere un widget per il filtro delle immagini nel sito Weebly?

Il widget contiene uno script di filtraggio degli isotopi insieme al framework Bootstrap per posizionare i pannelli in un layout a 3 colonne. Scarica ed estrai il file ZIP di origine sul tuo computer locale, il file contiene i seguenti elementi:

  • Filtro immagine.html: questo file contiene codice HTML
  • Risorse: contiene tutti i CSS, gli script e le immagini per il widget

Apri il file "Imge Filtering.html" nel browser per vedere come funziona il widget. Fondamentalmente hai bisogno di un’immagine, un titolo e una descrizione per ogni pannello insieme a una categoria per il filtraggio. Segui i passaggi seguenti per aggiungere il widget di filtraggio delle immagini al tuo Sito Weebly.

Passaggio 1: caricamento delle immagini sul sito Weebly

Prepara le tue immagini simili alle dimensioni dell’immagine (644 x 420 px) nella cartella "assets/img" e carica tutte le immagini richieste per il widget in "Tema > Modifica HTML / CSS > Risorse". Ti consigliamo di creare una nuova cartella denominata "ImageFiltering" e caricare tutte le immagini in quella cartella. Il percorso del file dell’immagine Weebly sarà del tipo " http://youesite.com/files/theme/ImageFiltering/image1.jpg ".

Come aggiungere un widget per il filtro delle immagini nel sito Weebly?

Caricamento di risorse in Weebly

Passaggio 2 – Caricamento CSS

Ci sono due file CSS nella cartella delle risorse: Bootstrap.css e ImageFiltering.css personalizzato. Carica entrambi i file CSS nella cartella "ImageFiltering" sul tuo sito Weebly.

Passaggio 3 – Caricamento dei file di script

L’intero widget è controllato da sei diversi script disponibili anche nella cartella delle risorse. Carica tutti i sei file di script nella cartella "ImageFiltering" sul tuo sito Weebly.

Passaggio 4: aggiunta di HTML

Ora che hai aggiunto le immagini richieste, CSS e script, vai alla pagina in cui desideri aggiungere il widget, trascina l’elemento del codice di incorporamento e il codice HTML del widget.

  • Puoi ottenere il codice HTML aprendo il file "Image Filter.html" con qualsiasi editor di testo come Blocco note o TextEdit.
  • Elimina il foglio di stile (prime righe) e i collegamenti degli script (ultime righe) e copia l’HTML rimanente in un altro file di testo.
  • Sostituisci gli URL delle immagini con i tuoi ottenuti dal passaggio 1 e sostituisci il titolo/descrizione con i tuoi contenuti.

Definisci tutte le tue categorie e abilita i pulsanti di filtro per quelle categorie. In questo esempio abbiamo utilizzato 4 categorie insieme all’opzione "Tutto" che può essere vista nell’HTML come di seguito.

<!-- Filter Buttons --> <div class="portfolio-filter-container margin-top-20"> <ul class="portfolio-filter"> <li class="portfolio-filter-label label label-primary"> filter by: </li> <li> <a href="#" class="portfolio-selected btn btn-default" data-filter="*">All</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".HTML">HTML</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".CSS">CSS</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".JavaScript">JavaScript</a> </li> <li> <a href="#" class="btn btn-default" data-filter=".PHP">PHP</a> </li> </ul> </div> <!-- End Filter Buttons -->

Questi pulsanti di filtro possono essere visualizzati nella parte superiore del widget come mostrato di seguito:

Come aggiungere un widget per il filtro delle immagini nel sito Weebly?

Pulsanti di filtraggio nel widget

Ogni elemento del portafoglio è identificato con una delle 4 categorie precedenti in modo che il filtro possa funzionare correttamente. Ad esempio, di seguito è riportato l’elemento del portafoglio identificato come categoria CSS che verrà mostrato quando si fa clic sul pulsante del filtro "CSS".

<!-- Portfolio Item --> <div class="col-md-4 portfolio-item margin-bottom-40 CSS"> <div> <a href="#"> <h3 class="margin-top-20">This is a CSS filter</h3> <figure> <img src="assets/img/image1.jpg" alt="image1"> <figcaption> <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span> </figcaption> </figure> </a> </div> </div> <!-- End Portfolio Item -->

Assicurati di identificare tutti i tuoi articoli con una delle categorie definite dalla sezione dei filtri.

Passaggio 5 – Collegamento di script e CSS

Il passaggio finale consiste nel collegare gli script e i file CSS caricati nei passaggi 2 e 3 alla tua pagina Weebly. Aggiungi il codice seguente nella sezione "Codice piè di pagina" per collegare gli script:

<!-- Scripts --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="/files/theme/ImageFiltering/scripts.js"></script> <!-- Isotope - Portfolio Sorting --> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.isotope.js" type="text/javascript"></script> <!-- Animate on Scroll--> <script type="text/javascript" src="/files/theme/ImageFiltering/jquery.visible.js" charset="utf-8"></script> <!-- Modernizr --> <script src="/files/theme/ImageFiltering/modernizr.custom.js" type="text/javascript"></script> <!-- End Scripts -->

Aggiungi il codice seguente nella sezione "Codice intestazione" per collegare i file CSS:

<link rel="stylesheet" href="/files/theme/ImageFiltering/bootstrap.css" rel="stylesheet"> <link rel="stylesheet" href="/files/theme/ImageFiltering/imagefiltering.css" rel="stylesheet">

Pubblica il tuo sito per vedere il widget di filtro delle immagini in azione.

Fonte di registrazione: webnots.com
Lascia una risposta

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More