<script type="text/javascript">
$(function() {
$('#images').puigalleria({
panelWidth: 500,
panelHeight: 313
});
$('#customcontent').puigalleria({
autoPlay: false,
customContent: true,
showCaption: false,
panelWidth: 420,
panelHeight: 200,
frameWidth: 100,
frameHeight: 60,
effect: 'fold',
effectSpeed: 500
});
});
</script>
<div id="images">
<ul>
<li><img src="resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1 Description" title="Galleria 1"/></li>
<li><img src="resources/demo/images/galleria/galleria2.jpg" alt="Galleria 2 Description" title="Galleria 2"/></li>
<li><img src="resources/demo/images/galleria/galleria3.jpg" alt="Galleria 3 Description" title="Galleria 3"/></li>
<li><img src="resources/demo/images/galleria/galleria4.jpg" alt="Galleria 4 Description" title="Galleria 4"/></li>
<li><img src="resources/demo/images/galleria/galleria5.jpg" alt="Galleria 5 Description" title="Galleria 5"/></li>
<li><img src="resources/demo/images/galleria/galleria6.jpg" alt="Galleria 6 Description" title="Galleria 6"/></li>
<li><img src="resources/demo/images/galleria/galleria7.jpg" alt="Galleria 7 Description" title="Galleria 7"/></li>
<li><img src="resources/demo/images/galleria/galleria8.jpg" alt="Galleria 8 Description" title="Galleria 8"/></li>
<li><img src="resources/demo/images/galleria/galleria9.jpg" alt="Galleria 9 Description" title="Galleria 9"/></li>
<li><img src="resources/demo/images/galleria/galleria10.jpg" alt="Galleria 10 Description" title="Galleria 10"/></li>
<li><img src="resources/demo/images/galleria/galleria11.jpg" alt="Galleria 11 Description" title="Galleria 11"/></li>
<li><img src="resources/demo/images/galleria/galleria12.jpg" alt="Galleria 12 Description" title="Galleria 12"/></li>
</ul>
</div>
<div id="customcontent">
<ul>
<li>
<img src="resources/demo/images/galleria/galleria1.jpg" alt="Galleria 1 Description" title="Galleria 1"/>
<div>
Lorem ipsum dolor sit amet, explicabo sapien per elit et, sed sed non sit habitant elit leo, sollicitudin vitae pellentesque, blandit metus at donec. Aenean wisi tristique nulla suspendisse.
Auctor non nam, ultrices nec penatibus ligula dapibus, neque congue scelerisque, dolor nec amet orci eleifend curabitur, morbi in. Sit feugiat non.
A in nunc massa non, nihil pellentesque et laoreet porta lobortis, vel vivamus blandit et. Iaculis ut praesent ipsum praesent mauris, quisque elementum mi donec mi, etiam diam mauris viverra.
Scelerisque faucibus eget pellentesque lacus, etiam eu dictum potenti risus ut aliquam, sed elit.
</div>
</li>
<li>
<img src="resources/demo/images/galleria/galleria2.jpg" alt="Galleria 2 Description" title="Galleria 2"/>
<div>
Per augue rhoncus, pede sed nec a quis amet. Sem fusce felis non vulputate, eius vivamus malesuada montes vitae viverra arcu, mauris justo vel fermentum metus urna.
Urna risus, vel mollis morbi in ligula, et diam dui, urna turpis turpis ultricies metus tempus, at magnis tempus maecenas.
Vel sociosqu elit volutpat, mollis neque quis ac ac, dignissim lorem ipsum nullam, penatibus id, tempor cum mauris.
</div>
</li>
<li>
<img src="resources/demo/images/galleria/galleria3.jpg" alt="Galleria 3 Description" title="Galleria 3"/>
<div>
Morbi lectus nulla quis maxime. Elit quis a cras eleifend duis, in amet lacus ultricies.
Nonummy sollicitudin, tristique suspendisse cras mauris amet nec, nulla felis velit faucibus tortor, pellentesque dignissim.
Proin lorem, felis rutrum, pretium sed volutpat nulla urna sit, tellus pellentesque curabitur mi sed, dui arcu etiam vivamus donec nullam.
Sit aliquam et justo tellus, porta nec, potenti in arcu wisi vitae.
Magna in, sociosqu sapien, justo dolores at vivamus tristique luctus in, parturient sapien semper cras fermentum.
</div>
</li>
<li>
<img src="resources/demo/images/galleria/galleria4.jpg" alt="Galleria 4 Description" title="Galleria 4"/>
<div>
A accumsan in facilisi purus morbi, in ultricies vehicula, tellus curabitur tempor, justo excepturi luctus tristique odio.
Ullamcorper vel, sit et at nulla mauris, rutrum pharetra libero justo pellentesque nec. Lectus sodales iaculis viverra.
In rutrum, suscipit a id sed leo montes, integer sit sapien non morbi dolor, erat ipsum iaculis velit aliquam egestas massa, etiam iaculis justo.
Arcu dui suspendisse fringilla, mi nibh, tempor quam quis lectus ut mi.
</div>
</li>
<li>
<img src="resources/demo/images/galleria/galleria5.jpg" alt="Galleria 5 Description" title="Galleria 5"/>
<div>
Habitasse vulputate sodales pharetra vitae. Arcu libero ut donec porta sed sapien, metus aliquam qui integer et amet, dui adipiscing justo vel semper.
Dictumst ut, vestibulum nisl lorem interdum, integer auctor, sem scelerisque, eget in nunc ac sit scelerisque.
</div>
</li>
<li>
<img src="resources/demo/images/galleria/galleria6.jpg" alt="Galleria 6 Description" title="Galleria 6"/>
<div>
Mauris at hendrerit velit. Fusce vel dignissim, penatibus faucibus ridiculus in auctor. Sodales placerat. Cras velit ipsum eu etiam malesuada congue.
Eros dui ante metus sit aliquam, praesent eros tempor mauris ut id wisi, metus erat facilisi egestas commodo ut at, elementum suspendisse rutrum mauris quis, justo aspernatur
</div>
</li>
</ul>
</div>