Úvodní strana \ Joomla \ Návody \ Zobrazení modulu v lightboxu

Zobrazení modulu v lightboxu

Pondělí, 15 Listopad 2010 18:58

joomla lightbox Lightbox se dnes využívá na webových stránkách poměrně hojně. Hlavní využití nachází v obrazových galeriích a prohlížečích, méně se už ale ví, že v něm lze zobrazovat různé html elementy, formuláře, celé bloky kódu. Dnes si ukážeme jak zobrazit joomla moduly v lightboxu.

Budeme potřebovat trochu znalostí html programování, ale podle ukázek to určitě zvládne i laik. Jako první si stáhneme všechny potřebné soubory. Modul budeme zobrazovat v colorboxu, zdrojové soubory a ukázky si můžete prohlédnout na jejich domovské stránce. Tento plugin je psán pro jQuery framework, proto budeme potřebovat samotný framework, js soubor s coloboxem, css soubor colorboxu a obrázky stínu a nahrávání. Obrázky nahrajeme do umístění templates/vase_sablona/images.

Pokud máme vše staženo, otevřeme si soubor index.php používané šablony a do hlavičky vložíme potřebné linky na scripty a css. Kód může vypadat následovně.

<link rel="stylesheet" href="/<?php echo $this->baseurl ?>/templates/vas_template/css/colorbox.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="/<?php echo $this->baseurl ?>/templates/vas_template/js/jquery.colorbox.js"></script>

Jak je vidět jQuery jsme si stáhli z googlu, doporučuji ale využít souborů na vlastním serveru. Nyní se přesuneme na konec šablony a před tag <body> vložíme následující kód:

<div style='display:none'>

 <div id="cbox" style="padding:10px; ">
 <jdoc:include type="modules" name="user5" style="none" />

 </div>
 </div>

Nezapomeneme se ujistit že pozice user5 existuje v souboru templateDetails.xml. Pokud ne zvolíme jinou nebo ji do souboru doplníme. Nyní vložíme kamkoliv do šablony (může být i v článku) odkaz, span, nebo div s třídou color. Já jsem využil colorbox pro zobrazení přihlášení, proto jsem do hlavičky šablony vložil odkaz na přihlášení:

<a href="javascript:void(0);" class="color">Přihlásit</a>

a do hlavičky, nebo kamkoliv do těla stránky ještě přidáme tento kus kódu:

<script>
 $(document).ready(function(){
 $(".color").colorbox({width:"80%", inline:true, href:"#cbox"});
 });
 </script>

Nyní by vše mělo být tak jak má. Stačí jen jít do správce modulů vybrat modul, který chceme mít v colorboxu, zvolit mu pozici user5 (nebo tu kterou jsme použili) a modul uložit, nyní stránky obnovíme a vyzkoušíme. Výsledek může vypadat následovně:

colorbox

Všechny funkce modulu zůstávájí plně funkční. Takže se uživatel může normálně přihlásit. Po přihlášení se lightbox zavře, ale uživatel zůstává přihlášen. Pokud opětovně klikne uživatel na tlačítko vyvolávající colorbox okno, zobrazí se tlačítko na odhlášení stejně jako u normálního použití modulu přihlášení.

Komentáře (2)

Co konkrétně Vám nefunguje? Udělal jste vše dle článku? Máte odkaz?

Ať dělám co dělám, nemůžu to dát do chodu..