JQuery Seamless Image Preview
I wrote a brief JQuery plug-in which transforms a normal <IMG> element into a dynamic, tiled version of the image with a slider for controlling the size of the image tiles.
Purpose
The purpose would be to preview quickly seamless textures. I wrote this mostly to get a bit more experience with HTML5 and JQuery.
I also like the idea of improving this enough that I could a site like OpenGameArt.org could use it for images tagged with ‘seamless’ – but we’ll see about that: it needs more polish before I would feel right contacting anyone over there.
Note: I’ve called this “version 0.2.0″ since this is really draft quality work: I haven’t written the docs (though the normal JQuery plug-in convention of $("#myimage").seamlessImage() will get you started pretty quickly), I haven’t done any unit testing (i.e. different layout scenarios, different browsers), there are some basic features that should probably be added, etc.
The absolutely minimal documentation is located here.
Demonstration
The demonstration below of the plug-in uses the Cobblestone.png from OpenGameArt.org. (The image was created by Saroman of the Wurm Online project).
Use the slider below the image to use the plug-in!
Implementation
- Uses the HTML5 “range” control to implement the slider
- The majority of the setup occurs on the “onLoad” callback of the Javascript Image object: this ensures the width and height are accurate during the setup. Otherwise, due to timing issues, the setup may occur while the image is still being loaded by the browser so the height/width will not be accurate and corrupt the setup.
- The JQuery $.data method is used to store the internal state of the plug-in
Conclusion
Anyway, good to get something demonstrable and graphical back up on the blog!
[...] the seamless image viewer I wrote the other day to preview the image in tiled [...]
Seamless Images
29 Nov 11 at 10:11