Galleriffic + Pin It Button on Hover

initialize.js

jQuery(document).ready(function($){
	$('#thumbs').galleriffic({
        imageContainerSel: '#slideshow',
        controlsContainerSel: '#controls',
        loadingContainerSel: '#loading',
        numThumbs: 9999,
      	renderSSControls: false,
      	onSlideChange:	function(prevIndex, nextIndex) {
      		// get the pin it URL from the next slide
      		var piniturl = this.find('ul.thumbs li.selected .sm-pinit a').attr('href');
      		
      		// update the pin it button to use that URL
      		$('.sm-custom-pinit a').attr('href', piniturl);
      	}
    });
});

line-150.js

addImage: function(listItem, thumbExists, insert, position) {
	var $li = ( typeof listItem === "string" ) ? $(listItem) : listItem;				
	var $aThumb = $li.find('a.thumb');
	var slideUrl = $aThumb.attr('href');
	var title = $aThumb.attr('title');
	var $caption = $li.find('.caption').remove();
	var hash = $aThumb.attr('name');
	
	// ADDED: variables for the pin it button
	var $pinPath = $li.find('.sm-pinit a');
	var pinUrl = $pinPath.attr('href');

	// Increment the image counter
	imageCounter++;

	// Autogenerate a hash value if none is present or if it is a duplicate
	if (!hash || allImages[''+hash]) {
		hash = imageCounter;
	}

	// Set position to end when not specified
	if (!insert)
		position = this.data.length;
	
	var imageData = {
		title:title,
		slideUrl:slideUrl,
		caption:$caption,
		hash:hash,
		gallery:this,
		index:position,
		
		// ADDED: pinURL as part of imageData
		pinUrl:pinUrl
	};

line-635.js

buildImage: function(imageData, isSync) {
	var gallery = this;
	var nextIndex = this.getNextIndex(imageData.index);
	
	// ADDED: next two lines prevent duplicate slides from appearing on double click
	this.$imageContainer.empty();
	$(this.captionContainerSel).empty();
	
	// Construct new hidden span for the image
	var newSlide = this.$imageContainer
	.append(
		// ADDED: pin-it button for current slide
		'<span class="image-wrapper current"><a class="advance-link" rel="history" href="#'+this.data[nextIndex].hash+'" title="'+imageData.title+'">&nbsp;</a><a href="'+imageData.pinUrl+'" target="_blank" class="sm-custom-pinit"></a></span>').find('span.current').css('opacity', '0');

page-part.php

<div class="entry-content">
	<?php $images = get_field('images'); if( $images ): ?>
		<div id="loading"></div>
		<div id="slideshow"></div>
		<div id="controls"></div>
		<div id="thumbs">
		    <ul class="thumbs noscript">
		    	<?php foreach( $images as $image ): ?>
	                <li>
	                	<a href="<?php echo $image['sizes']['large']; ?>" class="thumb">
	                    	<img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
	                   	</a>
	                   	<span class="sm-pinit">
	                   		<a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=<?php echo $image['url']; ?>&description=<?php the_title(); ?>"></a>
	                   	</span>
	                </li>
	            <?php endforeach; ?>
		    </ul>
		</div>
	<?php endif; ?>
</div><!-- .entry-content -->