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 : 2618  
 
 
 
 

Related Posts

    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…

    Starting with Vue.js: how about using it?

    Vue.js seems to be another JavaScript UI library with a strong community support. If you've got a project coming up and you're wondering which tool to choose from, you can…

    Developing a JavaScript video game: Part 3

    Here we are! We're back with the third part of the article . If you missed it, read the first part or the second one. So, now you may be able to…

    Vue.js: a quick start guide for beginners. Part 3

    Welcome here again! Last time we didn't listen to our very first user events and and methods to react to these events. Now we are going to explain directives and…

    Best 5 Javascript NewsTicker Plugins

    Not all developers know the marquee tag of HTML, that allows you to create a scrolling piece of text or image displayed that is shown horizontally or vertically on the DOM.…

    Async/Await how they really work: an example

    Promises give us an easier way to deal sequentially with asynchrony in our code. This is a welcome addition, given that our brains are not designed to deal efficiently with…