dunque, prendiamo come esempio example-2 che ci ho lavorato oggi per altri motivi...
1. prima di tutti assicurati di includere correttamente tutti i javascript e css
2. copia il codice html di example-2.html nel corpo della tua risorsa (disabilita tinymce così non fa casino con i tags, poi magari in futuro userai metodi più eleganti per incorporare il codice)
3. dove c'è il codice:
<div id="thumbs">
<ul class="thumbs noscript">
<li>
<a class="thumb" name="nomeslide" href="gallery/.../G001.jpg" title="imagetitle">
<img src="gallery/.../thumbs/G001.jpg" alt="titolo per fade" />
</a>
<div class="caption">
caption prima foto
</div>
</li>
<li>
<a class="thumb" name="nomeslide" href="gallery/.../G002.jpg" title="imagetitle">
<img src="gallery/.../thumbs/G002.jpg" alt="titolo per fade" />
</a>
<div class="caption">
caption seconda foto
</div>
</li>
ecc. ecc.
</ul>
sostituisci con:
<div id="thumbs">
<ul class="thumbs noscript">
[[!Gallery? &album=`1` &thumbTpl=`miniature-tpl`]]
</ul>
</div>
dove al numero dell'album sostituisci l'id dell'album che hai creato,
poi crei un chunk "miniature-tpl" con il codice:
<li>
<a class="thumb" href="[[+image]]" title="[[+name]]">
<img src="[[+thumbnail]]" alt="Title #16" />
</a>
<div class="caption">
[[+name]] OPPURE [[+description]]
</div>
</li>
in bocca al lupo!
.... altro che joomla, drupal, wordpress e compagnia bella
☆ A M B ☆
ora ho una base solida, grazie 1000 ancora, comunque per scrivere il codice ovviamente disattivo tinymce , uso il plugin codemirror ... se hai altre idee migliori che mi aiutino ancor di + , fammi sapere 
eppure ho impostato il div in height auto.