How to Create a Jquery Plugin For Pinterest

How to create a jQuery plugin for Pinterest
by admin admin Date: 28-05-2013 pinterest plugin tutorial web development jQuery


With all of the interest in Pinterest , we thought it would be a good idea to do a simple Pinterest sharing plugin for jQuery.

Let's start!

First we need to downloas the jQuery plugin boilerplate

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {      
              
        }, options);
        

        return this.each(function() {    
        

        });


    };
})( jQuery );

Boilerplate provides us with the ability to specify setting configurations.

Let's costumize Pinterest Image!

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' : 
'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

            
        return this.each(function() {
    
        
        });

    };

})( jQuery );

$(document).on('ready', function(){

    $('img#share').pinterest({ button:
 'pinterest-alt.png'});

});

Now we can add some functionality. We have to update the "this.each" function to initialize each image and add some events. We’ve decided to have the icon hover over the image being shared. Therefore, we need to wrap the image in a span element that positioned ‘relative’, and we have to append the share image and position it absolutely.

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' :
 'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

                    
        return this.each(function() {  
  
            img = $(this);

            img.wrap('<span class="pin-it" style="position: relative;" />');

            img.parent('span.pin-it').append('<img src="' + settings.button + '" alt="test pinterest" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />'');

        });
    };
})( jQuery );

$(document).on('ready', function(){
    $('img#share').pinterest({ button: 'pinterest-alt.png'});
});

and:

(function( $ ) {

    $.fn.pinterest = function(options) {

        
        var settings = $.extend( {

            'button' : 
'http://business.pinterest.com/assets/img/builder/builder_opt_1.png'

        }, options);

        
        function on_click () { 
        
        };

        
        function on_hover_in() {

            $(this).siblings('img:first').show(500);

        };    

        
        return this.each(function() {   
 
            img = $(this);

            img.wrap('<span class="pin-it" style="position: relative;" />');

            img.parent('span.pin-it').append('<img src="' + settings.button + '" style="display: none;position: absolute; bottom: 20px; right: 20px;cursor: hand; cursor: pointer;" />');

            img.hover(on_hover_in);

            img.siblings('img:first').on('click', on_click);
        
});


    };

})( jQuery );


$(document).on('ready', function(){

    $('img#share').pinterest({ button:
 'pinterest-small.png'});

});

Now, the on_click event looks like the following

function on_click () {

    img = $(this).siblings('img:first');

    description = img.attr('title');

    url = document.location;

    media = img.attr('src');


    var pin_url = 
'http://pinterest.com/pin/create/button/?url=' + 
encodeURIComponent( url ) +

        '&media=' + encodeURIComponent( media ) +

        '&description=' + encodeURIComponent( description );
    

    window.open(pin_url, 'Pin - ' + description,
 'menubar=no,toolbar=no,resizable=yes,scrollbars=yes,height=600,width=600');

    $(this).hide(1000);

};

It’s grabbing the image we want to share, and then reading it’s title and src attributes. It’s also getting the current pages url using document.location. The Pinterest share url has 3 parameters that we are interested in:

  • url – the page we are sharing from
  • media – the image we want to share
  • description – the text we want to share with the image

We have to use also the encodeURIComponent function to make sure the values are properly escaped.

One final thing we need to allow for is if the image src url is relative or not.

function getUrl(src){

    var url = document.location.toString();

    var http = /^https?:\/\//i;

    if (!http.test(src)) {

        if(src[0] == '/'){

            url = url.substring(0, url.lastIndexOf('/')) + src;

        } else {

            url = url.substring(0, url.lastIndexOf('/')) + '/' + src;

        }

    } else {

        url = src;

    }

    
    return url;

};

Download source: Creating a simple jQuery plugin for Pinterest

Thanks to: developerdrive.com

 
by admin admin Date: 28-05-2013 pinterest plugin tutorial web development jQuery hits : 2930  
 
 
 
 

Related Posts

    JavaScript: Promises explained with simple real life examples

    Handling asynchronous data flows is complex, who hasn't faced codes like this one?: checkWeather('palma de mallorca', (error, weather) => { if (error) throw error; if (weather === 'well') { return checkFlights('palma…

    Facebook: how to remove hidden data and personal information

    Facebook is a great social network that allows us to be always updated on all the news of our friends or family or even the most relevant news of the…

    Can Easier Returns Mean Better Business?

    Any eCommerce business owner knows that returns are a part of the packaged deal. At the end of the day, today’s consumer holds all of the power. They are informed,…

    Linux for Dummies: Ubuntu Terminal

    I introduced in the previous article, available here, the basic concepts concerning the Linux world. Today we are going to have a look to some basic operations that we can perform…

    Linux for Dummies: Introduction

    If you have thought about migrating from Windows to a Unix operating system, or Linux specifically there are things you should know. The goal is to give essential information (and…

    Java Design Pattern: Builder Pattern

    Today we are going to talk about a creational pattern that in many situations can represent a useful alternative to the construction of the objects using the constructors: the Builder…

    Java Design Pattern: Strategy Pattern

    One of the most popular patterns is the Strategy Pattern. It is also one of the easiest patterns. It is a member of the behavioral patterns family, it has the duty…

    Java Sorting Algorithm: Bubble Sort

    Programming, the need to order the collections of data or objects that must then be manipulated often arises. Ordering a list can be useful in cases where you have to do…

    Java Sorting Algorithms: Quick Sort

    Welcome back to this overview about the Java world! Today, we are going to talk about a renowned sorting algorithm: the Quick Sort. The Quick Sort is not very suitable for educational purposes because…

    Java Design Pattern: Factory Method Pattern

    Going on with the speach about design patterns started previously, we are going to talk about another pattern often used: the Factory Method Pattern. The GoF (Gang of Four Design Patterns)…

    Java 12, finally less verbose?

    We all know Java for its characteristics thanks to which, despite more than 20 years have passed since the first version, it is still one of the most studied and…

    Best Open-Source Javascript Date Picker Plugins and Libraries

    For date pickers, selecting menus is a common choice as they are simple to set up. But I suppose our customers deserve better after centuries of using MM / DD…