Nekonečná obrázková galéria (slider) pomocou jQuery

  • Posted on: 21 April 2010
  • By: petiar

Jeden z mojich zákazníkov ma poprosil o jednoduchú pohyblivú galériu - niekoľko obrázkov pohybujúcich sa z jednej strany na druhú. Na rozdiel od od ostatných podobných, ktorých je na internete habadej, sa tieto obrázky mali pohybovať plynule, to znamená nie po častiach.

Druhá požiadavka bola aby sa táto galéria pohybovala v oboch smeroch, k čomu, samozrejme, treba jednoduché ovládacie prvky.

A tretia požiadavka bola aby táto galéria bola "nekonečná" - to znamená keď príde na posledný obrázok, objaví sa za ním automaticky obrázok prvý a naopak.

Bol som ti takmer nístý že na internete nájdem takýto skript za pár minút. Lenže pár minút zmenilo na pár hodín a ja som stále nachádzal len galérie ktoré ako na potvoru spĺňali vždy len dve z troch uvedených požiadaviek. Začínal som chápať, že skôr naprogramujem vlastné riešenie. Našťastie som nakoniec našiel jednu galériu, ktorá síce nespĺňala presne všetky požiadavky ale bola ideálnym kandidátom na postavenie mojej.

Skript, ktorý som stiahol z adresy Circular Image Slide with jQuery (vďaka, Calisza!) má dva "nedostatky" (pre tento prípad): skroluje len jedným smerom a nemá ovládanie. A nie je veľmi úsporný, to viem, ale na moje požiadavky stačil, takže toto som nepovažoval za prekážku.

Takže späť k problému: upravil som tento skript tak, že teraz chodí oboma smermi a pribudlo k nemu aj jednoduché ovládanie. Príjemným dôsledkom tejto príce bolo to, že som viacmenej zistil ako ten skript funguje a pridal som možnosť pohybu obrázkov aj o viac ako 1 pixel, čím som do istej miery vyriešil aj problém s náročnosťou tohto skriptu na systémové zdroje. Ešte raz vďaka, Calisza!

V čase, keď som tento skript upravoval, som ešte nebol veľmi skúsený jQuery programátor, takže je veľmi pravdepodobné že v ňom nájdete veci ktoré sa dali urobiť ináč a lepšie. Ja na to už čas nemám, ale ak vy áno, tak budem rád.

Pozrite si demo, stiahnite a vychutnávajte. A do tretice vďaka, Calisza!

Komentáre

Fantastické, moc díky.

I love this script. But there is a quality of uneven motion, both in your sample and in my use of the script. Every 4 or 5 seconds, it seems to hesitate for just a moment, then continues on with the motion. This happens consistently. Is there any setting I can change to fix this?

Here is my use of the script where you can see the issue:

http://firinglinedesign.com/mathieu/

Thanks in advance for your help.

Hi Scott,

I am afraid I can't do anything about that. As I noticed in the article - I know that this script is not very efficient. All you can do is to play with the variables at the begining of that script. By default the script uses the interval of 1 milisecond which may be unefficient in some browsers/computers. Increasing this value may help the efficiency, however it will slow down the motion. Therefore there is a multiplicator variable which will ensure that the images are moved in more than 1px at once.

Good luck, hope you'll find the use of it! :-)

Pridať nový komentár