« Készítsünk igényes névjegykártyát! 3D hatás-térhatású képek kezelése! »

11-02-28

» Képek megjelenítése effektekkel!- 2.rész

Á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:

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 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:

$(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:

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:

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.

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:

'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

Netlogi C School online support:

customer service software technical support

A blog szerzői:

Weinzierl Anett
felnőttképzési szakértő, marketing tanácsadó

Duschák Zoltán
felnőttképzési szakértő, informatika tanácsadó

Vendégszerkesztők

Zsenák István
gazdaságinformatikus, PHP oktató

Eilinger Ákos
mérnök-informatikus, oktató

Filus Attila
Photoshop művész (PS Artist), kiadványszerkesztő, oktató

Nagy Tamás
okl. villamosmérnök, Site Builder, oktató

Netlogi C School

Reklámozd a saját oldaladat is

Linkek:

Netlogi C School informatika tanfolyamok

Hatékony weboldal készítés

Online marketing tanácsadás

Weinzierl Anett felnőttképzési szakértő, KKV marketing tanácsadó

Linkgyüjtemény

Internet linkek

freeblog admin

Oszd meg, mentsd el! - TurboBookmark.com

Kedves Blogolvasó! Iratkozzon fel hírlevelünkre, és azonnal értesítjük emailben, amint új bejegyzés születik a blogon! Ráadásul hírlevelünkben olyan hasznos tanulmányokat, cikkeket is kiküldünk, amelyeket itt a blogon nem jelenítünk meg!

Minden hírlevél feliratkozónk egy 2000 FT értékű beváltható elektromos tanfolyami kupont kap ajándékba! ráadásul hírlevél feliratkozását követően igénybe veheti ingyenes, online informatika tanácsadásunkat is!

Netlogi C School Informatika Blog

11-02-28

Kapcsolat a beállítások és az oldalelem között:

A mintaállományok elemzése: (beállítások áttekintése)

Linkek:

Legtöbb komment

Archívum

Kategóriák