Commits

Germano Guerrini committed a5ec5b9

Added a README and the button image.

  • Participants
  • Parent commits cac75cc

Comments (0)

Files changed (1)

+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.
+
+Getting started
+-
+
+By default, PinMe will look for images with a `pinme` class
+
+    :::html
+    <img src="..." class="pinme" />
+
+Then you have to add jQuery and PinMe:
+
+    :::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>
+
+Options
+-
+    :::javascript
+    imageSelector: '.pinme'
+The CSS class of the images you want to share.
+
+    :::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.
+
+    :::javascript
+    imageDescriptionAttribute: 'data-pin-description'
+The HTML attribute of the image whose value is the description to be sent to Pinterest.
+
+    :::javascript
+    buttonUrl: 'img/pinit.png'
+The url of the "pin-it" button, in case you don't like it the default one.
+If you edit this, be sure to check the two options below.
+
+    :::javascript
+    buttonWidth: 49
+The width of the custom button in pixels.
+
+    :::javascript
+    buttonHeight: 25
+The height of the custom button in pixels.
+
+    :::javascript
+    buttonAlignment: 'top-left'
+The position of the button relatively to the image. Options are `top-left`, `top-right`, `bottom-left` and `bottom-right`.
+
+    :::javascript
+    buttonPadding: 5
+The distance of the button from the margin of the image.
+
+    :::javascript
+    buttonWillShowFunction: function(button) {
+        button.css({
+            opacity: 0.75
+        });
+    }
+A function that gets called just before the button is added to the DOM.
+
+    :::javascript
+    buttonOnMouseOverFunction: function(button, image) {
+        button.css({
+            opacity: 1.0,
+            '-webkit-transition': 'opacity .25s ease-out',
+            '-moz-transition': 'opacity .25s ease-out',
+            transition: 'opacity .25s ease-out'
+        });
+        image.css({
+            opacity:0.75,
+            '-webkit-transition': 'opacity .25s ease-out',
+            '-moz-transition': 'opacity .25s ease-out',
+            transition: 'opacity .25s ease-out'
+        });
+    }
+A function that gets triggered by the mouse over event of the button.
+
+    :::javascript
+    buttonOnMouseOutFunction: function(button, image) {
+        button.css({
+            opacity: 0.75,
+            '-webkit-transition': 'opacity .25s ease-out',
+            '-moz-transition': 'opacity .25s ease-out',
+            transition: 'opacity .25s ease-out'}
+        );
+        image.css({
+            opacity:1,
+            '-webkit-transition': 'opacity .25s ease-out',
+            '-moz-transition': 'opacity .25s ease-out',
+            transition: 'opacity .25s ease-out'
+        });
+    }
+A function that gets triggered by the mouse out event of the button.
+
+    :::javascript
+    popupX: 100
+The X position in pixel of the popup the will be open by the button, relatively to the browser window.
+
+
+    :::javascript
+    popupY: 100
+The Y position in pixel of the popup the will be open by the button, relatively to the browser window.
+
+    :::javascript
+    popupHeight: 580
+The height in pixel 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.
+
+    :::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
+
+Version
+-
+
+1.0
+
+
+License
+-
+
+MIT