secure website
Warranties
Payment Options

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.

Recently viewed