Вариант 1 (с эффектом, с компонентой YooTheme Widgetkit SpotLight)

<a href="/images/litebox.png" data-lightbox="on" data-spotlight=
"effect:bottom;"><img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" border="0"
width="55%" /><div class="overlay">
Вариант 1</div></a>


litebox
Вариант 1


Вариант 2 (без эффекта, с компонентой YooTheme Widgetkit SpotLight)

<a href="/images/litebox.png" data-lightbox="on" data-spotlight="on">
<img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" border="0" width="55%"
/></a>


litebox


Вариант 3 (без эффекта, с плагином RokBox)

<a href="/images/litebox.png" data-rokbox="" data-rokbox-size="640 480">
<img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" border="0" width="55%"
/></a>


litebox


Вариант 4 (с эффектом, с плагином RokBox)

<a href="/images/litebox.png" data-rokbox="" data-rokbox-caption=
"Вариант 4" data-rokbox-size="640 480"><img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox"
border="0" width="55%" /></a>


litebox


Вариант 5 (с эффектом видео, с плагином RokBox)

<a href="http://www.youtube.com/watch?v=z6n1lEHCFM0&amp;feature=
player_embedded" data-rokbox="" data-rokbox-caption="Вариант 5">
<img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" border="0" /></a>


litebox


Вариант 6 (через редактор JCE с расширением JCE MediaBox)
Видео и дополнительные настройки

<a class="jcepopup" href="/images/litebox.png" type="image" 
target="_blank"><img src="/images/litebox.png" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" alt="litebox" title="litebox" border="0"
/></a>


litebox


Вариант 7 (через редактор JCE с установкой класса jcebox)
Как установить класс

<a class="jcebox" href="/images/litebox.png"><img src="/images/litebox.png" alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  
border="0" /></a>


litebox


Вариант 8 (через редактор WYSIWYG с установкой класса modal)
Для этого необходимо вставить в index.php своего шаблона строку:

<?php JHTML::_('behavior.modal'); ?>


Затем вставить код в материал

<a class="modal" href="/images/litebox.png"><img src="/images/litebox.png" alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  
border="0" /></a>


litebox


Вариант 9 (через редактор WYSIWYG с помощью скрипта HighSlide)
Для этого необходимо вставить в index.php своего шаблона строки:

<script type="text/javascript" src="/highslide/highslide-full.js"></script>
<link rel="stylesheet" type="text/css" href="/highslide/highslide.css" />

<script type="text/javascript">
hs.graphicsDir = '/highslide/graphics/';
hs.align = 'center';
hs.transitions = ['expand', 'crossfade'];
hs.outlineType = 'rounded-white';
hs.wrapperClassName = 'controls-in-heading';
hs.fadeInOut = true;
//hs.dimmingOpacity = 0.75;

// Add the controlbar
if (hs.addSlideshow) hs.addSlideshow({
//slideshowGroup: 'group1',
interval: 5000,
repeat: false,
useControls: true,
fixedControls: false,
overlayOptions: {
opacity: 1,
position: 'bottom center',
hideOnMouseOut: false
}
});
</script>


Затем вставить код в материал

<a class="jcebox" href="/images/litebox.png"><img src="/images/litebox.png" alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  border="0" width="55%" /></a>


litebox



Ещё одна особенность данного скрипта, это возможность организовать слайдшоу. Для этого нужно вставить код в материал

<table style="width: 100%;" border="0">
<tbody>
<tr>
<td><a class="highslide" href="/images/1.jpg" onclick="return hs.expand(this,{ outlineType: 'rounded-white' })"> <img src="/images/1.jpg" alt="litebox" title="litebox" width="180" /> </a></td>
<td><a class="highslide" href="/images/2.jpg" onclick="return hs.expand(this,{ outlineType: 'rounded-white' })"> <img src="/images/2.jpg" alt="litebox" title="litebox" width="180" /> </a></td>
<td><a class="highslide" href="/images/3.jpg" onclick="return hs.expand(this,{ outlineType: 'rounded-white' })"> <img src="/images/3.jpg" alt="litebox" title="litebox" width="180" /> </a></td>
</tr>
</tbody>
</table>



Вариант 10 (через редактор WYSIWYG с помощью скрипта LiteBox)
Для этого необходимо вставить в index.php своего шаблона строки:

<script type="text/javascript" src="/litebox/litebox.js"></script>
<link rel="stylesheet" type="text/css" href="/litebox/litebox.css" />


Затем вставить код в материал

<a href="/images/litebox.png" rel="lightbox"><img src="/images/litebox.png" alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  alt="litebox" title="litebox"  
border="0" width="55%" /></a>


litebox

P.S. Лично я использую последний метод :) Кроме того, некоторые варианты могут не работать в старых версиях браузеров.