<h3 style="margin-top:0">Manual</h3>
<a:commandButton type="button" onclick="PF('switcher').previous();"
    icon="ui-icon-circle-triangle-w" id="prev"/>
<a:commandButton type="button" onclick="PF('switcher').next();"
    icon="ui-icon-circle-triangle-e" id="next"/>

<a:imageSwitch effect="wipe" widgetVar="switcher" id="manuelSwitcher"
    slideshowAuto="false">
    <ui:repeat value="#{imagesView.images}" var="image" id="manuelSwitcherImages">
        <a:graphicImage name="/demo/images/nature/#{image}" id="image"/>
    </ui:repeat>
</a:imageSwitch>

<h3>Fade</h3>
<a:imageSwitch effect="fade" id="fadeEffect">
    <ui:repeat value="#{imagesView.images}" var="image" id="fadeEffectImages">
        <a:graphicImage name="/demo/images/nature/#{image}" id="image" />
    </ui:repeat>
</a:imageSwitch>

<h3>Zoom</h3>
<a:imageSwitch effect="zoom">
    <ui:repeat value="#{imagesView.images}" var="image">
        <a:graphicImage name="/demo/images/nature/#{image}" />
    </ui:repeat>
</a:imageSwitch>

<h3>TurnDown</h3>
<a:imageSwitch effect="turnDown">
    <ui:repeat value="#{imagesView.images}" var="image">
        <a:graphicImage name="/demo/images/nature/#{image}" />
    </ui:repeat>
</a:imageSwitch>

<h3>Shuffle</h3>
<a:imageSwitch effect="shuffle">
    <ui:repeat value="#{imagesView.images}" var="image">
        <a:graphicImage name="/demo/images/nature/#{image}" />
    </ui:repeat>
</a:imageSwitch>

<h3>Dialog Integration</h3>
<a:commandButton type="button" value="Show" onclick="PF('dlg').show()" icon="ui-icon-extlink"/>

<a:dialog header="Images" widgetVar="dlg" modal="true"
    draggable="false" resizable="false">

    <a:imageSwitch effect="fade">
        <ui:repeat value="#{imagesView.images}" var="image">
            <a:graphicImage name="/demo/images/nature/#{image}" />
        </ui:repeat>
    </a:imageSwitch>
</a:dialog>