WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery Optimizer
[resolved] Donations & Pinterest Option (14 posts)

  1. osuaaron
    Member
    Posted 2 years ago #

    Hello Mark,

    Two questions. First, I have already donated once. Are we expected to donate again for an update?

    Secondly this is more technical. I'm attempting to use the Pinterest Lightbox plugin. I believe it is attempting to load its own Lightbox and screwing everything up, mostly because it's not re-sizing the large images I have on my site like your application does easily.

    My question basically is, is there a way to combine these two plugins to add a Pinterest "Pin it" button to the bottom of images generated by the fancybox effect of NG Optimizer Premium?

    http://wordpress.org/extend/plugins/nextgen-gallery-optimizer/

  2. Mark Jeldi
    Member
    Plugin Author

    Posted 2 years ago #

    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.

  3. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    Just a quick note to say I've now tested the code above on a live Pinterest account...and it works perfectly!

    Mark.

  4. Pradeep
    Member
    Posted 1 year ago #

    Mark,

    There's a typo in your code. I guess the function name should be

    function nggo_fancybox_inline_js()
    not "function nggop_fancybox_inline_js()"

  5. Pradeep
    Member
    Posted 1 year ago #

    Please ignore my comment above if you are using the premium version.

  6. osuaaron
    Member
    Posted 1 year ago #

    Mark,

    I can also attest that it works brilliantly. It is almost dreamlike to actually see a pinterest pin it system work after downloading over 10 different plugins and paying for two of them to have nothing work.

    Very well done.

  7. Pradeep
    Member
    Posted 1 year ago #

    Mark,

    Yes it does work very nicely but I just noticed that it generates a JavaScript error, every time I resize the browser window. The error it generates is:"useless setTimeout call (missing quotes around argument?)"

    Any ideas on how to eliminate this issue?

  8. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    @ 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.

  9. fredel
    Member
    Posted 1 year ago #

    So cool Mark!

    Is it possible to show the Button even there is no description/title for the picture?

    thaaaanks
    fritz

  10. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  11. garethstorer
    Member
    Posted 1 year ago #

    Great plugin thanks guys. I need some help with putting URLs into the caption of an image.

    If for example I have the following caption for an image, including a link:

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

    The following is displayed in the caption for the image (the Pin It image is displayed just before "Caption Text":

    Find out more">Caption Text
    Find out more

    Thanks

  12. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  13. garethstorer
    Member
    Posted 1 year ago #

    Thanks. My apologies, a mistype on my side in my initial post. I do have the coding correct. Let me rather refer you to an example on my wife's site.

    http://www.tylcreations.co.za/gallery/workshops-and-parties/

    Click on any of the images. You will see how the link displays on the caption. I hope you can pick up from the code what's going wrong.

    Regards
    Gareth

  14. Mark Jeldi
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic