Ákosnak köszönhetően megérkezett a két héttel ezelőtti cikkünk folytatása!
A cikk első része itt olvasható.
A mai részben részletesen bemutatjuk a fancybox beállításokat és a képeken kívüli alkalmazási lehetőségeket.
Kapcsolat a beállítások és az oldalelem között:
Az alap működési mód az, hogy az oldalon elhelyezünk egy elemet és azt valamilyen id alapján összekapcsoljuk a beállítással.
Pl.:
$("a#example1").fancybox();
Link:
<a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>
Ez a módszer nem szabványos, ha több képet szeretnénk ugyan úgy megjeleníteni az oldalon, mivel azonos id csak egy lehet egy oldalon.
A másik módszer, ha több képre is szeretnénk alkalmazni a beállítást az, hogy létrehozunk egy stílusosztályt és azt alkalmazzuk a linkre.
Pl.:
$("a.effekt").fancybox();
Link:
<a class=”effekt” href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>
A mintaállományok elemzése: (beállítások áttekintése)
1. A mintaállományok közül az index.html fájlban a következő beállításos részt találjuk:
a. 1 rész:
<script type="text/javascript">
$(document).ready(function() {
/*
* Examples - images
*/
A script használatához szükséges rész.
Fonos, hogy a script tag lezárása előtt szerepelnie kell ennek a résznek a bezárásához tartozó }); jelek.
b. 2 rész:
$("a#example1").fancybox();
Alapértelmezett beállításokat bemutató példa.
- a háttér beszürkül
- fade efektussal megjelenik a kép
c. 3 rész:
$("a#example2").fancybox({
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic'
});
- a háttér nem szürkül be (nincs lefedés)
- elastic efektussal megjelenik a kép(„fölnagyítódik”)
- elastic efektussal eltűnik a kép(„kicsinyül")
A transitionIn(előtűnés), transitionOut(eltűnés) lehetséges értékei:
fade: alapértelmezett
elastic: nagyítódik illetve "kicsinyül"
none: nincs effektus
d. 4 rész:
$("a#example3").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none'
});
Nincs képváltási effektus, de a háttér beszürkülés igen, mivel az az alapértelmezett.
e. 5 rész:
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'none'
});
'opacity' érték igazra állításával az előtűnési effektus közben átlátszó a tartalom
nincs háttérlefedés
előtűnési effektus kinagyítás, eltűnési effektus nincs
f. 6 rész:
$("a#example5").fancybox();
Itt minden a fancybox alapértelmezett érték, de a megjelenő felirathoz szükség van a az oldalon lévő link beállítására.
Az adott képnél a forráskódban a következő szerepel:
<a href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>
5_s.jpg- ez a kis kép, amiről a script működik
5_b.jpg – ez a nagy kép, a megjelenő szöveg pedig a title tag-ben megadott.
g. 7 rész:
$("a#example6").fancybox({
'titlePosition' : 'outside',
'overlayColor' : '#000',
'overlayOpacity' : 0.9
});
$("a#example7").fancybox({
'titlePosition' : 'inside'
});
$("a#example8").fancybox({
'titlePosition' : 'over'
});
A feliratok elhelyezésének beállításai:
'titlePosition' : 'outside', - Kívül
'inside' – Belül a keretben
'over' – A képen
'overlayColor' : '#000', - Az oldal lefedés ének színe
'overlayOpacity' : 0.9 - Az oldal lefedés átlátszósága
a. 8 rész: - Galéria készítés
Beállító rész:
$("a[rel=example_group]").fancybox({
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'cyclic' : 'true',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span>Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
A képek beállítása:
<a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>
<a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>
<a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>
<a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>
Minden, a galériába tartozó képnél megtalálható a rel="example_group" beállítás, ezzel a kiegészítéssel kerülnek megjelölésre a képek, így tudja a script, hogy a bealításokban mely képek tartoznak egy galériába.
'cyclic' : 'true',- A galéria képei előröl kezdődjenek az utolsó kép megjelenése után.
'titleFormat' : A megjelenő szöveg (képindex stb) megjelenítésére szolgál. A megjelenő feliratot a return utáni résszel lehet testre szabni.
Fontos, hogy a return utáni rész ’ és ’ jel között van.
<span">">- itt van beállítva, hogy melyik css beállítások legyenek használatban a <span> tag-en belül.
Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '
az in
/*
* Examples - various
*/
b. 8 rész: - Egyéb elemek beállítása
Div megjelenítése:
Beállító rész:
$("#various1").fancybox({
'titlePosition' : 'inside',
'transitionIn' : 'none',
'transitionOut' : 'none'
});
A link:
<a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">Inline</a>
A div:
<div style="display: none;"> - A megjelenítendő szöveget el kell rejteni a normál oldalon, mivel ott nem kell, hogy látható legyen.
<div id="inline1" style="width:400px;height:100px;overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. titor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.
</div>
</div>.
$("#various2").fancybox(); -AJAX, (erre most nem térünk ki)
iFrame- tetszőleges weboldal megjelenítése:
Beállító rész:
$("#various3").fancybox({
'width' : '75%',
'height' : '75%',
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none',
'type' : 'iframe'
});
A link:
<a id="various3" href="http://google.ca">Iframe</a>
'width': szélesség
'height': magasság
'autoScale': Alapértelmezetten true, vagyis a fancybox a teljes tartalmat igyekszik megjeleníteni, ha hamis, csak annyi látszik, amennyi a definiált boxméretben elfér.
'type': A megjelenített tartalom típus kikényszerítése:
Lehet: 'image', 'ajax', 'iframe', 'swf', 'inline'
FLASH- megjelenítése:
Beállító rész:
$("#various4").fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'none',
'transitionOut' : 'none'
});
A link:
<a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">Swf</a>
'padding': A tartalom és a fancybox keret közötti terület, alapértelmezett értéke 10
});
</script>
A következő cikkben további beállításokat és módszereket mutatunk be.
További izgalmas, látványos megoldásokkal Webdesigner Mester, Webprogramozó Mester, valamint Web Artist 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!
Egyedülálló Web Artist képzésünknek köszönhetően egyetlen gyakorlat orientált képzés alatt két szakmát is szerez!
A márciusi induló csoportokba március 5-ig jelentkezhet!
Várjuk gyakorlat orientált informatika képzéseinkre márciusban is!
Budapest-Pécs
Gyakorlat orientált informatika oktatás rugalmas időbeosztással!
www.netlogi-c.net
