1

I'm hoping to add sharing buttons (Pinterest to start) to each image within a gallery without having to go in and manually include URLs etc. for each individual image/entry. There is plenty of instruction to be had when it comes to including this functionality for other lightboxes--most notably in conjunction with a specific CMS; and I have been reviewing those instructions, as well as w3 resources and other stackoverflow.com entries--with the hope that I could put something together. I'd like to place the share buttons en lieu of the counter. Thus far I've failed. I did have one attempt that resulted in the button being displayed, however the script did not acknowledge the path for the image for a successful "pin." Subsequent attempts at including a "Pin It" button have simply broken Magnific.

Currently, I have:

tCounter:
'<a href="//pinterest.com/pin/create/button/?url=http%3A%2F  
%2Fgeraldmurai.com&media=http%3A%2F%2Fwindow.location.href&  
description=Aloha!%20Thank%20you%20for%20Pinning!" data-pin-do="buttonPin" data-pin-  
config="none" >
<img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />
</a>'}

Any tips would be greatly appreciated!

Thank you!

Micha
  • 5,117
  • 8
  • 34
  • 47
Flight 19
  • 11
  • 1
  • 2
  • One source I've been referencing for acknowledging the URL of the image: http://stackoverflow.com/questions/406192/how-to-get-the-current-url-in-jquery – Flight 19 Aug 07 '13 at 06:09

3 Answers3

3

There are many ways of adding a button, one of the easiest:

$('.image-link').magnificPopup({
        type: 'image',
        closeBtnInside: false,
        mainClass: 'mfp-with-zoom mfp-img-mobile',

        image: {
            verticalFit: true,
            titleSrc: function(item) {

                        var caption = item.el.attr('title');

                        var pinItURL = "http://pinterest.com/pin/create/button/";

                        // Refer to http://developers.pinterest.com/pin_it/
                        pinItURL += '?url=' + 'http://dimsemenov.com/plugins/magnific-popup/';
                        pinItURL += '&media=' + item.el.attr('href');
                        pinItURL += '&description=' + caption;


                        return caption + ' &middot; <a class="pin-it" href="'+pinItURL+'" target="_blank"><img src="http://assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>';
            }
        },


    gallery: {
      enabled: true 
    }, 
    callbacks: {
      open: function() {
        this.wrap.on('click.pinhandler', '.pin-it', function(e) {

          window.open(e.currentTarget.href, "intent", "scrollbars=yes,resizable=yes,toolbar=no,location=yes,width=550,height=420,left=" + (window.screen ? Math.round(screen.width / 2 - 275) : 50) + ",top=" + 100);


          return false;
        });
      },
      beforeClose: function() {
       this.wrap.off('click.pinhandler');
      }
    }

});

http://codepen.io/dimsemenov/pen/hutrb

Dmitry Semenov
  • 4,566
  • 2
  • 36
  • 39
  • Thanks! I've given it a go, (reimplemented original Counter code and placed/modified the above for the gallery call in the html) but I must be doing something wrong because I'm still just getting a broken script. – Flight 19 Aug 07 '13 at 18:32
  • view-source:geraldmurai.com/build2/index2.php – Flight 19 Aug 07 '13 at 21:45
  • How can you use this code to embed the pin it button in the top right corner of the image and not in the caption? Works brilliantly otherwise. Thanks – user1280853 Jul 02 '14 at 09:44
2

Not sure if someone is still interested...although the answer that Dimitry gave is correct, he forgot to mention that you have to change few things:

pinItURL += '?url=' + 'http://dimsemenov.com/plugins/magnific-popup/';
pinItURL += '&media=' + item.el.attr('href');

First line

 pinItURL += '?url=' + '***add here your own website***';

Second line I had to add again the name of my website to make the all thing work:

pinItURL += '&media=**add here the name of you website plus /**' + item.el.attr('href');

Hope it helps someone. Thank you Dmitry ;)

FFSS
  • 36
  • 1
0

The media URL should point to the lightbox image not a website URL + image URL.

Full url is located in attr('href') for each of the images.

Janek
  • 1