jQuery plugins - Coda-Slider
júl 08

Coda-Slider

Igényes, jól paraméterezhető tartalom slider

Verzió: 2.0
Kiadás dátuma: 2009/10/26
Fejlesztő: Niall Doherty
Liszensz: MIT, GPL

Bevezető

A Coda-Slider napjaink egy igen elterjed, népszerű, látványos eleme a honlapoknak. Maga az effekt onnan kapta a nevét, hogy először a Coda oldalán jelent meg, amit aztán az egyik fejlesztő (Niall Doherty) még kicsit tovább fejlesztett, feltúrbózott. Azóta ez a plugin meghódította a WEB-et, és rengeteg implementációt eredményezett, de maga az effekt továbbra is coda slider effekt néven van "jegyezve".

Ez az effekt nem más, mint egyetlen oldalon belüli, több tartalom megjelenítése egy kissebb trükkel: az összes tartalom egyazon oldalon helyezkedik el (váltáskor nincs szükség az oldal újratöltésére), ami egy blokk segítségével maszkolva van és csak az aktuális tartalom látható, majd váltáskor csúsztatással eltoljuk a tartalmat, hogy az új tartalom kerüljön a blokk alá. Látszatra olyan, mint egy Ajax alkalmazás, de itt nincs külön tartalom betöltés, így ez látványosabb és gyorsabb megoldás.

Installálás

CSS

Elsőként a plugin-hoz szükséges CSS oldal, a coda-slider-2.0.css definiálására van szükség, amelyben természetesen lehetőségünk van saját ízlésünk szerint formázni a plugin megjelenését.

Ezt követi a szükséges js kódok implementálása, illetve a slider(ek) deklarálása, ugyanis egy oldalon belül több Coda-Slider is elhelyezhető, azonban ezeket egyedi ID-vel kell ellátnunk, ahogy az alábbi példa is mutatja:

Javascript

            <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
            <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/jquery.coda-slider-2.0.js"></script>
            <script type="text/javascript">
              $().ready(function() {
                $('#coda-slider-1').codaSlider();
                $('#coda-slider-2').codaSlider();
              });
            </script>
          

Ezután jöhetnek a különböző tartalmak. Ezeket egy .coda-slider-wrapper CSS osztályú div-ben kell elhelyezni, mindegyiket egy külön div.panel blokkban:

            <div class="coda-slider-wrapper">
              <div class="coda-slider preload" id="coda-slider-1">
                <div class="panel">
                  <p>Tartalom 1</p>
                </div>
                <div class="panel">
                  <p>Tartalom 2</p>
                </div>
              </div>
            </div>
          

Tippek

  • Amennyiben használni kívánjuk a slider jobbra-balra navigációs lehetőségét, célszerű az egész coda-slider blokkot egy üres div blokkba helyezni, mivel a plugin a navigációs gombok pozícionálásához az aktuális slider szülő elemét használja, felülírva esetleges saját CSS formázásainkat.
    Így ha nem használunk szülő div-et, a CSS formázásaink szétesésével kell számolnunk.