Commits

Germano Guerrini committed 4c739c0

Refactoring and improved readme

Comments (0)

Files changed (6)

 jQuery PinMe Plugin
 =
 
-PinMe is a jQuery plugin to easily share single images on Pinterest. 
-Once installed, it adds a "Pin-it" button to selected images on a page to share them. 
-The plugin is highly customizable: see the Options for a list of things you can modify.
+**PinMe** is a jQuery plugin to easily share single images on Pinterest. 
+Once installed, it adds a *Pin-it* button to selected images on a page to share them. 
+The plugin is highly customizable: see the [Options](#options) for a list of things that can be modified.
 
 Getting started
 -
 
-By default, PinMe will look for images with a `pinme` class
+PinMe needs a selector to pick up the images:
 
     :::html
     <img src="..." class="pinme" />
 
-Then you have to add jQuery and PinMe:
+Then add jQuery and PinMe scripts:
 
     :::html
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
-    <script src="/path/to/jquery.pinme.compressed.js"></script>
+    <script src="/path/to/jquery.pinme.min.js"></script>
+
+To fire PinMe you have two options. As the button is going to be dynamically positioned over each image, they need to be fully loaded for PinMe to be able to retrieve their dimensions.  
+Therefore you can bind it to the `$(window).load()` event:
 
-Options
--
     :::javascript
-    imageSelector: '.pinme'
-The CSS class of the images you want to share.
+    $(window).load(function() {
+        $('.pinme').pinMe();
+    });
+or, to be on the safer side, you can use the **[imagesLoaded][1]** plugin.
+    
+    :::html
+    ...
+    <script src="/path/to/jquery.imagesloaded.min.js"></script>
+    ...
+    $(document).ready(function() {
+        $('.pinme').imagesLoaded(function() {
+            this.pinMe();
+        });
+    });
 
+<a id="options"></a>
+Options
+-
     :::javascript
     imageMediaAttribute: 'src'
-By default, the `src` attribute of the image is used to retrieve the absolute url of the image.
-Alternatively, you can use another attribute, like a `data-*` if, for example, you want to share a higher resolution version of the image.
+By default, the value of the `src` attribute is used to retrieve the absolute url of the image.  
+Alternatively, you can use another attribute, like a `data-*` if, for example, you want to share a higher resolution version of the image.  
+**Note that PinMe will transform any relative url to an absolute one** as required by Pinterest.
 
     :::javascript
     imageDescriptionAttribute: 'data-pin-description'
 
     :::javascript
     buttonUrl: 'img/pinit.png'
-The url of the "pin-it" button, in case you don't like it the default one.
+The url of the *Pin-it* button, in case you don't like the default one.
 If you edit this, be sure to check the two options below.
 
     :::javascript
 
     :::javascript
     buttonPadding: 5
-The distance of the button from the margin of the image.
+The distance of the button in pixels from the margin of the image.
 
     :::javascript
     buttonWillShowFunction: function(button) {
             opacity: 0.75
         });
     }
-A function that gets called just before the button is added to the DOM.
+A function that gets called just before the button is added to the DOM, usefull for any extra initialization.
 
     :::javascript
     buttonOnMouseOverFunction: function(button, image) {
 
     :::javascript
     popupX: 100
-The X position in pixel of the popup the will be open by the button, relatively to the browser window.
+The distance of the popup from the left margin of the browser window in pixels.
 
 
     :::javascript
     popupY: 100
-The Y position in pixel of the popup the will be open by the button, relatively to the browser window.
+The distance of the popup from the top margin of the browser window in pixels.
 
     :::javascript
     popupHeight: 580
-The height in pixel of the popup the will be open by the button.
+The height in pixels of the popup the will be open by the button.
 
     :::javascript
     popupWidth: 730
-The width in pixel of the popup the will be open by the button.
+The width in pixels of the popup the will be open by the button.
 
     :::javascript
     popupName: 'pinterest'
 The name of the popup the will be open by the button.
 
-  - Type some Markdown text in the left window
-  - See the HTML in the right
-  - Magic
+Example
+-
+    :::html
+    <img src="path/to/my/image1.jpg" data-description="My beautiful image number 1" />
+    <img src="path/to/my/image2.jpg" data-description="My beautiful image number 2" />
+
+
+    :::javascript
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+    <script src="/path/to/jquery.pinme.min.js"></script>
+    <script src="/path/to/jquery.imagesloaded.min.js"></script>
+    <script type="text/javascript">
+    $(document).ready(function() {
+        $('.pinme').imagesLoaded(function() {
+            this.pinMe({
+                buttonPadding: 8,
+                buttonAlignment: 'top-right',
+                imageDescriptionAttribute: 'data-description'
+            });
+        });
+    });
+    </script>
 
 Version
 -
 License
 -
 
-MIT
+WTFPL
+
+ [1]: https://github.com/desandro/imagesloaded
+<html>
+    <head>
+        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
+        <script src="jquery.imagesloaded.min.js" type="text/javascript"></script>
+        <script src="jquery.pinme.min.js" type="text/javascript"></script>
+        <script type="text/javascript" charset="utf-8">
+        $(document).ready(function() {
+            $('.pinme').imagesLoaded(function(){
+                this.pinMe({
+                    buttonPadding: 8,
+                    buttonAlignment: 'top-right',
+                    imageDescriptionAttribute: 'data-description'
+                });
+            });
+        });
+        </script>
+    </head>
+    <body>
+        <img src="http://www.bigodino.it/media/thumbs/images/2012/10/24/img_3663_JPG_485x0_crop_upscale_watermark-small_q85.jpg" class="pinme" data-description="My beautiful image number 1" /><br />
+        <img src="http://www.bigodino.it/media/thumbs/images/2012/10/24/img_3457_JPG_485x0_crop_upscale_watermark-small_q85.jpg" class="pinme" data-description="My beautiful image number 2" /><br />
+    </body>
+</html>

jquery.imagesloaded.min.js

+(function(c,n){var l="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";c.fn.imagesLoaded=function(f){function m(){var b=c(i),a=c(h);d&&(h.length?d.reject(e,b,a):d.resolve(e));c.isFunction(f)&&f.call(g,e,b,a)}function j(b,a){b.src===l||-1!==c.inArray(b,k)||(k.push(b),a?h.push(b):i.push(b),c.data(b,"imagesLoaded",{isBroken:a,src:b.src}),o&&d.notifyWith(c(b),[a,e,c(i),c(h)]),e.length===k.length&&(setTimeout(m),e.unbind(".imagesLoaded")))}var g=this,d=c.isFunction(c.Deferred)?c.Deferred():
+0,o=c.isFunction(d.notify),e=g.find("img").add(g.filter("img")),k=[],i=[],h=[];c.isPlainObject(f)&&c.each(f,function(b,a){if("callback"===b)f=a;else if(d)d[b](a)});e.length?e.bind("load.imagesLoaded error.imagesLoaded",function(b){j(b.target,"error"===b.type)}).each(function(b,a){var d=a.src,e=c.data(a,"imagesLoaded");if(e&&e.src===d)j(a,e.isBroken);else if(a.complete&&a.naturalWidth!==n)j(a,0===a.naturalWidth||0===a.naturalHeight);else if(a.readyState||a.complete)a.src=l,a.src=d}):m();return d?d.promise(g):
+g}})(jQuery);

jquery.pinme.compressed.js

-(function(e){"use strict";e.fn.pinMe=function(t){var n={imageSelector:".pinme",imageMediaAttribute:"src",imageDescriptionAttribute:"data-pin-description",buttonUrl:"img/pinit.png",buttonWidth:49,buttonHeight:25,buttonAlignment:"top-left",buttonPadding:5,buttonWillShowFunction:function(e){e.css({opacity:.75})},buttonOnMouseOverFunction:function(e,t){e.css({opacity:1,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"});t.css({opacity:.75,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"})},buttonOnMouseOutFunction:function(e,t){e.css({opacity:.75,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"});t.css({opacity:1,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"})},popupX:100,popupY:100,popupHeight:580,popupWidth:730,popupName:"pinterest"},r=e.extend(n,t);var i=function(e){var t=e.position(),n=e.width(),i=e.height();switch(r.buttonAlignment){case"top-right":return{top:t.top+r.buttonPadding,left:t.left+n-r.buttonWidth-r.buttonPadding};case"bottom-right":return{top:t.top+i-r.buttonHeight-r.buttonPadding,left:t.left+n-r.buttonWidth-r.buttonPadding};case"bottom-left":return{top:t.top+i-r.buttonHeight-r.buttonPadding,left:t.left+r.buttonPadding};default:return{top:t.top+r.buttonPadding,left:t.left+r.buttonPadding}}};var s=function(e){var t=e.attr(r.imageMediaAttribute);if(!t.match("^http://")){var n=t.substr(0,1)==="/"?"":"/";t=window.location.origin+n+t}return t};return this.each(function(){var t=e(this),n="http://pinterest.com/pin/create/button/",o="img"+r.imageSelector,u=e('<img src="'+r.buttonUrl+'" id="pinme_button" />'),a="pinme_wrapper",f=e('<span class="'+a+'" />');t.find(o).wrap(f);e("."+a).on("mouseenter mouseleave",function(t){var a=e(this);if(t.type==="mouseenter"){var f=a.children(o).first(),l=s(f),c=f.attr(r.imageDescriptionAttribute);var h={url:document.URL,media:l,description:c};var p=i(f);u.css({position:"absolute",top:p.top,left:p.left,cursor:"pointer"});r.buttonWillShowFunction(u);u.on("click mouseover mouseout",function(t){var i=e(this);if(t.type==="click"){var s=n+"?"+e.param(h),o="screenX="+r.popupX+",screenY="+r.popupY+",width="+r.popupWidth+",height="+r.popupHeight;window.open(s,r.popupName,o)}else if(t.type==="mouseover"){r.buttonOnMouseOverFunction(i,f)}else if(t.type==="mouseout"){r.buttonOnMouseOutFunction(i,f)}});u.appendTo(a)}else{u.off();u.remove()}return false})})};e.pinMe=function(t){return e("body").pinMe(t)}})(jQuery)
 /*
-        jQuery pin me plugin
-        --
-        Adds a pin it button to single images to easily share them on Pinterest.
-        --
-        Author  : Germano Guerrini
-        Version : 1.0
+    jQuery pin me plugin
+    
+    Adds a pin it button to single images to easily share them on Pinterest.
+    
+    Author  : Germano Guerrini
+    Version : 1.0
 */
-(function ($) {
+;(function( $ ){
     'use strict';
-    
-    $.fn.pinMe = function(options) {
+    $.fn.pinMe = function( options ) {
         var defaults = {
-                imageSelector: '.pinme',
                 imageMediaAttribute: 'src',
                 imageDescriptionAttribute: 'data-pin-description',
                 buttonUrl: 'img/pinit.png',
             return value;
         };
         
-        return this.each(function() {
-            var element = $(this),
+        return this.each(function(index) {
+            var currentImage = $(this),
                 baseUrl = 'http://pinterest.com/pin/create/button/',
-                fullImageSelector = 'img' + settings.imageSelector,
                 button = $('<img src="' + settings.buttonUrl + '" id="pinme_button" />'),
-                wrapperSelector = 'pinme_wrapper',
+                wrapperSelector = 'pinme_wrapper_' + index,
                 wrapper = $('<span class="' + wrapperSelector + '" />');
             
             // Wraps all images so that we can use mouseenter and mouseleave
             // events, otherwise hovering on the button would trigger a mouseout.
-            element.find(fullImageSelector).wrap(wrapper);
+            currentImage.wrap(wrapper);
             
             $('.' + wrapperSelector).on('mouseenter mouseleave', function(event) {
                 var currentWrapper = $(this);
                 if (event.type === 'mouseenter') {
                     // Gets the wrapped image again to obtain the needed parameters.
-                    var currentImage = currentWrapper.children(fullImageSelector).first(),
-                        imageMedia = getImageAbsoluteUrl(currentImage),
+                    var imageMedia = getImageAbsoluteUrl(currentImage),
                         imageDescription = currentImage.attr(settings.imageDescriptionAttribute);
                     
                     var params = {
             });
         });
     };
-    
-    $.pinMe = function(options) {
-        return $('body').pinMe(options);
-    };
-})(jQuery);
+})( jQuery );

jquery.pinme.min.js

+(function(e){"use strict";e.fn.pinMe=function(t){var n={imageMediaAttribute:"src",imageDescriptionAttribute:"data-pin-description",buttonUrl:"img/pinit.png",buttonWidth:49,buttonHeight:25,buttonAlignment:"top-left",buttonPadding:5,buttonWillShowFunction:function(e){e.css({opacity:.75})},buttonOnMouseOverFunction:function(e,t){e.css({opacity:1,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"});t.css({opacity:.75,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"})},buttonOnMouseOutFunction:function(e,t){e.css({opacity:.75,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"});t.css({opacity:1,"-webkit-transition":"opacity .25s ease-out","-moz-transition":"opacity .25s ease-out",transition:"opacity .25s ease-out"})},popupX:100,popupY:100,popupHeight:580,popupWidth:730,popupName:"pinterest"},r=e.extend(n,t);var i=function(e){var t=e.position(),n=e.width(),i=e.height();switch(r.buttonAlignment){case"top-right":return{top:t.top+r.buttonPadding,left:t.left+n-r.buttonWidth-r.buttonPadding};case"bottom-right":return{top:t.top+i-r.buttonHeight-r.buttonPadding,left:t.left+n-r.buttonWidth-r.buttonPadding};case"bottom-left":return{top:t.top+i-r.buttonHeight-r.buttonPadding,left:t.left+r.buttonPadding};default:return{top:t.top+r.buttonPadding,left:t.left+r.buttonPadding}}};var s=function(e){var t=e.attr(r.imageMediaAttribute);if(!t.match("^http://")){var n=t.substr(0,1)==="/"?"":"/";t=window.location.origin+n+t}return t};return this.each(function(t){var n=e(this),o="http://pinterest.com/pin/create/button/",u=e('<img src="'+r.buttonUrl+'" id="pinme_button" />'),a="pinme_wrapper_"+t,f=e('<span class="'+a+'" />');n.wrap(f);e("."+a).on("mouseenter mouseleave",function(t){var a=e(this);if(t.type==="mouseenter"){var f=s(n),l=n.attr(r.imageDescriptionAttribute);var c={url:document.URL,media:f,description:l};var h=i(n);u.css({position:"absolute",top:h.top,left:h.left,cursor:"pointer"});r.buttonWillShowFunction(u);u.on("click mouseover mouseout",function(t){var i=e(this);if(t.type==="click"){var s=o+"?"+e.param(c),u="screenX="+r.popupX+",screenY="+r.popupY+",width="+r.popupWidth+",height="+r.popupHeight;window.open(s,r.popupName,u)}else if(t.type==="mouseover"){r.buttonOnMouseOverFunction(i,n)}else if(t.type==="mouseout"){r.buttonOnMouseOutFunction(i,n)}});u.appendTo(a)}else{u.off();u.remove()}return false})})}})(jQuery)