Egy modern portfólió oldal elengedhetetlen része egy szép, esztétikus slideshow, mondjuk a főoldalon, mely korábbi munkáinkat hivatott bemutatni. Nem kötelező, de tény, hogy jól mutat és előszeretettel használjuk is őket.
Legalább 10 olyan jQuery galériát és slideshow-t ismerhetünk meg ebből a cikkből, melyek nem csak szépek, de egyszerűen és ingyenesen felhasználhatóak is.
Cikkünk a hirdetés után folytatódik!
Először is vegyük szemügyre a slideshow-kat. Léteznek animált, navigációval ellátott, lapozgatós változatok, valamint Adobe Flash-el készültek is. De ebben a cikkben csak a javascriptes változatokat fogjuk bemutatni. Nem mintha utálnám a Flash-t de jobban szeretem minimálisra csökkenteni a Flash tartalmakat egy weboldalon.
Slideshow pluginek
GalleryView jQuery Plugin
A GalleryView egy komplex slideshow plugin, melynek rengeteg beállítási lehetősége van. Nagyon könnyen testre szabható és megbízható a működése is. A hivatalos jQuery oldalról tölthetjük le és ugyanitt találjuk a használatához szükséges támogatást is.
GalleryView
Create Beautiful jQuery sliders tutorial
Ez a gyönyörű slider biztosan tetszeni fog mindenkinek. A képen kívül mutatja a nevet, leírást és még sorszámozás is található benne. Valamint, viszonylag egyszerűen integrálható saját weboldalunkba.
jQuery sliders
Create a Slick and Accessible Slideshow Using jQuery
Egyszerű és gyors slideshow. Képet és html tartalmat jelenít meg és egy egyszerű oldalazó animációval is rendelkezik.
Slick jQuery slideshow
AnythingSlider jQuery Plugin
Egy régi kedvencem, sokat használtam anno de még most is megállja a helyét. Rendelkezik sorszámozással lapozási lehetőséggel és ki/be kapcsolható az automatikus animáció. Kép és html tartalom is elhelyezhető benne egyaránt.
AnythingSlider
Create Featured Content Slider Using jQuery UI
Legfrissebb cikkek megjelenítésére tökéletes a következő plugin, mely cikkcímet és leed-et is megjelenít, valamint képet és leírást is. Ráadásul egy kis animációval is meg van bolondítva.
Featured Content Slider
Easy Slider 1.5
Könnyen paraméterezhető elegáns slider sok beállítási lehetőséggel. Kép és html tartalom is használható.
Easy Slider jQuery Plugin
Jquery Plugin MopSlider 2.5
Az alsó részen található kis csúszkával tdjuk jobbra balra mozgatni a tartalmat. Képeket, flash-t és szöveget is megjeleníthetünk, autómata vagy kézi vezérléssel.
MopSlider 2.5
jCarousel
A jCarousel egy újabb slider, mind vízszintes, mind függőleges lapozásra alkalmas. Az animáció ki/be kapcsolható és a képeken kívül html tartalommal is feltölthető.
jCarousel
Galleria
A Galleria egy javascript képgaléria, mely egy rendezetlen listából készül. Alul a thumbnail-eket, fölül pedig az aktuális képet tölti be. Egyszerű csak szép.
Galleria
Full Screen Image Gallery Using jQuery and Flickr
Egy teljes képernyős galéria a következő áldozat, melynek az az érdekessége, hogy flickr-el is használható. Remek megoldás nagyfelbontású képek közzétételére.
Full screen image gallery using flickr
YoxView
Frissítve: 2010.02.21, 19:20
Ezt a slideshow-t ma láttam meg az RSS olvasómban és gondoltam nem késő még hozzácsapni a cikkhez, hiszen egy szép és elegáns darab. Egy érdekes ablakméretező animációval váltja a képeket, van automatikus képváltása, valamint megjeleníti a nevet és jobb bal navigációt is tartalmaz.
YoxView
Kapcsolódó cikkek
Összegyűjtöttem még pár hasonló gyűjteményt, melyekben még több jQuery slideshow és galéria plugint ismerhettek meg. Jó szórakozást hozzájuk.
- 30 Scripts For Galleries, Slideshows and Lightboxes
- 25+ Excellent Free Slideshow Solutions to Enhance Your Portfolio
- 14 jQuery Plugins for Enhanced Content Viewing
- 35 Useful jQuery Plugins for Slideshows, Graphs and Text Effects
- The Best jQuery Lightbox Scripts
Elég sok megoldás megtalálható ezen linkek közt, de felhívnám a figyelmeteket, hogy nem mindig a csicsás és jól kinéző darabok a legkönnyebben használhatóak, sok esetben a puritán, kevés stílussal rendelkező slideshow-k, galériák sokkal könnyebben beépíthetők a saját weboldalunkba. Ez köszönhető annak, hogy ezeket a kezdetektől mi formázzuk, így nem lehet átfedés a stílusok közt.
Valamint azt is megjegyezném, hogy több javascript alkalmazása esetén érdemes a fájlokat összevonni, egy .js fájlba, a kevesebb http lekérés miatt.
Zárszó
Örülök, hogy elkészítettem ezt a cikket, mert számomra sok újdonságot nyújt. Több megoldást most, a keresgélés közben sikerült ellesnem, felfedeznem. Remélem ti is sokat használni fogtok közülük.
chris
10.02.24
22:11
Nekem a 3. jön be, bár lehet csak a körítés miatt. Amúgy én is a javascript – html – css kombót tartom a legjobb megoldásnak ezekre a slideshowkra. A flash macerásabb és szerintem nehezebb összehozni pl. wordpressel.
Jó kis gyűjtemény, köszi.
codee47
10.02.25
07:02
Teljesen igazad van, úgy érzem a javascript sokkal nagyobb babérokra tör mint a flash. De ezt majd még meglátjuk.
Köszönöm.
Vadpocok
10.03.11
01:03
Kedves Codee47!
Engedd meg, hogy megjegyezzek egy két dolgot.
Gyakorlatilag nem lehet eldönteni melyik tör mekkora babérokra, mert két külön dologról van szó, csak épp van átfedés ezt a feladatot illetően.
A javascript egy script nyelv, a flash pedig egy keretrendszer amelynek a script nyelve az action script.
A javascript a böngészőben fut, és a böngésző motorja forditja le, ahogy a html-t is az rendereli.
A flash az egy virtuális gépben fut, ezért szükséges a plugin, hogy meg tudd jeleniteni html oldalakban.
A flash (és főleg a flex és RIA-k) sokkal többre hivatott mint képek cserélgetése / átúsztatása, megjegyztem ezen a területen is tud olyan megoldást, szerkezetéből adódóan, amit egyszerűen a JS képtelen. Pl. effektezés / képmanipuláció / szeletelés stb…
Persze a JS -nek is megvan a maga sok sok területe ahol alkalmasabb mint a flash.
Mindig a célhoz eszközt, s nem forditva :) Sima slideshow-hoz nyert a JS.
Másik megjegyzésem, hogy a szavazás opciói irrelevánsak… Valami olyasminak lenne értelme, hogy Javascript (mert, hogy oda tartoznak a különböző JS-t kiegészítő frameworkok, mint pl Mootools, JQuery, és sok más…) vagy Flash vagy Silverlight.
A Silverlight is egy Flash-hez (és Flex-hez) hasonló megoldás, csak Microsoft-os megközelítésben, szintén egy virtuális gépben, szintén pluginnal, de szintén inkább webes alkalmazásokra koncentrál nem slideshow-ra. Ennek ellenére lehetséges benne ilyet csinálni.
CSS-ben aktiv tartalmat nem tudsz csinálni, igy az oda nem passzol, épp úgy mint az Adobe AIR sem, ami pedig egy olyan eszköz amivel webes tartalmat tudsz asztali alkalmazásként kezelni, tehát teljesen irreleváns számunkra slideshow szempontból.
Minden jót! :)
codee47
10.03.11
11:51
Szia!
Teljesen igazad van és én is tisztában vagyok ezekkel a dolgokkal. Jelen helyzetben kizárólag ezekre az alkalmazásokra (slideshowkra) céloztam a babérokkal. Természetesen tisztában vagyok azzal, hogy nem lehet teljes egészében összehasonlítani a két dolgot, de én úgy érzem hogy a weben egyenlőre nem váltotta be a hozzá fűzött reményeket a flash és sokan inkább más megoldások után próbálnak nézni. Persze szép és csilivili oldalak készülnek flashben amitől nekem is leesik az állam, de csak elvétve, mivel megvannak a hátrányai.
A szavazásban is igazad van (css-t kivettem) de gondoltam legyenek ott ezek is hátha valaki használja őket.
szabolcs
10.04.16
10:37
Teljesen jó a cikk, szépen összeszedi az egyszerű de mégis mutatós lehetőségeket.
Flash: amikor megjelent az 5ös verzió, valamikor 2002 környékén akkor ástam bele magam, komplett weboldalakt csináltunk benne (főként azért flash lett, mivel a megrendelőnek olyan kérései voltak amit mással nem tudtunk volna megcsinálni), végül a szakdolgozatomat is a flash-ről írtam.
Viszont a flashnek rettentő sok hátránya van amivel közben találkozik az ember. Az utóbbi időben már nem követem a fejlesztését, gyakorlatilag csak banner készítésre használom.
Komplett weboldalt flashben csinálni szerintem öngyilkosság, sem a google nem találja meg, ha nincs plugin nem jelenik meg, macerás adatbázist használni és adatot megjeleníteni vele stb.
Szalai Gergő mégegyszer köszönöm a cikket, nekem nagyon hasznos volt!
codee47
10.04.17
14:35
Nagyon szívesen, és köszönöm a kimerítő hozzászólást.
Azt viszont ne feledjük, hogy olyan szép dolgokat mint amiket flash-ben készítenek, mással nem igen lehet (legalábbis webre)!
Andrew22
11.01.19
13:48
Sziasztok!
Lenne a flash részéhez egy-két kiegészítésem.
Flashben lehet nagyon jó, gyors és hatékony oldalakat készíteni. Nem értem mért lenne öngyilkosság? Válaszolnék szép sorban az említett problémákra.
Google nem találja. Ezt már rég megoldódott. Nem is értem mért írtad le. Különben is, ha azt akarjuk, hogy oldalunk a google-ba elől legyen, akkor google adwords-öt kell használni.
Nincs plugin nem fut. Erre csak azt tudom javasolni, hogy rakj az oldaladba egy goggle analytics-et és meglátod, hogy a látogatók melyik flash verziót használják. Nekem ez jött ki: 380 látogatóból 367 10-et (ami a legújabb), a többiek a 9-est. Tehát lehet 9-re fejleszteni, vagy rávesszük, hogy töltsék le a 10-est.
Macerás adatbázist használni. Flash adatbázist a php-val éri el. Akkor php-ba is macerás:D
Félre ne értsétek, én nem védem a Flasht, csak sok tudás kell hozzá és sokan ezért szidják. Megvan a maga helye az interneten.
Igenis megéri Flashben honlapot készíteni, csak sokkal több idő, fantázia és persze tudás kell hozzá. Ha ez nincs, akkor maradjunk a Html-es oldalaknál.
Minden jót!
Vision
11.07.11
19:46
“Különben is, ha azt akarjuk, hogy oldalunk a google-ba elől legyen, akkor google adwords-öt kell használni.”
Ezen a gondolaton azért még dolgozzál!
Csomesz
11.11.24
20:03
Igen. Azért látszik mennyi tudás van a fent idézett hozzászólás tulajdonosa mögött. Adwords…ja. Ha van egy csoda zsákod ahonnan előrángatod napi tízszer a köteg pénzeket, akkor biztosan az adwords a legjobb megoldás.
Arra ne is gondoljunk, hogy vannak gyengén látó embertársaink, akik esetleg el szeretnék olvasni a mi tartalmunkat, de hát ki érdekel. Nem? Meg ugye mobilon is olyan kevesen böngésznek….azokat is hagyjuk ki.
Csak egy ilyen weboldal építő szakitól mentse meg a jó sors a vállalkozót, aki esetleg pénzt is akar keresni a weboldalával.
Flame off…