[Plugin: NextGEN Gallery Optimizer] Donations & Pinterest Option

Hi osuaaron,

Thanks for using NextGEN Gallery Optimizer Premium!

I’m actually working on integrating an auto-update feature into the plugin, but it’s very slow-going. If you send me an email with your PayPal address, I’ll forward you the link to the latest version.

And on the technical side… yes, indeed!
I’ve just coded you up a solution whereby you can display a Pinterest “Pin it” badge natively right inside Fancybox! I’ve used the “inside” title display to allow enough room for the button, and have passed it all the necessary metadata that will allow it to save your photos to the site.

That said…I don’t actually have a Pinterest account to test the posting action. Perhaps you could invite me to join???

Here’s a screenshot. Now for the code…

At the top of nextgen-optimizer-premium-scripts-and-styles.php, simply replace the “fancybox inline js” section with the following…

/**********************************************************************
* 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').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
}

Enjoy!

Cheers,
Mark.

@ osuaaron…
Thank you very much for your kind words. I’m glad to hear my Pinterest mod is working well for you!

@ Pradeep…
Indeed. The “p” in the nggop prefix relates to the Premium version of Optimizer to which this thread originally pertained.

In regards to the resize error, I would say you’re getting that message because you’re using an additional function included in the code above that is exclusive to the Premium version.

If you’d like to take advantage of the “auto-resize on browser resize” functionality I’ve developed, an upgrade to the Premium version would be much appreciated. Alternatively, if you don’t require this feature (or the many other extras), simply remove the resize function from before the closing </script> tag in the snippet above.

The code to display a “Pin it” badge with the Basic version of Optimizer is as follows…

/**********************************************************************
* 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').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
}

Hope this helps!

Cheers,
Mark.

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.

Hi Gareth,

Thanks for using NextGEN Gallery Optimizer, and for your kind words!

You certainly can use HTML (including links) for your Fancybox titles, however it looks like you’re missing a quotation mark in there. Try this…

Caption text <br />
<a href="#">Find out more</a>

Hope this helps!

Cheers,
Mark.

Hi Gareth,

I’ve been looking at your source code, and the problem is that your title links contain encoded HTML entities (and a trailing slash on the URL).

I’m afraid I can’t post an example as this editor converts the encoding automatically, but your anchor tag title attributes should look exactly like this…

<a href=http://www.tylcreations.co.za/workshops/cupcake-decorating-party>cupcake decorating party</a>

I’ve tested this manually by making these corrections in your source code, and your lightbox title links display perfectly after the changes.

I hope this helps!

Cheers,
Mark.