Image Viewer

<div id="myGallery">
  <a href="https://alloyui.com/image-viewer/img/1-large.jpg" title="Resting on the rocks.">
    <img class="picture" src="https://alloyui.com/image-viewer/img/1.jpg" />
  </a>
  <a href="https://alloyui.com/image-viewer/img/2-large.jpg" title="Grand finale teams">
    <img class="picture" src="https://alloyui.com/image-viewer/img/2.jpg" />
  </a>
  <a href="https://alloyui.com/image-viewer/img/3-large.jpg" title="Looking at the landscape">
    <img class="picture" src="https://alloyui.com/image-viewer/img/3.jpg" />
  </a>
  <a href="https://alloyui.com/image-viewer/img/4-large.jpg" title="The real champion winners, Brazilian team!">
    <img class="picture" src="https://alloyui.com/image-viewer/img/4.jpg" />
  </a>
</div>

YUI().use(
  'aui-image-viewer',
  function(Y) {
    new Y.ImageViewer(
      {
        caption: 'Liferay Champion Soccer',
        captionFromTitle: true,
        centered: true,
        imageAnim: {
         duration: 1,
         easing: 'easeIn'
        },
        intervalTime: 2,
        links: '#myGallery a',
        playing: true,
        preloadAllImages: true,
        preloadNeighborImages: true,
        showInfo: true,
        showPlayer: true,
        zIndex: 1
      }
    ).render();
  }
);

Examples

Image Viewer