Mambot JCE Utility

Zásuvný modul JCE Utilities je navrhnutý aby poskytol riešenie pre vytváranie vyskakovacích obrázkov a článkov, bez otvárania určeného okna prehliadača.

Ako to funguje?

Po načítaní stránky (toto je dôležitá podmienka), kód mambota prehľadá obsah stránky na výskyt mena triedy 'jcebox' a takýmto odkazom priradí udalosť onclick. Táto udalosť spúšťa inú funkciu skriptu, ktorá vytvorí vyskakovacie okno a prepojí atribút href (zvyčajne cesta obrázku) ako obsah tohoto vyskakovacieho okna.

Vyskakovacie okno obrázkov

Najprv použite Image Manager, pomocou ktorého vložte do článku obrázok, pokiaľ možno malú ukážku obrázku. Potom vyberte obrázok v editore kliknutím na neho, a otvorte dialóg dialóg Advanced Link. V poli URL zadajte cestu k obrázku, ktorý má byť zobrazený vo vyskakovacom okne. V poli Titulok zadajte text, ktorý bude použitý ako titulok. V záložke Advanced, do poľa Zoznam tried, zadajte jcebox. Kliknite na vložiť a uložte článok.

Takto ste jednoducho vytvorili samostatný vyskakovací obrázok. Vytvorenie galérie obrázkov nie je oveľa ťažšie, ale vyžaduje použiť zobrazenie HTML.

Zopakujte predchádzajúci krok pre každý obrázok v galérii. Odporúčam použiť tabuľkové rozloženie obrázkov v článku. Po vytvorení všetkých samostatných vyskakovacích okien, otvorte zobrazenie HTML. Nájdite element 'a' pre každý obrázok, mal by vezarať nejako takto:

<a href="path/to/some/image" class="jcebox" title="Some Image"><img 
src="path/to/some/thumbnail" border="0" width="150" height="120"  /></a> 

Hocikde do elementu 'a' vložte atribút 'rel' a nastavte hodnotu tohoto atribútu rovnakú pre všetky obrázky v galérii. Táto hodnota je použitá skriptom na identifikáciu priradenia obrázkov do galérie. Napríklad:

<a rel="my_gallery" href="path/to/some/image" class="jcebox" title="Some Image"><img 
src="path/to/some/thumbnail" border="0" width="150" height="120"  /></a>
...
<a rel="my_gallery" href="path/to/some/other/image" class="jcebox" title="Some Other 
Image"><img src="path/to/some/other/thumbnail" border="0" width="150" height="120"  /></a> 

Vyskakovacie okno textu

Je možné vytvoriť aj vyskakovacie okno pre článok (alebo aj inú stránku). Postup je rovnaký ako pre obrázok, s dvomi ďalšími krokmi. Plugin AdvLink 1.1.x SE má pripravený dialóg pre vytvorenie takéhoto vyskakovacieho okna pomocou niekoľkých kliknutí.

Vytvorte odkaz bežným spôsobom, tj: vyberte nejaký text, otvorte dialóg Advanced Link a buď zvoľte z rozbaľovacieho zoznamu článok, alebo zadajte adresu do poľa URL. Na koniec URL pridajte hodnoty pre šírku a výšku vyskakovacieho okna, napríklad:

&bw=400&bh=400

V záložke Advanced zadajte do poľa 'Class List' hodnotu 'jcebox'. Dôležité! Ak pripájate článok Joomly, nahraďte časť odkazu index.php týmto index2.php aby ste predišli načítaniu celej titulnej stránky vo vyskakovacom okne. Kliknite na vložiť. Tu si môžete pozrieť ukážku vyskakovacieho okna, tento odkaz vyzerá takto:

<a href="index2.php?option=com_content&task=view&id=32&Itemid=13&bw=400&bh=400" 
class="jcebox">here</a> 

Tooltipy

Pre každý element, ktorý má atribút title a class takto: Zadajte elementu meno triedy 'jce_tooltip' a nejaký titulok do atribútu title. Tooltip môže mať text hlavičky a tela, tieto dve časti oddeľte pomocou dvoch dvojbodie - ::.

Tooltip používa tri triedy (prejdite myšou nad predchádzajúce slovo, pre zobrazenie tooltipu) z CSS súboru JCE Utilities. Tieto triedy riadia vzhľad okna tooltipu a môžete ich upraviť priamo alebo pridať upravenú verziu do CSS súboru svojej šablóny. Tie tiedy sú:

.tooltip {
  z-index: 9999;
  width: 180px;
  text-align:left;
  color: #000000;
  background-color:#ffffff;
  border:1px solid black;
  padding: 4px;
}

.tooltip h4 {
  font-weight: bold;
  font-size: 11px;
  margin: 0px;
}

.tooltip p {
  font-size: 11px;
}