Fancybox Galéria a tag onclick

Mostanság egyre több és több helyen látom a Fancybox felugró ablakának galériás változatát. Aki használja az tudja, hogyan lehet ezt beállítani és működtetni. Arra azonban kevés példát sőt igazából egyet sem láttam, hogyan indítsuk el galériánkat egy kattintásra. Igazából aki jQuery alapokon dolgozik annak egyértelmű lehet. Én sajnos még csak nem rég óta foglalkozom vele és nem igazán találtam megoldást a problémámra, pedig egyszerűbb mint gondolnám. A lényeg abban rejlik, hogy egy onclick eseményre lefuttatunk egy click trigert a galériánk első elemére, így:

onclick='$("a.group[rel=g1]:first").trigger("click");'

A fenti példa azt feltételezi, hogy van egy galériánk sok linkkel, a linkek href=”” attribútumában a megjelenítendő képpel. Minden ilyen linknek megadjuk a group css class-ot azaz és a rel attribútumban beállítjuk mely képek kerülnek egy galériába itt a g1 csoport jelöl egy galériát (rel=”g1″):

<a href="/ut-a-nagy-kephez-1.jpg" rel="g1">elem1</a>
<a href="/ut-a-nagy-kephez-2.jpg" rel="g1">elem2</a>
<a href="/ut-a-nagy-kephez-3.jpg" rel="g1">elem3</a>
<a href="/ut-a-nagy-kephez-4.jpg" rel="g1">elem4</a>
<a href="/ut-a-nagy-kephez-5.jpg" rel="g1">elem5</a>

A fancybox() az alábbi módon kerül meghívásra, további példák lásd itt:

$("a.group").fancybox();

A Show the Gallery link pedig kb egy néz ki:

<a href="#" onclick='$("a.group[rel=g1]:first").trigger("click");'>Show the Gallery</a>

Advertisements

Vélemény, hozzászólás?

Adatok megadása vagy bejelentkezés valamelyik ikonnal:

WordPress.com Logo

Hozzászólhat a WordPress.com felhasználói fiók használatával. Kilépés / Módosítás )

Twitter kép

Hozzászólhat a Twitter felhasználói fiók használatával. Kilépés / Módosítás )

Facebook kép

Hozzászólhat a Facebook felhasználói fiók használatával. Kilépés / Módosítás )

Google+ kép

Hozzászólhat a Google+ felhasználói fiók használatával. Kilépés / Módosítás )

Kapcsolódás: %s