Hey Fritz,
I'm glad you like it!
This was a tricky one, but I've just worked out a way to show the Pinterest button in Fancybox even when no title is present (as requested).
Essentially what we're doing is dynamically adding a single non-breaking space to each image's anchor title attribute. This makes Fancybox think there's a title to be displayed for every image, and thus always shows the accompanying button (from the code above)...
At the top of "...scripts-and-styles.php", in Optimizer Basic/Premium, simply replace the "fancybox inline js" section with the following...
For the Basic version:
/**********************************************************************
* fancybox inline js
**********************************************************************/
function nggo_fancybox_inline_js() { ?>
<!-- [nextgen gallery optimizer v<?php echo NGGO_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
<script type='text/javascript'>jQuery.noConflict(); jQuery(document).ready(function() { jQuery('a.myfancybox').each(function(){ jQuery(this).attr("title", jQuery(this).attr("title") + " "); }); jQuery('a.myfancybox').fancybox({ 'zoomSpeedIn':500, 'zoomSpeedOut':500, 'overlayShow':true, 'overlayOpacity':0.3, 'titlePosition':"inside", 'titleFormat': function(title, currentArray, currentIndex, currentOpts) { return '<style>.fancybox-title-inside {padding:0 0 8px 0; text-align:left; line-height:22px;}</style><div style="float:left; margin:0 10px 0 0;"><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=' + currentOpts.href + '&description=' + title + '"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>' + title + ''; } }); });</script>
<?php
}
And for the Premium version:
/**********************************************************************
* fancybox inline js
**********************************************************************/
function nggop_fancybox_inline_js() { ?>
<!-- [nextgen gallery optimizer premium v<?php echo NGGOP_VERSION; ?>] This page must contain a nextgen shortcode...else we wouldn't be serving its scripts and styles -->
<script type='text/javascript'>jQuery.noConflict(); jQuery(document).ready(function() { jQuery('a.myfancybox').each(function(){ jQuery(this).attr("title", jQuery(this).attr("title") + " "); }); jQuery('a.myfancybox').fancybox({ 'zoomSpeedIn':500, 'zoomSpeedOut':500, 'overlayShow':true, 'overlayOpacity':0.3, 'titlePosition':"inside", 'titleFormat': function(title, currentArray, currentIndex, currentOpts) { return '<style>.fancybox-title-inside {padding:0 0 8px 0; text-align:left; line-height:22px;}</style><div style="float:left; margin:0 10px 0 0;"><a href="http://pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=' + currentOpts.href + '&description=' + title + '"><img border="0" src="http://assets.pinterest.com/images/PinExt.png" title="Pin It" /></a></div>' + title + ''; } }); }); var timer; jQuery(window).resize(function() { clearTimeout(timer); timer = setTimeout(jQuery.fancybox.browser_resize, 500); });</script>
<?php
}
Note: It would still be best to try to provide titles for your images, as they are sent to Pinterest for the Pin's description. But if you've got a lot of images, the above will work nicely.
Hope this helps!
Cheers,
Mark.
