TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka lisätä kuvan suodatuswidget Weebly -sivustoon?

1

Weebly -sivuston ilmaisen kuvasuodatuswidgetin avulla voit näyttää portfolion kohteita kolmen sarakkeen asettelussa ja suodatusvaihtoehdon, joka perustuu ennalta määritettyyn luokkaan. Se auttaa käyttäjiä suodattamaan asianmukaisen luokan, napsauttamaan suodatettuja tuloksia ja siirtymään kyseiselle sivulle saadaksesi lisätietoja. Voit käyttää tätä widgettiä portfolioiden lisäksi myös valikkokohteisiin, tuotteisiin ja moniin muihin hyödyllisiin skenaarioihin. Widget näyttää tältä ja voit ladata tiedostot täältä.

Kuinka lisätä kuvan suodatuswidget Weebly -sivustoon?

Widget sisältää isotooppisuodatusskriptin ja Bootstrap -kehyksen paneelien sijoittamiseksi 3 sarakkeeseen. Lataa ja pura lähdekooditiedosto paikalliseen tietokoneeseen, tiedosto sisältää seuraavat kohteet:

  • Image Filter.html – nämä tiedostot sisältävät HTML -koodia
  • Omaisuus – sisältää kaikki widgetin CSS, skriptit ja kuvat

Avaa Imge Filtering.html -tiedosto selaimessa nähdäksesi, kuinka widget toimii. Periaatteessa tarvitset kuvan, otsikon ja kuvauksen jokaiselle paneelille sekä suodatusluokan. Lisää kuvan suodatus -widget sivullesi seuraavasti Weebly -sivusto.

Vaihe 1 – Kuvien lataaminen Weebly -sivustoon

Valmista kuvasi (644 x 420 pikseliä) samankaltaiset kuvat "resources / img" -kansioon ja lataa kaikki widgetille tarvittavat kuvat kohtaan "Teema> Muokkaa HTML / CSS > Resurssit". Suosittelemme, että luot uuden kansion nimeltä “ImageFiltering" ja lataat kaikki kansion alla olevat kuvat. Weebly -kuvan tiedostopolku on " http://youesite.com/files/theme/ImageFiltering/image1.jpg ".

Kuinka lisätä kuvan suodatuswidget Weebly -sivustoon?

Sisältöjen lataaminen Weeblyssä

Vaihe 2 – CSS: n lataaminen

Omaisuuskansiossa on kaksi CSS -tiedostoa – Bootstrap.css ja mukautettu ImageFiltering.css. Lataa molemmat CSS -tiedostot Weebly -sivustosi ImageFiltering -kansioon.

Vaihe 3 – Komentosarjatiedostojen lataaminen

Koko widgetia ohjataan kuudella eri skriptillä, jotka ovat saatavana myös resurssikansion alla. Lataa kaikki kuusi skriptitiedostoa WeFly -sivustosi ImageFiltering -kansioon.

Vaihe 4 – HTML -koodin lisääminen

Nyt kun olet lisännyt vaaditut kuvat, CSS: n ja komentosarjat, siirry sivulle, jolle haluat lisätä widgetin, vedä upotuskoodin elementtiä ja widgetin HTML -koodia.

  • Voit saada HTML -koodin avaamalla “Image Filter.html” -tiedoston millä tahansa tekstieditorilla, kuten Notepadilla tai TextEditillä.
  • Poista tyylitaulukko (ensimmäiset rivit) ja komentosarjojen linkit (viimeiset rivit) ja kopioi jäljellä oleva HTML -tiedosto toiseen tekstitiedostoon.
  • Korvaa kuvan URL -osoitteet omilla, jotka on saatu vaiheessa 1, ja korvaa otsikko/kuvaus omalla sisällölläsi.

Määritä kaikki luokat ja ota suodatuspainikkeet käyttöön näille luokille. Tässä esimerkissä olemme käyttäneet 4 luokkaa yhdessä "Kaikki" -vaihtoehdon kanssa, jotka näkyvät HTML -muodossa alla.

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

Nämä suodatinpainikkeet näkyvät widgetin päällä, kuten alla on esitetty:

Kuinka lisätä kuvan suodatuswidget Weebly -sivustoon?

Widgetin suodatuspainikkeet

Jokainen portfolio -kohde on merkitty johonkin yllä olevista neljästä luokasta, jotta suodatus voi toimia oikein. Alla on esimerkiksi CSS -luokana tunnistettu portfolionimike, joka näkyy, kun "CSS" -suodatinpainiketta napsautetaan.

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

Varmista, että tunnistat kaikki kohteesi jollakin suodatusosion määritetyistä luokista.

Vaihe 5 – Skriptien ja CSS: n linkittäminen

Viimeinen vaihe on linkittää vaiheissa 2 ja 3 ladatut komentosarjat ja CSS -tiedostot Weebly -sivullesi. Lisää alla oleva koodi "Alatunnisteen koodi" -osioon linkittääksesi komentosarjat:

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

Lisää alla oleva koodi Otsikkokoodi -osioon linkittääksesi CSS -tiedostot:

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

Julkaise sivustosi nähdäksesi kuvan suodatuswidgetin toiminnassa.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja