jQuery jCarousel Script

• Április 28, 2024

A jQuery könnyű feladattá tette a képek weboldalakhoz történő hozzáadását. Számos jQuery szkript van kiadva az MIT és / vagy GPL licencek alapján. Ezek többsége plug-and-play (plug-in) szkriptek, amelyek nem igényelnek programozási ismereteket az Ön webhelyén történő felhasználáshoz vagy az ügyfél webhelyére történő telepítéshez. Megfontolhatja a jQuery szkriptek hozzáadását a tervezési szolgáltatásokhoz.

Jan Sorgalla egyik ilyen jQuery szkripte a jCarousel. Ez a plug-in számos alkalmazást tartalmazhat mind grafika, mind szöveg számára. A szkript fő funkciója a tartalom vízszintes vagy függőleges görgetése. A tartalom statikus vagy dinamikusan betölthető az Ajax, a JavaScript, a PHP vagy a Flickr segítségével. Ez a második lehetőség természetesen ezen nyelvek ismeretét igényli. A jCarousel a Thickbox 3-mal is működik, így egy nagy méretű kép kinyílik a Thickboxban, amikor a miniatűrre kattintanak a körhintaon.

A szkript legtöbb kódjára a weboldal fejrészében hivatkozunk. Szüksége lesz a jQuery könyvtárra, valamint a jCarousel forráskódjára és stíluslap-fájlaira. Ami bevált ebből a beépülő modulból az, hogy a CSS "lefűzheti" a sok megjelenés. A szkript által görgethető tartalmat a weboldal törzsébe helyezik egy alapvető UL listában.

A szkript konfigurálására több lehetőség is van, beleértve az egyéni animációk hozzáadását és az egyszerűsítést. Automata görgetéssel vagy navigációs gombokkal működhet. Egy másik jó tulajdonság az, hogy a körhinta szélessége automatikusan átméreteződik, hogy illeszkedjen a böngésző ablakához. Konfigurálható úgy, hogy több vagy kevesebb képet jelenítsen meg a böngésző méretétől függően, vagy konfigurálható úgy, hogy meghatározott számú képet tartalmazzon, a képek között rugalmasan elosztva. Egy oldalon egynél több körhinta is lehet, és mindegyiküknek más a bőre.

A Flickr fotófolyammal és a Flickr API-val való integráció egy szép szolgáltatás, amelyet a legtöbb szkript nem lát. Tesztelték, hogy több böngészőben is működjön, beleértve a hírhedt Internet Explorer 6 alkalmazást is.

Lehet, hogy felteszi a kérdést magadtól, hogy miért használná ezt a Photoshopban létrehozható egyszerű gif-animáció helyett. Ennek fő oka a körhinta frissítésének könnyűsége a telepítés után. Könnyebb a tartalom váltása az UL listában, mint egy új gif létrehozása minden alkalommal, amikor különféle képkészletet kell bemutatni.

//sorgalla.com/projects/jcarousel/

Video Utasításokat: jQuery Tutorial #6 - Building a jQuery Image Slider (Április 2024).