jQuery Pinit

a jQuery Pinterest plugin to automagically overlay 'Pin It!' buttons on your images

Demo

Usage

Just construct the jQuery object with the images that you want and, after these images are loaded, invoke the .pinit() method on it with a btnImgUrl parameter to specify the Url of the button graphics. The root of a relative url is the directory of the HTML page that include the jQuery Pinit script.

For example, to automagically assign the 'Pin It' Button to the above images the following code was used:

		<ul id="demo">
			<li><a href="http://www.flickr.com/photos/dalaka/61803030/" title="Pomegranate by dalaka, on Flickr"><img src="http://farm1.staticflickr.com/31/61803030_4d6d0c6536.jpg" width="500" height="375" alt="Pomegranate"></a></li>
			<li><a href="http://www.flickr.com/photos/krimsong/3137244461/" title="Pomegranate by Krimos, on Flickr"><img src="http://farm4.staticflickr.com/3179/3137244461_c2c2d9b65b.jpg" width="500" height="339" alt="Pomegranate"></a></li>
			<li><a href="http://www.flickr.com/photos/petunia21/1810881478/" title="Pomegranates by Petunia21, on Flickr"><img src="http://farm3.staticflickr.com/2036/1810881478_3e98226103.jpg" width="500" height="281" alt="Pomegranates"></a></li>
			<li><a href="http://www.flickr.com/photos/anton017/6782974205/" title="Pomegranate by Anton Cruz, on Flickr"><img src="http://farm8.staticflickr.com/7157/6782974205_8cf3fb496a.jpg" width="500" height="325" alt="Pomegranate"></a></li>
			<li><a href="http://www.flickr.com/photos/cbder/3020421960/" title="Chocolate-Pomegranate Torte by cbder, on Flickr"><img src="http://farm4.staticflickr.com/3230/3020421960_e9f0ebcffd.jpg" width="500" height="375" alt="Chocolate-Pomegranate Torte"></a></li>
			<li><a href="http://www.flickr.com/photos/deadcenter/157225218/" title="Pomegranates by deadcenter, on Flickr"><img src="http://farm1.staticflickr.com/76/157225218_af40b823a3.jpg" width="500" height="375" alt="Pomegranates"></a></li>
			<li><a href="http://www.flickr.com/photos/31241172@N08/3304886496/" title="pomegranate by SteenT, on Flickr"><img src="http://farm4.staticflickr.com/3478/3304886496_7f14b1335c.jpg" width="500" height="494" alt="pomegranate"></a></li>
		</ul>
		
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script src="js/mg-jquery-pinit.js"></script>
		
		<script>
			$(window).load(function() {
				$('ul#demo li:even img').pinit({btnImgUrl: 'img/ribbon-red-on-white.png'});
				$('ul#demo li:odd img').pinit({btnImgUrl: 'img/ribbon-white-on-blue.png'});
			});
		</script>
		
		
	});

If the pinned image has a title or an alt attribute they are used for a default pin description(The title has precedence over the alt).

Requirements

License

This software is released under the MIT License.

Download

The latest stable release is on the GitHub repository.

Support

Report any issues, bugs, suggestions and feedback on the GitHub Issue Tracker.

Source Code

On GitHub, of course.

Submit Your Button

If you have done your 'PinIt!' button and you'd love to share it, just make a pull request or contact me.

Limitations and Future Work

If the window is resized the buttons loose their alignment with respective images. I'll work on this issue later...maybe.

Credits

Thanks to MyGimpTutorial for its Create a Quick and Simple Web Ribbon tutorial.