Pin images with this jQuery Pinterest Plugin

Mick in Tutorials on Jul 14, 2013


As you might have noticed, nowadays, pinterest Pin count button can be found in most design websites, they also released a bookmarklet that scan a webpage for images and allow you to pin it easily.

Your users will be able to pin any images posted when using the bbc tag in your forum posts. I will show you how to pin your bbc tagged images straight away in the below tutorial.

Demo: Pin it to Pinterest

In your theme's CSS folder, create a file called jquery.pinit.css and add the following:

.pinit {
position:relative;
display:inline-block;

}

.pinit .pinit-overlay {
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:auto;
z-index:200;
display:none;
background: rgba(255, 255, 255, 0.75);
text-align:center;
}

.pinit .pinit-overlay a {
position:relative;
top:50%;
left:50%;
margin:-10px 0 0 -21px;
display:block;
width:43px;
height:20px;
background:transparent url(../images/pinit-button.png) no-repeat 0 0;
text-indent:-9999em;
}

.pinit .pinit-overlay a:hover {
background-position: 0 -21px;
}

.pinit .pinit-overlay a:active {
background-position: 0 -42px;
}

Save the pinterest button as pinit-button.png and load it to your theme's image folder.


In your theme's JS folder, create a file called jquery.pinit.js and add the following:

/*
* jQuery Pinit for Pinterest
* Author: Kevin Liew
* Website: queness.com
* License: http://redactorjs.com/license/
* Usage: $('img').pinit();
*/

(function($){

    //Attach this new method to jQuery
    $.fn.extend({
         
        pinit: function(options) {
 
var defaults = {
wrap: '<span class="pinit"/>',
pageURL: document.URL
}
 
  var options = $.extend(defaults, options);
var o = options;

            //Iterate over the current set of matched elements
            return this.each(function() {

              var e = $(this),
              pi_media = e.data('media') ? e.data('media') : e[0].src,
              pi_url = o.pageURL,
              pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt'),
              pi_isvideo = 'false';
              bookmark = '[url=http://pinterest.com/pin/create/bookmarklet/?media=']Pinterest[/url] + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);

var eHeight = e.outerHeight();
              e.wrap(o.wrap);
              e.after('<span class="pinit-overlay" style="height: ' + eHeight + 'px"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');

$('.pinit .pinit-button').on('click', function () {
window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
return false;
});     

$('.pinit').mouseenter(function () {
$(this).children('.pinit-overlay').fadeIn(200);
}).mouseleave(function () {
$(this).children('.pinit-overlay').fadeOut(200);
});


            });
     
        }
       
    });

})(jQuery);

Open your /index.template.php and find:

	// The ?fin20 part of this link is just here to make sure browsers don't cache it wrongly.
echo '

Add after:

       
        <link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/css/jquery.pinit.css" />

Find:

</body></html>';
}

Add before:

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="', $settings['theme_url'], '/js/jquery.pinit.js">
<script type="text/javascript">
                $(function () {
$(".bbc_img").pinit();

     });
</script>

Credits: Queness - Design Inspirations, jQuery Tutorials and Web Design & Development Community






Tagged with:


Mick

Mick G

  idesignsmf.com

    

Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time and has a weakness for Pizza.

  Connect with us:

     

  Improve SMF

If you wish to contribute to the development of SMF you can contribute to the coding discussions taking place on Github. You are also welcome to suggest features which you would like to see added to the software in the Feature Requests board.

  Receive our monthly newsletter right in your inbox.
Commitment issues? Unsubscribe at any time.

Get 100% complete access to our entire collection and find out why 11,210 SMF owners prefer our themes



0 Comments







  Documentation & Tutorials. We have a great selection of tutorials to help you make the most of your theme.