jQuery BeautifulEyes Plugin Examples

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pharetra magna et fringilla commodo. Morbi sit amet dui consequat, placerat justo at, eleifend enim. Donec porttitor elementum placerat. Mauris gravida enim vel posuere luctus. Integer sit amet semper purus. Nunc semper mollis semper. Aenean semper vel quam sit.

Proin tempus, urna id lobortis accumsan, nulla orci ornare dolor, placerat tincidunt magna diam id augue. Integer elit lectus, viverra vel rhoncus et, imperdiet eget lacus. In vel lacus justo. Quisque blandit felis justo, ac commodo quam viverra vitae. Suspendisse posuere rhoncus mauris, vitae gravida tellus aliquet ac. Sed a leo laoreet orci lacinia aliquam in vel nisl. Sed pharetra mollis sodales. Praesent tristique, nulla vitae lobortis pharetra, tortor purus commodo odio, maximus feugiat mi risus hendrerit nulla. Duis varius elit mauris, id vehicula sem suscipit ac. Donec dapibus varius quam, euismod vehicula leo aliquet nec. Praesent aliquet diam at molestie dapibus. Phasellus eu elementum libero. Nam tellus dolor, viverra ac turpis eu, laoreet tempus enim. Proin lacinia arcu quis purus tempor aliquam. Suspendisse luctus erat non erat pretium scelerisque. Proin ac ultrices diam.

Vivamus viverra consectetur egestas. Aliquam erat volutpat. Mauris posuere pellentesque tincidunt. Duis in leo condimentum, vulputate leo a, laoreet nibh. Morbi porta mattis molestie. Fusce eget elementum justo, et ornare mi. Nunc consequat cursus gravida. Duis efficitur ac tortor id aliquet. Sed volutpat facilisis vulputate. Integer ut bibendum odio. Aenean vehicula tellus nec sem pharetra, sit amet posuere eros imperdiet. Morbi pulvinar neque vitae tortor tincidunt ultricies. Mauris mi tortor, porta quis blandit ac, facilisis sit amet diam. Nullam hendrerit nunc ac felis elementum vulputate. Etiam ultricies porta diam at aliquet.

Have to have an element that we can put the eyes in; in this case the td with id of example4

<td id="example4">
    <img src="images/stock-potato.jpg" alt="potato"  />
</td>

NOTE: the container where you are inserting the eyes must be able to contain absolute elements (e.g. give it a relative position)

#example4 {
    position: relative;
}

Create the eyes as needed

$('#example4').makeEye({ size: 24, position: { x: 78, y:82 }, eyeBallSize: 8 });
$('#example4').makeEye({ size: 24, position: { x: 118, y:82 }, eyeBallSize: 8 });

size = how big the eye is (in px)
position = where the eye will be centered
eyeBallSize = the size of the eye ball (default is 4)

Passing only the defaults

$('#example5').makeEye({ size: 18, position: { x: 138, y:92 } });
$('#example5').makeEye({ size: 18, position: { x: 168, y:92 } });

Making some BIG eyes

$('#example6').makeEye({
    size: 30,
    position: { x: 150, y:135 },
    eyeBallSize: 15,
    borderWidth: 4
});
$('#example6').makeEye({
    size: 30,
    position: { x: 207, y:135 },
    eyeBallSize: 15,
    borderWidth: 4
});

borderWidth = the width of the line around the outside of the eyes