jQuery jCarousel Script

• Saattaa 19, 2024

jQuery on tehnyt kuvien lisäämisen verkkosivustoille helpoksi tehtäväksi. MIT- ja / tai GPL-lisensseillä on julkaistu monia jQuery-skriptejä. Suurin osa näistä on plug-and-play (plug-in) -komentosarjoja, jotka eivät vaadi ohjelmointitietä verkkosivustollasi käyttämistä tai asentamista asiakkaan sivustolle. Voit harkita jQuery-skriptien lisäämistä suunnittelupalveluihisi.

Yksi tällainen Jan Sorgallan kirjoittama jQuery-skripti on jCarousel. Tässä liitännässä voi olla monia sovelluksia sekä grafiikkaan että tekstiin. Skriptin päätehtävä on vierittää sisältöä vaaka- tai pystysuunnassa. Sisältö voi olla staattista tai ladata dynaamisesti Ajaxin, JavaScriptin, PHP: n tai Flickrin kautta. Tämä toinen vaihtoehto vaatii tietysti näiden kielten tuntemuksen. jCarousel toimii myös Thickbox 3: n kanssa, joten iso kokoinen kuva aukeaa Thickboxiin, kun pikkukuvaa napsautetaan karusellissa.

Suurimpaan osaan skriptin koodista viitataan verkkosivun Head-osassa. Tarvitset jQuery-kirjaston ja jCarousel-lähdekoodin sekä tyylitiedostot. Tätä pistoketta on hienoa, että CSS voi "nyljetä" sen, että sillä on monia ulkonäköjä. Komentosarjan vierittämä sisältö sijoitetaan verkkosivun runkoon tavallisessa UL-luettelossa.

Skriptin konfiguroinnissa on useita vaihtoehtoja, mukaan lukien mukautetun animaation lisääminen ja helpottaminen. Se voi toimia automaattisen vierityksen tai navigointipainikkeiden avulla. Toinen mukava ominaisuus on, että karusellin leveys muuttuu automaattisesti sopimaan selainikkunaan. Se voidaan konfiguroida näyttämään enemmän tai vähemmän kuvia selaimen koosta riippuen, tai se voidaan määrittää siten, että siinä on asetettu määrä kuvia, joustavasti kuvien välillä, tarpeen mukaan. Sivulla voi olla useampia kuin yksi karuselli ja antaa jokaiselle niistä erilainen iho.

Integrointi Flickr-valokuvavirran ja Flickr-sovellusliittymän kanssa on hieno ominaisuus, jota ei näy useimmissa komentosarjoissa. Se on testattu toimimaan useissa selaimissa, mukaan lukien pahamaineinen Internet Explorer 6.

Saatat kysyä itseltäsi, miksi käyttäisit tätä yksinkertaisen gif-animaation sijaan, jonka voit luoda Photoshopissa. Tärkein syy on karusellin päivittämisen helppous sen asennuksen jälkeen. UL-luettelon sisällön vaihtaminen on helpompaa kuin uuden gif-kuvan luominen joka kerta, kun sinun on esitettävä erilainen kuvasarja.

//sorgalla.com/projects/jcarousel/

Video-Ohjeita: jQuery Tutorial #6 - Building a jQuery Image Slider (Saattaa 2024).