Instance Settings

A separate Relationships instance is created for each targetted division and has its own settings:

$(selector).relationships({...});

description | links | onSelect | opacity | set1 | set2

NameTypeDefaultComments
opacitynumber20 The percentage (0 to 100) to which icons are faded when they are not selected.
For comparison: 0% 0%, 10% 10%, 20% 20%, 50% 50%, 100% 100%.
set1object{} Details about the contents of the first set of items. See set settings below.
set2object{} Details about the contents of the second set of items. See set settings below.
int[][2]null The relationships between items in the first and second sets. This is an array of arrays of two digits, being the indexes of related items from set one and two. Indexes start at zero.
For example, [[0, 0], [1, 0]] connects the first two items from the first set with the first item in the second set.
descriptionstring'' The description for this relationship - displayed as a title.
onSelectfunctionnull A callback triggered when an icon is selected. The function receives the set number (1 or 2), the item index within that set, and the label for the icon as parameters. this refers to the relationships container.
onSelect: function(setId, itemId, label) {
	alert('You chose ' + label + ' (' + setId + '/' + itemId + ')');
}

Set Settings

NameTypeDefaultComments
imagesstringnull The location of the image file that depicts the items in this set. The image is a horizontal composite of all the item images with each item being associated with the matching position (by default). For example, this image is used for the integers example: Composite integers image.
imageSizeint[2]null The size (width and height) of each item image within the images above. For example, the value for the image above is [25, 29].
itemsstring[] or object[]null The item descriptions for display. If using a String[] that just contains the descriptions, then the images for these items are assumed to match their position in this array. Alternately, use an Object[] to specify the description and imageIndex for each item.
['Internet Explorer', 'Firefox', ...]
[{description: 'Windows', imageIndex: 6}, ...]

Functions

destroy | option (get) | option (set) | setDefaults

SignatureReturnsComments
$.relationships.setDefaults(settings)void Update the default instance settings to use with all relationships instances.
$(selector).relationships('option', options)jQuery object Update the settings for the relationships instance(s) attached to the given div(s).

options (object) the collection of new settings.

$(selector).relationships('option', {opacity: 30, description: 'Items'});

Since 1.3.0 - previously you used the 'change' command.
$(selector).relationships('option', name, value)jQuery object Update a particular setting for the relationships instance(s) attached to the given div(s).

name (string) the name of the setting to change;
value (any) the new value of that setting.

$(selector).relationships('option', 'opacity', 30);

Since 1.3.0.
$(selector).relationships('option', name)object or any Retrieve one or all of the current settings for the first relationships instance attached to the given div(s).

name (string, optional) the name of the setting to retrieve; omit for all settings.

var settings = $(selector).relationships('option');
var opacity = $(selector).relationships('option', 'opacity');

Since 1.3.0.
$(selector).relationships('destroy')jQuery object Remove the relationships functionality from the given div(s).

Styling

The structure of the Relationships content is shown below, allowing you to apply additional CSS styling to your implementations. The outermost div is the one to which the Relationships functionality is applied.

<div id="myRelationships" class="is-relationships">
	<div class="relationships-set1">
		<span>icon</span>...
	</div>
	<div class="relationships-set2">
		<span>icon</span>...
	</div>
	<div class="relationships-description">description</div>
</div>