Seamless Image

About

The jquery.lx.seamlessImage plug-in is a JQuery plug-in that replaces a given <IMG> tag with a dynamic, tiled display of the image. This is useful for previewing seamless textures at various resolutions.

Download : current (compiled) | 0.2.1, 0.2.0

Table of Contents

Demonstration

Use the slider below the image to control the number of tiles of the image to display.

Note: this uses the HTML5 <input type="range" /> element. As there are currently no known users of this plug-in other than myself, I have not added support older browsers that do not natively handle this element. Please let me know if I should!

Usage

Basic Usage

Insert a regular IMG in the HTML. 

<img class="seamlessImage" src="test-image.png" />

Similar to most JQuery plug-ins, then call the seamlessImage() function on the selected element(s) to add the tileable image UI. 

$(".seamlessImage").seamlessImage();

Options

Also similar to most JQuery plug-ins, an associative array may be passed in as options. 

$(".seamlessImage").seamlessImage({ count : 4 });

The currently available options are as follows:

count

The number of tiles to display in the canvas along one axis. 1 would display the image "regularly" within the canvas. A value of 2 would display the image at 50% resolution such that it would tile twice horizontally and vertically to fill the canvas. The default value is 1.

rotation

The rotation, in degrees, to display the tiled image at. The default is 0.

ui

Controls whether or not the UI slider is generated. This is mainly useful for displaying a static tiled image, thus the count option will likely be set to a value of than 1 when setting this option to false. The default value is true.

sliderMax

Controls the maxium number of tiles (i.e. count) to allow for on the inserted UI slider. The default value is 4.

animate

If set to true and the initial count is not equal to 1, then the seamless image view will gradually transition from a view of count = 1 to the specified count parameter. This can be used to avoid image "jumps" when converting from a static view to a seamless tiled view.

Source

Future Work