Install the Ring Size Checker
If you wish to use our ring size checker on your own site then please follow these easy instructions.
To be used legally, you must use the image included containing our
watermark.
We also require a link back to our site.
(https://www.chain-me-up.com.au)
1. Copy the following lines between the <head> & </head> tags in your web page.
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"/>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script
src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
#resizable {width: 200px; border:thin black solid;z-index:3; }
</style>
2. Copy the following lines between the <body> & </body> tags in your
web page where you want the checker to appear.
<div
id="resizable">
<img alt="ring size guide" src="images/ring_sizes-600.jpg"
style="width: 100%; height: 100%"/>
</div>
3. Copy the following line just above the closing </body> tag.
<script>$( "#resizable" ).resizable({ aspectRatio: true });</script>
4. Save the image
file to your images folder ( i.e. www.mysite.com/images ) or if you
use another folder, change the src tag in section 2 to match.
You
can change the initial size of the image by changing the width tag in
section 1.
Note: DO NOT set both width and
height, the image must maintain it's aspect ratio to work correctly.