{"id":117,"date":"2014-12-09T08:34:33","date_gmt":"2014-12-09T07:34:33","guid":{"rendered":"https:\/\/profitarhely.hu\/blog\/?p=117"},"modified":"2023-02-14T15:14:47","modified_gmt":"2023-02-14T14:14:47","slug":"bemutatjuk-huge-it-image-slider","status":"publish","type":"post","link":"https:\/\/profitarhely.hu\/blog\/bemutatjuk-huge-it-image-slider\/","title":{"rendered":"Bemutatjuk: Huge-It Image Slider"},"content":{"rendered":"

Biztosan tal\u00e1lkozt\u00e1l m\u00e1r olyan weboldallal, aminek a fejl\u00e9c\u00e9ben k\u00fcl\u00f6nb\u00f6z\u0151 k\u00e9pek v\u00e1ltakoztak. Ezekre kattintva \u00e1ltal\u00e1ban egy-egy kiemelt cikkre, oldalra navig\u00e1lhatunk, hisz a slidernek pont az a l\u00e9nyege, hogy szem el\u0151tt tartsa azokat a tartalmakat, amiket mindenk\u00e9pp meg akarunk mutatni a l\u00e1togat\u00f3inknak.<\/p>\n

<\/p>\n

Ma egy olan b\u0151v\u00edtm\u00e9nyt (plugint) mutatunk be, aminek ingyenes v\u00e1ltozat\u00e1val is nagyon profi \u00e9s rugalmasan alak\u00edthat\u00f3 slidereket hozhatunk l\u00e9tre, \u00e9s illeszthet\u00fcnk be WordPress oldalunkba.<\/p>\n

Huge-It Slider<\/h3>\n

A b\u0151v\u00edtm\u00e9ny let\u00f6lthet\u0151 innen<\/a>, vagy a b\u0151v\u00edtm\u00e9nykezel\u0151ben is megkeresheted. Telep\u00edt\u00e9s ut\u00e1n megjelenik egy \u00faj men\u00fcpont a bal oldali adminisztr\u00e1ci\u00f3s men\u00fcben.<\/p>\n

\u00daj slider l\u00e9trehoz\u00e1sa<\/strong><\/p>\n

Egy sliderben \u00e1ltal\u00e1ban t\u00f6bb k\u00e9p\/sz\u00f6veg\/vide\u00f3 v\u00e1ltakozik. A b\u0151v\u00edtm\u00e9ny ingyenes v\u00e1ltozat\u00e1ban olyan slidereket haszn\u00e1lhatunk, amikbe k\u00e9peket lehet pakolni. Els\u0151 l\u00e9p\u00e9sk\u00e9nt hozzunk l\u00e9tre egy \u00faj slidert az „Add New Slider” gombra kattintva.<\/p>\n

\"K\u00e9perny\u0151fot\u00f3<\/a><\/p>\n

Ha ezzel megvagyunk, kattintsunk a slider nev\u00e9re. Ezt k\u00f6vet\u0151en tudjuk a k\u00e9peket hozz\u00e1adni 1-1 di\u00e1hoz, \u00e9s be\u00e1ll\u00edtani a hivatkoz\u00e1sokat, k\u00e9pal\u00e1\u00edr\u00e1sokat.<\/p>\n

Fontos, hogy a plugin nem k\u00e9pes felt\u00f6lteni \u00faj k\u00e9peket, ez\u00e9rt miel\u0151tt elkezdj\u00fck a slider fel\u00e9p\u00edt\u00e9s\u00e9t, t\u00f6lts\u00fck fel a k\u00e9peket a M\u00e9diat\u00e1r men\u00fcponton kereszt\u00fcl.<\/p>\n

\"K\u00e9perny\u0151fot\u00f3<\/a><\/p>\n

Az „Add Image Slide” gombra kattintva v\u00e1laszthatjuk ki a di\u00e1ba illesztend\u0151 k\u00e9pet. A „Title” mez\u0151be \u00edrjuk be a hivatkoz\u00e1s c\u00edm\u00e9t, ez nagyobb bet\u0171kkel fog megjelenni a di\u00e1n. Kicsit hosszabb le\u00edr\u00e1st is \u00edrhatunk a „Description” mez\u0151be, ami szint\u00e9n megjelenik a slideon, alul, kisebb bet\u0171kkel. V\u00e9g\u00fcl meg kell adnunk, hogy a k\u00e9pre kattintva hova navig\u00e1ljuk a l\u00e1togat\u00f3t.<\/p>\n

Tov\u00e1bbi k\u00e9peket ugyan\u00fagy az „Add Image Slide” gombra kattintva adhatunk a sliderhez.<\/p>\n

Ha az \u00f6sszes k\u00e9pet felt\u00f6lt\u00f6tt\u00fck \u00e9s be\u00e1ll\u00edtottuk a hivatkoz\u00e1sokat, n\u00e9zz\u00fck meg a tov\u00e1bbi be\u00e1ll\u00edt\u00e1sokat jobb oldalt fent.<\/p>\n

\"K\u00e9perny\u0151fot\u00f3<\/a><\/p>\n

A width \u00e9s height opci\u00f3 a slider sz\u00e9less\u00e9g\u00e9t \u00e9s magass\u00e1g\u00e1t adja meg pixelben. Ha a „pause on hover” ut\u00e1n pipa van, az azt jelenti, hogy a slider nem fog \u00e1tv\u00e1ltani a k\u00f6vetkez\u0151 k\u00e9pre, ha \u00e9pp az eg\u00e9rmutat\u00f3val a k\u00e9pen tart\u00f3zkodunk. Az „Effects” men\u00fcb\u0151l kiv\u00e1laszthatjuk, hogy milyen m\u00f3don v\u00e1ltsanak a k\u00e9pek, \u00e9rdemes kipr\u00f3b\u00e1lgatni az \u00f6sszeset. A „Pause time” miliszekundumban adja meg, hogy mennyi ideig l\u00e1ssunk 1-1 di\u00e1t, a „Change speed” pedig azt hat\u00e1rozza meg, hogy milyen gyorsan t\u00f6rt\u00e9njen a v\u00e1lt\u00e1s a di\u00e1k k\u00f6z\u00f6tt. A „Slider Position” a slider helyzet\u00e9t hat\u00e1rozza meg. Ha mindent be\u00e1ll\u00edtottunk, ne felejts\u00fck el elmenteni a be\u00e1ll\u00edt\u00e1sokat!<\/p>\n

Ezzel elk\u00e9sz\u00fclt az els\u0151 slider-\u00fcnk, m\u00e1r csak be kell illeszteni a weboldalba.<\/p>\n

Slider beilleszt\u00e9se<\/strong><\/p>\n

Az elk\u00e9sz\u00fclt slidert widgetk\u00e9nt tudjuk beilleszteni azokra a helyekre, amiket az aktu\u00e1lisan haszn\u00e1lt sablon t\u00e1mogat. Ehhez l\u00e9pj\u00fcnk be a Megjelen\u00e9s -> Widgetek men\u00fcbe.<\/p>\n

Bal oldalt l\u00e1tni fogunk egy Huge-It Slider nev\u0171 dobozt, amit a megfelel\u0151 helyre h\u00fazva \u00e9s a be\u00e1ll\u00edt\u00e1sokat elmentve, m\u00e1r meg is jelenik a weboldalon a slider.<\/p>\n

\"K\u00e9perny\u0151fot\u00f3<\/a><\/p>\n

\"K\u00e9perny\u0151fot\u00f3<\/a><\/p>\n\n\n

<\/p>\n\n\n\n