TechBlogSD - Wszystko do WordPressa i tworzenia stron internetowych
Instrukcje WEB i WordPress, nowości, recenzje motywów i wtyczek

Jak dodać widżet filtrowania obrazów w witrynie Weebly?

10

Darmowy widżet filtrowania obrazów dla witryny Weebly pozwala wyświetlać elementy portfolio w układzie trzech kolumn z opcją filtrowania na podstawie predefiniowanej kategorii. Pomaga użytkownikom filtrować odpowiednią kategorię, kliknąć dowolne filtrowane wyniki i przejść do tej konkretnej strony, aby uzyskać więcej informacji. Możesz użyć tego widżetu nie tylko do portfolio, ale także do pozycji menu, produktów i wielu innych przydatnych scenariuszy. Widżet będzie wyglądał jak poniżej, a pliki można pobrać tutaj.

Jak dodać widżet filtrowania obrazów w witrynie Weebly?

Widget zawiera skrypt do filtrowania izotopów wraz z frameworkiem Bootstrap do umieszczania paneli w układzie 3 kolumn. Pobierz i rozpakuj źródłowy plik ZIP na komputer lokalny, plik zawiera następujące elementy:

  • Image Filter.html – ten plik zawiera kod HTML
  • Zasoby – zawiera wszystkie CSS, skrypty i obrazy dla widżetu

Otwórz plik „Imge Filtering.html" w przeglądarce, aby zobaczyć, jak działa widżet. Zasadniczo potrzebujesz obrazu, tytułu i opisu dla każdego panelu wraz z kategorią filtrowania. Wykonaj poniższe czynności, aby dodać widżet filtrowania obrazów do swojego Witryna Weebly.

Krok 1 – przesyłanie obrazów do witryny Weebly

Przygotuj obrazy podobne do rozmiarów obrazu (644 x 420px) w folderze „assets/img” i prześlij wszystkie obrazy wymagane dla widżetu w sekcji „Motyw > Edytuj HTML / CSS > Zasoby”. Zalecamy utworzenie nowego folderu o nazwie „ImageFiltering” i przesłanie wszystkich obrazów z tego folderu. Ścieżka pliku obrazu Weebly będzie wyglądać tak: „ http://youesite.com/files/theme/ImageFiltering/image1.jpg “.

Jak dodać widżet filtrowania obrazów w witrynie Weebly?

Przesyłanie zasobów do Weebly

Krok 2 – Wgranie CSS

W folderze zasobów znajdują się dwa pliki CSS — Bootstrap.css i niestandardowy ImageFilters.css. Prześlij oba pliki CSS do folderu „ImageFiltering” na swojej witrynie Weebly.

Krok 3 – Przesyłanie plików skryptów

Cały widżet jest kontrolowany przez sześć różnych skryptów dostępnych również w folderze asset. Prześlij wszystkie sześć plików skryptów do folderu „ImageFiltering” w witrynie Weebly.

Krok 4 – Dodanie HTML

Teraz, gdy dodałeś wymagane obrazy, CSS i skrypty, przejdź do strony, na której chcesz dodać widżet, przeciągnij element kodu osadzania i kod HTML widżetu.

  • Możesz uzyskać kod HTML, otwierając plik „Image Filter.html” w dowolnym edytorze tekstu, takim jak Notatnik lub TextEdit.
  • Usuń arkusz stylów (kilka pierwszych wierszy) i linki skryptów (kilka ostatnich wierszy) i skopiuj pozostały kod HTML do innego pliku tekstowego.
  • Zastąp adresy URL obrazów własnymi uzyskanymi w kroku 1 i zastąp tytuł/opis własną treścią.

Zdefiniuj wszystkie kategorie i włącz przyciski filtrowania dla tych kategorii. W tym przykładzie użyliśmy 4 kategorii wraz z opcją „Wszystko”, którą można zobaczyć w kodzie HTML, jak poniżej.

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

Te przyciski filtrów można zobaczyć na górze widżetu, jak pokazano poniżej:

Jak dodać widżet filtrowania obrazów w witrynie Weebly?

Przyciski filtrowania w widżecie

Każda pozycja portfolio jest identyfikowana z jedną z powyższych 4 kategorii, aby filtrowanie mogło działać poprawnie. Na przykład poniżej znajduje się pozycja portfolio zidentyfikowana jako kategoria CSS, która zostanie wyświetlona po kliknięciu przycisku filtra „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 -->

Upewnij się, że identyfikujesz wszystkie swoje produkty za pomocą jednej ze zdefiniowanych kategorii z sekcji filtrowania.

Krok 5 – Łączenie skryptów i CSS

Ostatnim krokiem jest połączenie skryptów i plików CSS przesłanych w kroku 2 i 3 ze swoją stroną Weebly. Dodaj poniższy kod w sekcji „Kod stopki”, aby połączyć skrypty:

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

Dodaj poniższy kod w sekcji „Kod nagłówka”, aby połączyć pliki CSS:

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

Opublikuj swoją witrynę, aby zobaczyć działanie widżetu filtrowania obrazów.

Źródło nagrywania: www.webnots.com
Leave A Reply

Ta strona korzysta z plików cookie, aby poprawić Twoje wrażenia. Zakładamy, że nie masz nic przeciwko, ale możesz zrezygnować, jeśli chcesz. Akceptuję Więcej szczegółów