Bizonyára már mindenki meglátogatott olyan oldalt, ahol a képek úgy jelentek meg rákattintáskor, hogy az oldal beszürkült, majd a kép előtűnt valamilyen dobozban.
Ennek az effektusnak az elkészítését mutatjuk be ma Ákos legújabb cikkében.
Az említett hatás eléréséhez a FancyBox nevű, jQuery alapú Lightbox klónt fogjuk felhasználni.
A jQuery egy JavaScript könyvtár (Keretrendszer, Eszköztár), JavaScript feladatok megoldására készült, HTML oldalakra sok feladatot lehet megoldani a segítségével.
A Lightbox egy rendkívül népszerű, jQuery-re épülő effektező megoldás, képek és egyéb beágyazott tartalmak megjelenítésére.
A Lightbox klón elnevezést a Lightbox szerű hatások elérését megvalósító script-re szokták használni.
A megvalósítás lépései:
1. Töltsük le a FancyBox-ot a http://fancybox.net/ oldalról.
A jelenlegi legfrissebb verzó az 1.3.4 ( 2010/11/11 dátummal ). A letöltést választva letöltjük a jquery.fancybox-1.3.4.zip –et, és kicsomagoljuk valahová a site-unkba. Kitömörítés után a mappájában látunk néhány fájlt és két mappát.
Az index.html a minta fájl, amiben működés közben láthatunk néhány effektet,
a style a példa oldalhoz tartozó css, az example mappában pedig a mintaképek vannak.
A számunkra - használati szempontból- fontos állomány a jquery-1.4.3.min.js, és a fancybox mappa.
A fancy boksz mappában vannak a FancyBox-hoz szükséges alkotóelemek.
2. Készítsünk egy új html oldalt!
A jó működéshez a DOCTYPE meghatározásnak megfelelő, érvényes dokumentumot kell gyártanunk, ezért az ellenőrzés nagyon fontos.
3. Csatolnunk kell a jQuery és a FancyBox-os java scripteket a dokumenumhoz:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
vagy
<script type="text/javascript" src="/ jquery-1.4.3.min.js "></script> ( ez a mappa gyökérben van, ha máshová másoljuk figyeljünk az útvonal aktualizálására )
Valahová head részbe helyezzük el.
<script src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
Opcionális, de ajánlott a következő scriptek csatolása is:
<script type="text/javascript" src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="fancybox/jquery.easing-1.3.pack.js"></script>
( ezek a fancybox mappában vannak, ezt a mappát érdemes egyben kezelni, ha máshová másoljuk, akkor figyeljünk az útvonal aktualizálására)
Az első rész maga a fancybox, az opcionális részben első sor az egérgörgő kezelésére, a második pedig az áttűnéshez kell.
A beszúráshoz használhatjuk a Beszúró sáv/HTML fül/Script utasítást is.
4. Csatoljuk a következő css fájlt is, ez befolyásolja a megjelenését a megjelenő képeknek
<link rel="stylesheet" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />
( ez a fancybox mappában van, ezt a mappát érdemes egyben kezelni, ha máshová másoljuk figyeljünk az útvonal aktualizálására)
5. Két helyen szükséges beállításokat elvégezni a html oldalunkon, a használathoz
- Head-ben
( itt alíthatjuk be, hogy ,miként jelenjen meg a kép – effektek beállítása )
<script type="text/javascript">
$(document).ready(function() {
$("a#azonosító").fancybox ({
'effektopció' : ’érték’,
'effektopció2' : ’érték2’
});
});
</script>
- Kép-nél:
A képnek linknek kell lenni, és azt az azonosítót-t kell használni, amit beállítottunk.
<a href="nagy kép elérési útvonala" title="A nagy kép szövege"><img src="kiskép elérési útvonala" /></a>
A következő cikkben részletesen bemutatjuk a beállításokat, és a képeken kívüli alkalmazási lehetőségeket.
További izgalmas, látványos megoldásokkal Webdesigner Mester és Webprogramozó Mester képzéseinken találkozhat!
Dolgozzon képzett Webdesignerként, Webprogramozóként, vagy haszálja fel a képzésen megtanultakat saját honlapjához!
A februári következő induló csoportokba február 7-ig jelentkezhet!
Várjuk gyakorlat orientált informatika képzéseinkre februárban is!
Budapest-Pécs
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
