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(
      {
        links: '#myGallery a',
        zIndex: 1
      }
    ).render();
  }
);

Examples

Image Viewer