jQuery plugins - Coin Slider
júl 10

Coin Slider

Slideshow egyedi átmeneti hatásokkal

Verzió: 1.0
Kiadás dátuma: 2010/04/04
Fejlesztő: Ivan Lazarevic
Liszensz: MIT

Bevezető

Egy újabb kép slider, szintén könnyen kezelhető, a CSS által a kinézete teljesen átszabható, a képek linkelhetők, illetve címeket lehet nekik adni, stb.

Igazából nem sokban tér el a többi slider-től, (pl. a Nivo Slider), az egyetlen eltérés talán csak az átmeneti hatás, az ott használható effektek: a képeket négyzetekre (vagy inkább téglalapokra) oszthatjuk fel (ez szabadon konfigurálható), és ezekkel valósulnak meg az egyes effektek (random, swirl, rain, straight).

Jellemzők

  • egyedi átmeneti hatások
  • könnyen testreszabható
  • linkelhető képek
  • feliratozható képek
  • kompatibilitás: Internet Explorer 6+, Firefox 2+, Safari 2+, Google Chrome 3+, Opera 9+

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/coin-slider-styles.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/coin-slider.min.js"></script>
          

Deklaráció

Alapbeállításokkal:

            $(document).ready(function() {
              $('#coin-slider').coinslider();
            });
          

Használat

Egy tetszőleges, egyedi azonosítóval ellátott (pl.: #coin-slider) blokkba helyezzük el a képeket. Ez természetesen biztosítja számunkra, hogy egy oldalon belül több Coin Slider-t is alkalmazhassunk, egymástól eltérő beállításokkak, esetleg kinézettel.

              <div id="coin-slider">
                <a href="image1.jpg" target="_blank">
                  <img src="thumb1.jpg" alt="" />
                  <span>Cím az első képhez</span>
                </a>
                <a href="http://www.site.com" target="_blank">
                  <img src="thumb2.jpg" alt="" />
                  <span>Cím a második képhez</span>
                </a>
              </div>
          

Teljes paraméterlista

  • width: a slider szélessége (alapértelmezett: 565)
  • height: a slider magassága (alapértelmezett: 290)
  • spw: négyzetek száma vízszintesen (alapértelmezett: 7)
  • sph: négyzetek száma függőlegesen (alapértelmezett: 5)
  • delay: késleltetés/szünet két átmenet közt milliszekundumban (alapértelmezett: 3000)
  • sDelay: késleltetés/szünet a négyzetek közt milliszekundumban, azaz az átmeneti hatás sebessége (alapértelmezett: 30)
  • opacity: a képcím és a navigáció áttetszősége [0..1](alapértelmezett: 0.7)
  • titleSpeed: a képcím megjelenésének sebessége milliszekundumban (alapértelmezett: 500)
  • effect: átmeneti hatás (random, swirl, rain, straight, alapértelmezett: random)
  • navigation: navigációs gombok engedélyezése/tiltása (true | false)
  • links: képek mutatása link-ként (true | false)
  • hoverPause: slider működésének megállítása, ha az egér fölötte van (true | false)