LSR IMG JS

(work in progress) Web previewer for Apple's Layer Source Representation (LSR) Image format. Made by Jeremiah Alexander @jeremiahalex

Usage

copy the /js and /img folders to your website route (you only need to keep the ls-highlight.png image)
Include the script files in your html

Create a div, and specify the LSR file in the data-image-src attribute.


<div class="lsr-img" width="100%" data-image-src="img/gmTest1.lsr" style="text-align: center;" >
	<img src="img/lsr-placeholder.jpg" class="lsr-placeholder" style="padding: 50px;" />
</div>

Optionally create a placeholder, by including an image with class lsr-placeholder inside the div. Placeholders images should be either the focussed or unfocussed size of your LSR Image for best results.

Specifying File Locations

If your web page is in a sub folder or you want the place the scripts of highlight image elsewhere then you'll need to the the script about this, like so...


<script type="text/javascript">
	LSR_IMG.setHighlightImage("../img/lsr-colored-highlight.png");
	LSR_IMG.setScriptFolder("../js/");
</script>



Settings



	
You can currently customise your LSR image display, using the following data-attributes on your div.


data-rounded

true/false to use rounded corners like Apple TV does. Default is false.


data-shadows

true/false whether drop shadows should be added. Default is true.


data-zoom

true/false whether an image should zoom in & out as it gains focus. Default is true.


data-animate

true/false whether the image should just display on an animated loop. Default is false.


data-responsive

true/false whether the image should scale to the size of the containing div. Default is false.