Hur lägger jag till bildfiltreringswidget på Weebly -webbplatsen?

Gratis bildfiltreringswidget för Weebly -webbplatsen låter dig visa portföljobjekt i en trekolumnerlayout med filtreringsalternativ baserat på den fördefinierade kategorin. Det hjälper användare att filtrera den relevanta kategorin, klicka på eventuella filtrerade resultat och gå till den specifika sidan för mer information. Du kan använda denna widget inte bara för portföljer utan också för menyalternativ, produkter och i många andra användbara scenarier. Widgeten kommer att se ut nedan och du kan ladda ner filerna här.

Widgeten innehåller isotopfiltreringsskript tillsammans med Bootstrap -ramverk för att placera panelerna i tre kolumners layout. Ladda ner och extrahera ZIP -källfilen till din lokala dator, filen innehåller följande objekt:

• Image Filter.html – dessa filer innehåller HTML -kod
• Tillgångar – innehåller alla CSS, skript och bilder för widgeten

Öppna filen "Imge Filtering.html" i webbläsaren för att se hur widgeten fungerar. I grund och botten behöver du en bild, titel och beskrivning för varje panel tillsammans med en kategori för filtrering. Följ stegen nedan för att lägga till bildfiltreringswidgeten till din Weebly -webbplats.

Steg 1 – Ladda upp bilder till Weebly -webbplatsen

Förbered dina bilder som liknar bildstorlekarna (644 x 420px) i mappen "tillgångar / img" och ladda upp alla bilder som krävs för widgeten under "Tema> Redigera HTML / CSS > Tillgångar". Vi rekommenderar att du skapar en ny mapp med namnet "ImageFiltering" och laddar upp alla bilder under den mappen. Filvägen för Weebly -bilden kommer att vara " http://youesite.com/files/theme/ImageFiltering/image1.jpg ".

Ladda upp tillgångar i Weebly

Steg 2 – Ladda upp CSS

Det finns två CSS -filer i tillgångsmappen – Bootstrap.css och den anpassade ImageFiltering.css. Ladda upp båda CSS -filerna under mappen "ImageFiltering" på din Weebly -webbplats.

Steg 3 – Ladda upp skriptfiler

Hela widgeten styrs av sex olika skript som också finns tillgängliga under mappen tillgångar. Ladda upp alla sex skriptfiler under mappen "ImageFiltering" på din Weebly -webbplats.

Steg 4 – Lägga till HTML

Nu när du har lagt till de nödvändiga bilderna, CSS och skript, går du till sidan där du vill lägga till widgeten, drar in det inbäddade kodelementet och HTML -koden för widgeten.

• Du kan få HTML -koden genom att öppna filen "Image Filter.html" med valfri textredigerare som Anteckningar eller TextEdit.
• Ta bort formatmallen (de första raderna) och skriptlänkarna (de sista raderna) och kopiera den återstående HTML -filen till en annan textfil.
• Ersätt bildadresserna med dina egna från steg 1 och ersätt titeln/beskrivningen med ditt eget innehåll.

Definiera alla dina kategorier och aktivera filtreringsknapparna för dessa kategorier. I det här exemplet har vi använt fyra kategorier tillsammans med alternativet "Alla" som kan ses i HTML enligt nedan.

<!-- 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 -->

Dessa filterknappar kan ses ovanpå widgeten enligt nedan:

Filtreringsknappar i widgeten

Varje portföljobjekt identifieras med en av ovanstående 4 kategorier så att filtreringen kan fungera korrekt. Till exempel nedan är portföljobjektet identifierat som CSS -kategori som visas när du klickar på filterknappen "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 -->

Se till att identifiera alla dina objekt med en av de definierade kategorierna från filtreringsavsnittet.

Steg 5 – Länka skript och CSS

Det sista steget är att länka skript och CSS -filer som laddades upp i steg 2 och 3 till din Weebly -sida. Lägg till koden nedan under avsnittet "Sidkod" för att länka skripten:

<!-- 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 -->

Lägg till koden nedan under rubriken "Rubrikkod" för att länka CSS -filerna:

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

Publicera din webbplats för att se bildfiltreringswidgeten i aktion.