Úpravy a překlad FancyBoxu

Pavel Tipy & triky, JavaScript

FancyBox určitě patří mezi nejznámější lightboxy, přesto nenabízí jednoduchý překlad do jiných jazyků. Dnes vám ukážu, jak jsem tento problém vyřešil pro stránky s více jazykovými mutacemi, a rovnou opravil pár chyb a odstranil zbytečné kusy kódu.

Úpravy a překlad FancyBoxu

FancyBox 2

Ač se všude na internetu vyskytuje pouze FancyBox, je důležité zmínit, že je to již 2. verze, která byla přepsána od základů. Původní Fancybox vás rovnou odkáže ke stažení nové verze.

Mé úpravy

Jak jsem zmínil již dříve, úprav které jsem provedl je více než jen překlad.

  • Za komentování kódu, pro zobrazení SWF, Iframe a ostatních funkcí, které neslouží k zobrazení obrázků
  • Zmenšení obrázků zpět při změně velikosti okna z "expanded view"
  • Odstranění podpory Mousewheel pluginu
  • Možnost přeložení hlášek včetně pluginu Button helpers
  • Vybírání titulku pro obrázek z odkazu, pokud není tak z tagu img
  • V pluginu Button helpers zakázání tlačítek Předchozí, Prezentace a Další při otevření jediného obrázku
  • V pluginu Thumbnail helper se náhledy skryjí, při malé výšce monitoru

Možnosti překladu

Bez úprav si Fancybox lze přeložit také, není to však tak jednoduché.

  • Přepsání hlášek natvrdo v kódu - nejlehčí, však při více mutacích musí být více zdrojových souborů
  • Upravení template - není potřeba úprava kódu, musíte ale zadat celý kus HTML kódu přesně jak je v originále
  • Vlastní úprava, která nabídne lehčí možnost

Zdrojové kódy

Mou upravenou verzi Fancyboxu si můžete stáhnout a používat. Nezapomeňte však, že Fancybox 2 je pod licencí

Z kódu jsem nic nesmazal, pouze za komentoval. Upravené řádky jsem pod komentářem zachoval a doplnil task tagem DONE. Pokud si kódy chcete porovnat, mohu doporučit PSPad, který nabízí Porovnání se souborem. Kódy nejsou minifikovány, využijte dříve napsaný článek o minifkaci skriptů

Porovnání souborů PSPad

Použití

Použití upraveného Lightboxu se neliší s původním, pouze je přidána vlastnost lang. a pro thumbnail helper vlastnost minWindowHeight. Pokud některou položku vynecháte, použije se originální v anglickém znění.

$("a.fancybox").fancybox({
  ...
  lang: {
    close: "Zavřít", // Tlačítko zavření i pro button helper
      error: "The requested content cannot be loaded.<br/>Please try again later.", // chyba při načítání
      next: "Další", //I pro button helper 
      prev: "Previous", // I pro button helper
      image: "Obrázek", // pro přidání do titulku Obrázek x z y 
      of: "z",
      play: "Pustit prezentaci", // Použití v button helper
      pause: "Zastavit prezentaci", // Použití v button helper 
      toggle: "Přepnout zobrazení" // Použití v button helper
  },
  helpers : {
    ...
    thumbs : {
      ...
      minWindowHeight: 650 //pod tuto hranici výšky okna se miniatury skryjí
    }
  }
});

Stažení a Demo

Přidat komentář

Právě odpovídáte na existující komentář. Zrušit

Komentáře

Roman Janko

http://rjwebdesign.cz 1.2.2018 17:16

Odporná knihovna :), taky jsem ji používal, ale jsou mnohem lepší.
Aktuálně využívam http://dimsemenov.com/plugins/magnific-popup/

Odpovědět

Novinky z blogu

Vlastní eventy v Javascriptu

Eventy jsou s Javascriptem spjaty už od jeho počátků. Přesto, že jich v základu obsahuje nepřeberné množství, je někdy užitečné vytvořit si eventy vlastní. V tomto článku se...

Další články