Lightbox

od (August 3, 2009 7:30:20 PM)

Dobrý den,

Visual PHP™ samozřejmě nemůže obsahovat naprosto všechny efekty, kterými lze zobrazit obsah stránek. Systém je ale natolik univerzální, že lze použít libovolný skript, který sama neobsahuje (ať již Vaše vlastní řešení, nebo skripty třetích stran).

Použití těchto skriptů je obdobné jako při programování stránek klasickým způsobem, rozdíl je pouze v několika použitých funkcích.

Kontrétně ve Vašem případě jde o použití knihovny FaceBox (jedná se o jednu z mnoha úprav původního lightboxu), kterou si můžete stáhnout na těchto stránkách: http://www.famspam.com/facebox/

1. Stažení zdrojového kódu

Je potřeba stáhnout si zdrojové kódy z výše uvedených stránek a nahrát je pomocí FTP do nějakého adresáře.

V tomto konkrétním případě je potřeba stáhnout si zdrojové kódy faceboxu a knihovnu jQuery a nahrát je například do adresáře /facebox/.

2. Přidání kódu do stránky

Dále je potřeba prostudovat si zdrojové kódy, manuál nebo ukázky, které třetí strana ke skriptům přiloží, abychom věděli, které soubory je potřeba přidat do HEAD sekce HTML stránky. Typicky jde o JavaScript a CSS soubory.

V tomto případě je dle tvůrce skriptu potřeba přidat do stránky tento kód:

<script src="/facebox/jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>

A dále je potřeba spustit JavaScript po načtení stránky:

jQuery(document).ready(function($) {
  $('a[rel*=facebox]').facebox()
}) 

Lze to provést dvěma způsoby:

1. vložení globálně do události onInit (lze použít i beforeShow) - tato varianta ale vloží kód i do stránek, kde není potřeba
   
2. vložení do layoutu nebo šablony pomocí ikonky PHP kódu - zde máme zajištěno, že kód se vloží pouze, když je třeba
   

V obou případech je potřeba vložit tento PHP kód:

addHeadHTML('<script src="/facebox/jquery.js" type="text/javascript"></script>
<link href="/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="/facebox/facebox.js" type="text/javascript"></script>', true);

addOnLoad("$('a[rel*=facebox]').facebox()", true);

Funkce addHeadHtml vkládá do HEAD sekce HTML stránky kód, který se jí předá jako parametr. Tato funkce navíc při vložení true do druhého parametru kontroluje, aby došlo k vložení pouze 1x v případě volání této funkce vícekrát (může nastat, pokud ji použijete v šabloně). Obdobně funguje funkce addOnLoad vkládající JavaScript, který se spustí po otevření stránky.

Poznámka: stažený soubor jquery-1.3.2.min.js jsme před FTP uploadem přejmenovali na jquery.js. Funkce addOnLoad je k dispozici od verze jádra 1.7.8.306. Ve starších verzích lze použít ekvivalent: getObject("HtmlPage")->addOnLoad("facebox", "$('a[rel*=facebox]').facebox()", true);

3. zobrazení obsahu

Dle ukázky tvůrce FaceBoxu je použití tohoto efektu následující:

1. pro zobrazení obrázku je potřeba použít klasický odkaz na cílový obrázek
   

   <a href="stairs.jpg" rel="facebox">text</a>

2. pro zobrazení DIVu se do atributu href vloží mřížka následovaná identifikátorem divu
   

   <a href="#info" rel="facebox">text</a>

3. pro zobrazení cizí stránky se opět použije klasický odkaz
   

   <a href="remote.html" rel="facebox">text</a>

U všech těchto variant je nutné použít atribut rel="facebox"

Pokud tedy chceme zobrazit DIV s textovými informacemi a chceme jej použít v šabloně, je nutné tento div v šabloně vytvořit. Dále je nutné zajistit unikátnost identifikátoru divu, čehož docílíme např. použitím [id], které obsahuje identifikátor záznamu, který bude vždy unikátní.

Šablona by mohla vypadat následovně:

<a href="#facebox_[id]" rel="facebox">Po kliknutí sem se zobrazí obsah DIVu</a>
<div id="facebox_[id]"><h1>[name]</h1>[description]</div>

Při zpracování šablony se za [id], [name] a [description] dosadí konkrétní hodnoty a po kliknutí se zobrazí obsah správného DIVu pomocí efektu FaceBox. Co bude uvnitř DIVu, tedy obsah, nebo formátování už záleží čistě na Vás.

Malý tip: Lze to samozřejmě použít i na obrázky pomocí komponenty Template Image. Náhledový obrázek vložíte do odkazu (resp. vytvoříte Template Image a obalíte jej správným odkazem na identifikátor DIVu) a do samotného DIVu vložíte další Template Image s jinými rozměry.

Upozornění při zapnutém SEO: Pokud nahrajete vlastní skripty do nového adresáře přímo v hlavním adresáři, a máte zapnuté SEO, je potřeba doplnit do souboru .htaccess vyjímku. Bez této vyjímky si bude systém myslet, že jde o SEO odkaz a ne o skuteřný adresář. Směřoval by proto na index webu a ne do daného umístění. Úpravu lze provést přímo pomocí FTP, nebo přes menu Nástroje -> Nastavení -> SEO -> .htaccess. Před poslední RewriteRule je potřeba vložit tento kód:

...
RewriteRule ^facebox/.*$ - [PT]
RewriteRule ^(.+)/ /index.php?seoParams=$1 [L,E=QUERY_STRING:$1]

od: (Technická podpora)

Lightbox

od (January 11, 2010 12:55:36 PM)

Tak ješte jednou, asi jsem to poslal někam do rootu supportu :-(
Nevíte, zda již bylo nalezeno řešení na přidání popisku do Lightboxu zobrazovaného z obrázku vloženého v editoru (nikoliv TI komponentou) ? Zůstalo to tu nezodpovězeno.

od: (Enterprise)