Adding Pinterest button to a lightbox

In this demonstration we will use slimbox 2, a lightbox 2 clone. Slimbox, like lightbox, and most its clones, uses the title attribute of a link to render a caption near the bottom of the frame, below the image. It is this title that we also use to add our Pinterest button. Using a link as title directly will not work, aside from the resulting title, which become the tool tip of the link, is ugly.

Slimbox is an image only lightbox.

Standard lightbox

This is how Slimbox is used.

<a href="http://kahimyang.info/resources/Barilla.jpg" rel="lightbox" 
	title="Barilla was the first coin struck in the country.">
	<img src="http://kahimyang.info/resources/s-Barilla.jpg"
		width="180" border="0" alt="How to add pinterest to a lightbox" />
</a>

This an image link that will display our lightbox. For this code to work, jQuery and the Slimbox plugin must be in the page. You add them to the head section of the page similar to the following:

<!-- jQuery -->
<script type="text/javascript"
scr="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">
</script>

<!-- Slimbox -->
<script type="text/javascript" src="/kauswagan/slimbox-2.04/js/slimbox2.js">
	</script>
<link rel="stylesheet" 
	href="/kauswagan/slimbox-2.04/css/slimbox2.css" 
	type="text/css" media="screen" />

The slimbox lines above may be slightly different depending on the location of your slimbox plugin. Download your plugin here http://code.google.com/p/slimbox/downloads/detail?name=slimbox-2.04.zip if you don't have them already.

Pinterest

Adding Pinterest to the above lightbox requires the synchronous version of Pinterest script. Below is a snippet that employs the synchronous Pinterest script to draw the button.

<div>
	<a href="http://pinterest.com/pin/create/button/?
		url=http://kahimyang.info&
		media=http://kahimyang.info/resources/Barilla.jpg&  
		description=Barilla was the first coin struck in the country."
		class="pin-it-button"
		count-layout="horizontal"></a>
	<script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js" />
</div>

Please visit the Pinterest website if you need more explanation of the fields above.

Adding the Pinterest button to a lightbox

To add a Pinterest button, do not code directly the button into the title attribute. As already mentioned, it will not work. Add the title, which is our Pinterest button (or any any other link/anchor), by handling the onmousedown of the link. In our example below, we also use onmouseover to prevent the link (the title) from displaying as tooltip while you hover over the link and while the lightbox is not yet displayed.

<a href="http://kahimyang.info/resources/Barilla.jpg"
	onmousedown="addPinterest(this);"
	onmouseover="this.title='';"
	rel="lightbox">
		<img src="http://kahimyang.info/resources/s-Barilla.jpg"
		width="180" border="0" alt="How to add pinterest to a lightbox" />

And below is the javascript onmousedown handler.

<script type="text/javascript">
	function addPinterest(lightbox) {
		lightbox.title='<a href="http://pinterest.com/pin/create/button/?';
		lightbox.title +='url=http://kahimyang.info&';
		lightbox.title +='media=http://kahimyang.info/resources/Barilla.jpg&';
		lightbox.title +='description=Barilla, first coin struck in the country." ';
		lightbox.title +='class="pin-it-button" ';
		lightbox.title +='count-layout="horizontal"></a> '
		lightbox.title += '<script type="text/javascript" '
		lightbox.title +='src=http://assets.pinterest.com/js/pinit.js">';
	}
</script>

Add the Javascript code above in the head section of your page and it is all set. Here is a demo. You may also want to view the source of this demo page.

http://demo.kahimyang.info/cgi-cpp/pinterest-1.html

Note that depending on the speed of your connection, there may be a very slight delay before Pinterest button renders itself (demo).

That's it Good Luck.