First, copy the Images folder to your project's directory. This folder contains the icons for the zoom and navigator buttons.
On the HTML page you want to embed a Quadrant Image Viewer, reference the following files:
Quadrant.css references the images in the Images folder you just added to your project. You may need to confirm the paths match.
Add the HTML code to your web page to declare an instance of the Quadrant Image Viewer:
<div id="Quadrant" class="quadrant" data-controller="Quadrant" data-name="Component" data-image-name="i_s_" data-image-width="800" data-image-height="534" data-thumbnail-name="finder-thumbnail.jpg" data-thumbnail-width="115" data-thumbnail-height="77">
<div class="canvas-container">
<div class="canvas" data-controller="Quadrant" data-name="Canvas" data-image-folder="Images/Tiles/"></div>
</div>
<div class="navigator" style="visibility: hidden;" data-controller="Quadrant" data-name="Navigator" data-image-folder="Images/" data-image-name="i_s_" data-image-width="800" data-image-height="534"></div>
<div class="controls">
<div class="dialog-button" title="View in high resolution" onclick="alert('Popup goes here!');"></div>
<div class="zoom-button small selected" title="View small size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_s_" data-image-width="800" data-image-height="534"></div>
<div class="zoom-button medium" title="View medium size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_m_" data-image-width="1024" data-image-height="684"></div>
<div class="zoom-button large" title="View large size" data-controller="Quadrant" data-name="ZoomLevel" data-image-name="i_l_" data-image-width="2048" data-image-height="1367"></div>
<div class="navigator-button" title="Navigator" data-controller="Quadrant" data-name="NavigatorButton"></div>
</div>
</div>
Finally, add the following line of JavaScript to your project. This code needs to run after the page has loaded, so you can place it at the bottom of you body or in a body onload delegate.
new sci.quadrant.QuadrantController(document.getElementById('Quadrant'));
You can always refer to the Example page included in this project for guidance.
Quadrant will use the data- attributes to determine how to display your image.
data-controller="Quadrant" data-name="Component"
The attributes in this HTML element are used to initialize the component.
data-image-name: In order to render your image, Quadrant generates a grid where it sticks the JPG tiles that make up the whole image. These tiles need a name prefix which is specified in this attribute. In the included example, the prefix for the smallest version of the image is "i_s_".
data-image-width: This is the width of the entire image after assembled. In our example, the smallest image is 800px wide. We use the smallest version of the image and its properties to initialize the component on load.
data-image-height: This is the height of the entire image after assembled. In our example, the smallest image is 534px high. We use the smallest version of the image and its properties to initialize the component on load.
data-thumbnail-name: This is the file name of the image the Navigator component will use to help users find their location when moving around the image.
data-thumbnail-width: The width of the image to be used in the navigator component.
data-thumbnail-height: The height of the image to be used in the navigator component.
data-controller="Quadrant" data-name="Navigator"
The navigator element is used to display a component which helps the user move around the image. It is very handy when in very high zoom levels.
The data-image-name, data-image-width and data-image-height attributes should match the ones specified for the component mentioned above (Quadrant Component).
data-image-folder: The path to the folder in which the containing thumbnail to be used by the navigator. The value must end with a slash (/).
data-controller="Quadrant" data-name="ZoomLevel"
You can specify as many Zoom levels as you want. This project, however, only provides icons for only three. You will have to generate tiles for every zoom level. You can use the Image Slicer included in this project for that.
data-image-name: It is the name prefix used in the tiles for this zoom level. Tiles should always be JPGs.
data-image-width: The width of the entire image at this zoom level after assembled.
data-image-height: The height of the entire image at this zoom level after assembled.
View this topic here.