Galleria Galleria is a content gallery widget.

Default

  • Galleria 1 Description
  • Galleria 2 Description
  • Galleria 3 Description
  • Galleria 4 Description
  • Galleria 5 Description
  • Galleria 6 Description
  • Galleria 7 Description
  • Galleria 8 Description
  • Galleria 9 Description
  • Galleria 10 Description
  • Galleria 11 Description
  • Galleria 12 Description

Content

  • Galleria 1 Description
    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.
  • Galleria 2 Description
    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.
  • Galleria 3 Description
    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.
  • Galleria 4 Description
    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.
  • Galleria 5 Description
    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.
  • Galleria 6 Description
    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
$('#images').puigalleria();
                                
<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>
                                
Name Type Default Description
panelWidth integer 600 Width of the content panel.
panelHeight integer 400 Height of the content panel.
frameWidth integer 60 Width of the filmstrip frames.
frameHeight integer 40 Height of the filmstrip frames.
showFilmstrip boolean true Defines visibility of filmstrip.
autoPlay boolean true Images are displayed with a slideshow in autoPlay mode.
transitionInterval integer 4000 Time in milliseconds between each slide in autoPlay mode.
effect string fade Name of animation to use on transitions.
effectSpeed integer 250 Duration of animation in milliseconds.
effectOptions object {} Settings for effect, refer to jQuery UI effect api for available options per effect.
showCaption boolean true Displays information retrieved from title and alt attributes of images in content caption.
customContent boolean false In custom content mode, galleria displays content next to the image element instead of the image itself.

No events.

Name Parameters Description
select index: Index of the item. Selects item with given index.
startSlideshow - Starts auto play.
stopSlideshow - Stops auto play.
isSlideshowActive - Returns true if auto play is active.
prev - Selects next item.
next - Selects previous item.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#images').puigalleria('select', 1);
                                
<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>