Image Viewer

• Introduction
• Basic Example
• Real World Example

Allows users to view and navigate through a collection of images.

---

Getting Started

First load the seed and CSS files, if you haven't yet.

<script src="https://cdn.alloyui.com/3.0.1/aui/aui-min.js"></script>
<link href="https://cdn.alloyui.com/3.0.1/aui-css/css/bootstrap.min.css" rel="stylesheet"></link>

Then initialize AlloyUI and load the Image Viewer module.

YUI().use(
  'aui-image-viewer',
  function(Y) {
    // code goes here
  }
);

---

Using Image Viewer

Image Viewer uses images that are linked in the HTML:

<div id="myGallery">
  <!-- Image being displayed with Image Viewer -->
  <a href="image-1.jpg">
    <!-- Thumbnail of image to be displayed -->
    <img src="image-1-thumbnail.jpg" />
  </a>
  <a href="image-2.jpg">
    <img src="image-2-thumbnail.jpg" />
  </a>
  <a href="image-3.jpg">
    <img src="image-3-thumbnail.jpg" />
  </a>
</div>

Create a new instance of Image Viewer referecing the linked images in the HTML, and render it!

YUI().use(
  'aui-image-viewer',
  function(Y) {
    new Y.ImageViewer(
      {
        links: '#myGallery a'
      }
    ).render();
  }
);

---

Configuring Image Viewer

Parameters can be passed into your instance of Image Viewer to change attributes such as image captions, image positioning, and when images within the viewer are loaded.

YUI().use(
  'aui-image-viewer',
  function(Y) {
    new Y.ImageViewer(
      {
        caption: 'Liferay Champion Soccer',
        //captionFromTitle uses the DOM title attibute as image caption
        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();
  }
);