fancyBox 2.0

Mám historickou povinnost zmínit se o nové verzi oblíbeného lightboxu. Fancybox si do verze 2.0 naježil kompletní přepsání kódu a přizpůsobení vlastností aktuálnímu stavu webdesignu.

V zásadě přináší vše co mi v poslední verzi chybělo nebo jsem dokonce nahrazoval ohýbáním, které bylo na úrovni kódu někdy poněkud krkolomné. 

Fancybox je teď kromě jiného responsivní, vizuální efekty tvoří pomocí CSS3 vlastností a zjednodušuje tvorbu rozšíření. Několik užitečných už autor předpřipravil.

Možná se budete divit, ale největší radost mám z toho, že Fancybox je teď placený produkt. Proč? Každý z nás přispěje jednomu šikovnému chlapci na to, aby užitečné věci věnoval svou energii.

Dobrá zpráva — vývoj FancyBoxu neskončil

Ze všech klonů LightBoxu nejraději používám FancyBox. Už to vypadalo, že jeho vývoj skončí první verzí, ale Janis Skarnelis najednou přišel s kompletně přepsanou novou verzí. Co má navíc FancyBox 1.2.1 oproti verzi 1.0?

• Je trošku více sexy - díky pluginu jQuery.Easing se otevírá velmi ladně a pod obsah přidává jemný stín.
• Cizí stránku lze teď otevřít také jako iframe pomocí class="iframe". Viz screenshot.
• Přibylo několik nových parametrů nastavení a událostí (třeba callback callbackOnShow)
• FancyBox má podporu v Google Group

FancyBox: otevření více obrázků z jediného

FancyBox tohle příliš nedokumentuje, ale občas je potřeba v dokumentu mít jediný obrázek a po kliknutí na něj jich v galerii zobrazit více.

Pomůže pohled do zdrojového kódu webu FancyBoxu.

Nejprve je potřeba vytvořit pole s obrázky. Podle komentáře to nemusí být vždy obrázky a je možné jim přiřadit další vlastnosti:

 //List can contain mixed media too //Parameter "o" ir optional and used to override settings, example: {url: "http://www.google.com", title: false, o: {'frameWidth': 200} } var imageList = [ {url: "/img/examples/6_b.jpg", title: "First image"}, {url: "/img/examples/7_b.jpg", title: "Second image"}, {url: "/img/examples/8_b.jpg", title: "Third image"} ]; 

Pak je potřeba připravit funkci, která obrázky načte:

 function getGroupItems(opts) { jQuery.each(imageList, function(i, val) { opts.itemArray.push(val);
 }); } 

A nakonec ji zavolat při spuštění FancyBoxu. Slouží k tomu vlastnost itemLoadCallback:

 $("a").fancybox({ 'itemLoadCallback': getGroupItems
 });