jQuery Picturetape
Tape your pictures to any DOM element.

1. Introduction

From time to time designers might want you to add images to your website. But they want to add them to the oddest places - at least you think so. There is nothing wrong with the place the pictures shall be added, but you know that with pure HTML/CSS the positioning might be very hard. This is why we created Picturetape.

With Picturetape you can tape your pictures to any DOM element in a very flexible way.

2. Quickstart

1. reference the jQuery javascript
2. reference jQuery Picturetape javascript
3. initialize your first image

$(document).ready(function() {
	$('#custom-element').picturetape({
		src: 'path/to/image.png'
	});
});

3. Sandbox

Use this sandbox to play around. Just fill in some values.

4. Usage

Positioning

Using Relative Positioning

Use the options x and y to position the image using relative/percent values.

This example tapes the top-left corner of the image to the center of #custom-element:

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	x: 50,
	y: 50
});

Using Absolute Positioning

Use the options offset_x and offset_y to position the image using pixel values.

With the options of this example you can tape the image to the #custom-element with a x-offset of 10 pixel and a y-offset of 15 pixel:

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	offset_x: 10,
	offset_y: 15
});

Using Both in Combination

Combine x, y, offset_x and offset_y to unleash the power of Picturetape.

This example will tape the image to the right middle of #custom-element and offset it by (10,15) pixels afterwards.

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	x: 100,
	y: 50,
	offset_x: 10,
	offset_y: 15
});

Changing the Image Anchor

Usually images are positioned using the top-left corner as anchor. With Picturetape you can change this behaviour using the anchor_x and anchor_y values. Those are specified using percentual values.

Using the values of this example the center of the image will be taped to the #custom-element. As we did not specify anything else this will be the top-left corner:

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	anchor_x: 50,
	anchor_y: 50
});

You can use all options in combination to position your pictures as you wish.

Specifying the HTML Id Attribute

Specify the id of the image using the id option.

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	id: 'unique-id'
});

Specifying HTML Classes

To specify classes the image will receive add an array with class names via the classes option.

$('#custom-element').picturetape({
	src: 'path/to/image.png',
	classes: ['class-1', 'class-2']
});

5. API Reference

Function

$(selector).picturetape(options);

Options

The only required option is the src option. But without positioning information you would not need Picturetape. So consider using them.

src

A valid URL of the image that will be loaded and inserted into the DOM.

(0-100) x

A numeric value to specify the x position relative to the parents width.
0 would be left, 50 would be center, 100 would be right.

(0-100) y

A numeric value to specify the y position relative to the parents height.
0 would be left, 50 would be center, 100 would be right.

(-n..+n) offset_x

A numeric value to specify a absolute pixel offset on the x-axis. Negative values are possible.

(-n..+n) offset_y

A numeric value to specify a absolute pixel offset on the y-axis. Negative values are possible.

(0-100) anchor_x

A numeric value to specify the anchor of image relative to its width.
0 would be left, 50 would be center, 100 would be right.

(0-100) anchor_y

A numeric value to specify the anchor of image relative to its height.
0 would be top, 50 would be middle, 100 would be bottom.