Prednedávnom som potreboval na jednej webstránke vytvoriť po ťuknutí na obrázok v texte efekt, keď webstránka stmavne, a obrázok sa zobrazí zväčšený. Ide o efekt nazývaný lightbox, greybox alebo whitebox. Môžete si to skúsiť vedľa na obrázku. Ako to však dosahnuť?

Niečo takéto je možné dosiahnuť pomocou galérie (napríklad Simple image gallery). Takto vytvorená galéria používa jednoduchý spôsob, sama generuje náhľady. Stačí nainštalovať plugin z vyššie uvedeného odkazu a aktivovať ho. Obrázky sa uložia do adresára /images/stories/nejakyadresar, a v texte čánku sa napíše {simplegallery}nazovadresara{/siplegallery}, pričom plugin vygeneruje náhľady obrázkov z daného adresár. Po ťuknutí na ľubovoľný z nich sa galéria po efekte stmavenia webstránky sppustí.  Simplegallery so už dlhšie pouzžíval, to však neriešilo môj problém, pretože sa takto nedalo odvolávať na jednotlivý obrázok.

Tak som hľadal ďalej. Po dlhšej dobe som našiel potrebných pluginov viac. každý mal však nejaké muchy, až na jeden, ktorý plne vyhovoval.

FBoxBot plne robil všetko, čo som potreboval, pre jeho sfunkčnenie je však nutné splniť (okrem inštalácie ) dve podmienky:

1. Upraviť hlavičku šablony
2. Používať WYSWIG editor namiesto štandardného editora v Joomle!

Oba body splniť je jednoduché: najprv si otvorte v cez správcu šablón v backende Joomla! šablonu, ktoru používate a nájdite tag </head>

Tesne pred tento tag vložte nasledujúci kód:

<!-- +++++++++++++++ frontbox head begin+++++++++++++++  -->
<link  href="<?php echo $mosConfig_live_site;?>/mambots/content/fboxbot/frontbox/fbox_css.css"  rel="stylesheet" type="text/css"  />
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/mambots/content/fboxbot/frontbox/fbox_conf.js"></script>
<script type="text/javascript" src="<?php echo $mosConfig_live_site;?>/mambots/content/fboxbot/frontbox/fbox_engine.compressed.js"></script>
<!-- +++++++++++++++ frontbox head end+++++++++++++++++  -->

tento je jemne upravené oproti kódu z pôvodnj stránky tak, aby ste nemuseli vypisovať cestu, ale Joomla! spraví všetko za Vás. Druhou podmienkou je použitie WISWIG editora, aby sa cez neho mohli vkladať obrázky. Ja som si zvykol na JCE editor, môžete si ho stiahnuť cez nasledujúce odkazy. V tomto prípade je nutné inštalovať komponent JCE a plugin JCE .

Týmto sme splnili všetky podmienky, aby sme mohli použiť lightbox na ľubovoľnom obrázku. 

Teraz uz stačí len pridať obrázok, a pokiaľ sa mu zmenšia rozmery cez editor, pričom pôvodný obrázok je väčší, tak plugin FBoxBot vygeneruje náhľad a po klepnutí naň sa po efekte stmavnutia zobrazí obrázok v plnom rozlíšení. Nezabudnite si však pluginy JCE a FBoxBot v mambotoch aj aktivovať.

Len registrovaní užívatelia môžu pridať komentár.
Prosím prihláste sa alebo sa zaregistrujte.

Powered by AkoComment 2.0!