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

Ilmainen Nivo Slider -widget Weeblylle

1

Weebly tarjoaa yksinkertaisen diaesityselementin liukusäätimien lisäämiseksi sivustollesi. Monipuolinen diaesitys, jossa on useita siirtymätehosteita, on yksi Weeblyn puuttuvista osista. Pitkäaikainen Weebly tarjosi otsikon diaesityksen Pro -käyttäjille, joka poistettiin myös kaikista reagoivista teemoista. Olemme testanneet erilaisia ​​liukusäätimiä ja havainneet, että suosittu Nivo -liukusäädin, jossa on muutoksia, on paras Weeblyn käyttäjille. Nivo -liukusäädin on yksi verkon tunnetuista liukusäätimistä, joita käytetään oletuksena eri teemoissa. Voit helposti lisätä kauniita siirtymätehosteita jQueryn avulla ja muokata liukusäätimiä tarpeidesi mukaan. Tässä artikkelissa keskustelemme siitä, miten voit lisätä ilmaisen Nivo -liukusäädin -widgetin Weebly -sivustoosi. Liukusäädin voidaan lisätä mihin tahansa Weebly -sivustosi kohtaan, ja yksi liukusäädin on rajoitettu sivua kohden.

Nivo Slider Widget -ominaisuudet

Alla on joitain Weeblyn ilmaisen Nivo -liukusäätimen widgetin kohokohtia:

  • Se voidaan lisätä otsikkoesityksenä tai sisältöalueen sisällä. Tässä artikkelissa keskustelemme sisäpiirisisältöalueen lisäämisestä, jos etsit otsikkoesitystä, tutustu erilliseen artikkeliin otsikon diaesityksen lisäämisestä ilmaiseen Weebly -sivustoon.
  • Nivo -liukusäädintä tarjotaan neljällä eri tyylillä – vaalea, palkki, tumma ja oletus.
  • Voit lisätä 12 erilaista siirtymätehosta – leikkaa alas oikealle, liu’uta alas vasemmalle, leikkaa oikealle, leikkaa vasemmalle, leikkaa alas, leikkaa alas vasemmalle, taita, haalistu, satunnainen laatikko, sadelaatikko, saderasia käänteinen ja sadelaatikko kasvaa käänteinen.
  • Jokaiseen diaan voidaan lisätä erilainen siirtymätehoste.
  • Helppo lisätä tekstitys ja kuvateksti linkillä. Voit myös linkittää liukusäätimen kuvat sivustosi vaaditulle sivulle.
  • Käytä yksinkertaisia ​​säätimiä, kuten navigointipainikkeita edellisiin ja seuraaviin dioihin.

Kuinka lisätä Nivo Slider -widget Weebly -sivustoon?

Demo -liukusäätimessä on neljä kuvaa, ja se käyttää siirtymätehosteita, jotka on määritetty jokaiselle kuvalle erikseen HTML -koodissa. Toista kuvaa (up.jpg) käytetään linkkinä yhdistämään verkkosivulle, jonka alalaidassa on tekstitys. Neljännessä kuvassa (nemo.jpg) on ​​tekstitys HTML -linkillä.

Vaihe 1 – Valmista kuvat

Diaesityksen ensimmäinen vaihe on kuvien valmistelu. Demoissa olemme käyttäneet 4 kuvaa, joiden koko on 618 x 246 px. Suosittelemme käyttämään samaa suhdetta suurempien kuvien kanssa laadun parantamiseksi.

Vaihe 2 – Lataa liukusäätimet

Napsauta alla olevaa painiketta ladataksesi kaikki tarvittavat tiedostot Nivo -liukusäätimelle, tämä sisältää neljä kuvaa, joita käytetään esittelyyn.

Lataa kaikki nivo -liukusäätimet.

Zip -arkistotiedosto sisältää 12 alla olevaa tiedostoa:

Navigointikuvat

  • arrows_bar_default.png
  • arrows_dark_light.png
  • bullets_bar_default.png
  • bullets_dark_light.png
  • loading.gif

Käsikirjoitukset:

  • jquery.nivo.slider.nod.js
  • jquery-1.7.1.min.js

Tyylisivu:

  • teema-tyylit.css

Demokuvat:

  • toystory.jpg
  • ylös.jpg
  • walle.jpg
  • nemo.jpg

Voit poistaa esittelykuvia ja käyttää omia Weebly -sivustollasi.

Vaihe 3 – Lataa liukusäätimet

Kirjaudu Weebly -tiliisi ja muokkaa Nivo -liukusäädintä, jonka haluat lisätä. Siirry kohtaan "Teema> Muokkaa HTML /CSS" ja siirry "Omaisuus" -osaan. Napsauta + -painiketta ja luo uusi kansio.

Ilmainen Nivo Slider -widget Weeblylle

Uuden kansion luominen Weebly Code Editorissa

Tässä esimerkissä luomme kansion nimeltä "nivo" ja lataamme kaikki vaiheessa 2 ladatut tiedostot.

Ilmainen Nivo Slider -widget Weeblylle

Tiedostojen lataaminen Weeblyssä

Vaihe 4 – Koodin lisääminen sivulle

Siirry nyt sivulle, jolle haluat lisätä Nivo -liukusäätimen, ja lisää seuraava koodi käyttämällä "Upota koodi" -elementtiä.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> <div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div> <script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Julkaise sivustosi nähdäksesi kaunis Nivo -liukusäädin.

Vaikka yllä oleva koodi voidaan lisätä käyttämällä Upota koodi -elementtiä, on suositeltavaa lisätä CSS -linkki Sivut> Sivusi> SEO -asetukset> Otsikkokoodi -osioon.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

Ja JavaScript kohdassa "Sivut> Sivusi> SEO -asetukset> Alatunnisteen koodi".

<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

Muista korvata kuvan URL -osoitteet omilla.

Tason liukusäätimen mukauttaminen

Siirtymistehoste kuville

Siirtymävaikutusta ohjataan käyttämällä "data-siirtymä" -parametria jokaiselle kuvalle. Satunnaistehosteita käytetään, kun poistat "data-siirtymä" -parametrin HTML-koodista. Esimerkiksi HTML -koodin alapuolella on satunnainen siirtymävaikutus tummalla teemalla.

<div class="slider-wrapper theme-dark"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Voit käyttää jotakin seuraavista 12 tiedonsiirtoparametriarvosta jokaiselle liukusäätimien kuvalle saadaksesi erilaisia ​​tehosteita:

  • sliceDownRight
  • sliceDownLeft
  • sliceUpRight
  • sliceUpLeft
  • sliceUpDown
  • sliceUpDownLeft
  • taita
  • haalistua
  • laatikkoSatunnainen
  • laatikkoSade
  • boxRainReverse
  • laatikkoRainGrow
  • boxRainGrowReverse

Eri teeman käyttäminen

Liukusäätimen teema määritetään CSS-luokan "teema-NIMI" avulla. Yllä olevassa esimerkissä palkkiteemaa käytettiin teemapalkina. Voit käyttää yhtä neljästä teemasta korvaamalla teeman nimen kuten alla:

<div class="slider-wrapper theme-bar"> – This is for bar theme <div class="slider-wrapper theme-default"> -This is for default theme <div class="slider-wrapper theme-light"> -This is for light theme <div class="slider-wrapper theme-dark"> -This is for dark theme

Tyylien mukauttaminen

Kaikki liukusäätimessä käytetyt tyylit on määritelty "theme-styles.css" -tiedostossa. Siinä on tyylisarjat neljälle teemalle ja liukusäädin. Voit säätää kyseisen tekstityksen leveyttä, kirjasinkokoa ja väriä.

Skriptin mukauttaminen

Tässä liukusäätimessä käytetään pohjimmiltaan kahta skriptiä – yksi on Google jQuery -kirjasto ja toinen on mukautettu Nivo -liukusäätimen skripti, joka jaetaan MIT -lisenssillä. Kaikki liukusäätimen perusmuuttujat määritellään tiedostossa "jquery.nivo.slider.nod.js" alla kohdassa "// Oletusasetukset":

  • vaikutus: ‘satunnainen’ – Oletuksena käytetään satunnaisia ​​siirtymätehosteita
  • viipaleet: 15 – Kuva on leikattu 15 osaan
  • boxCols: 8 – Kuva on jaettu 8 sarakkeeseen
  • boxRows: 4 – Kuva on jaettu 4 riviin
  • animSpeed: 500 – Animaationopeus on oletusarvoisesti 500 ms. Vähennä siirtoa siirtyäksesi nopeammin
  • pauseTime: 3000 – Tauko aika diojen välillä 3000 ms
  • startSlide: 0 – Aloitusdia on ensimmäinen (0) dia
  • directionNav: true – Näytä suunnan navigointipainikkeet (vale piilottaa)
  • controlNav: true – Näytä ohjausnavigointiluettelot (väärin piilottaa)
  • controlNavThumbs: false – Piilota navigoinnin pikkukuvat luettelomerkkien sijaan (totta näyttää)
  • pauseOnHover: true – Keskeytä diaesitys, kun hiiri on kuvan päällä
  • manualAdvance: false – Voit ottaa kuvien manuaalisen siirron käyttöön oletusarvoisesti automaattinen kierto
  • prevText: ‘Edellinen’ – Edellinen kuvateksti
  • nextText: ‘Seuraava’ – Seuraava kuvateksti
  • randomStart: false – Satunnainen käynnistys on poistettu käytöstä

Huomautus: Älä poista tekijänoikeuskommentteja tiedostosta “jquery.nivo.slider.nod.js". Ymmärrämme, että alkuperäinen kehittäjä “Dev7Studios” ei ole enää olemassa ja sivusto ohjaa uudelleen WordPress -laajennukseen. Pidä ilmoitus kuitenkin ehjänä viitteelliseksi. Koska $ -toimintoa ei enää tueta Weeblyssä, olemme korvanneet kaikki $ komentosarjassa jQueryllä.

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