jQuery plugins - Fullscreenr
nov 09

Fullscreenr

Teljes képernyős háttérkép

Verzió: 1.0
Kiadás dátuma: 2009
Fejlesztő: Jan Schneiders
Liszensz: nincs adat

Bevezető

A fullscreen hátterek internetes alkalmazása a jövőben valószínűleg egyre nagyobb szerephez fog jutni. Ez köszönhető az Internet folyamatos fejlődésének, hisz régebben épp az ellenkezője volt az uralkodó: lehető legkevesebb képi elem használata, WEB-re optimalizálva (butítva).

Azonban az ilyen hátterek alkalmazása felvet némi kérdést:

  • Mekkora legyen a kép felbontása?
  • Hogyan méretezzük azt az adott ablakmérethez (torzulás nélkül)?
  • Mi legyen, ha átméretezik az ablakot?

A Fullscreenr plugin leveszi vállunkról e terheket, könnyedén és egyszerűen implementálható oldalunkba: a képet torzulás nélkül igazítja az aktuális ablakmérethez - mind vízszintesen, mind függőlegesen középre pozícionálva.

Implementálás

CSS

            <link rel="stylesheet" type="text/css" href="css/style.css" />
          

JavaScript

            <script type="text/javascript" src="js/jquery.js"></script>
            <script type="text/javascript" src="js/jquery.fullscreenr.js"></script>
          

Deklaráció

Ahhoz, hogy az eredeti kép arányaiban ne torzuljon, a CSS szelektoron túl definiálnunk kell a kép szélességét és magasságát is:

            $(document).ready(function(){
              jQuery.fn.fullscreenr({
                bgID: '#bgimg',
                width: 1024,
                height: 615
              });
            });
          

Használat

Első lépésként egy jó képet kell találnunk (mind minőségben, mind témában). A bemutató oldalon pl. én egy 1024 x 615-ös képet használok, de ha a paraméterlistában megnézzük a width és height paraméterek alapértelmezett értékeit, nyugodtan vehetjük azokat útmutatásnak.

Teljes paraméterlista

  • height: a háttérkép eredeti magassága pixel-ben (alapértelmezett: 1024)
  • width: a háttérkép eredeti szélessége pixel-ben (alapértelmezett: 1280)
  • bgID: a háttérkép azonosítója (alapértelmezett: 'bgimg')