jQuery Pin It Button for Images - Version 0.5

Version Description

  • Released 2012-12-9
  • Feature: Pinterest window opens as a pop-up
  • Feature: Ability to exclude certain classes from showing the "Pin it" button
  • Feature: Ability to include only certain classes that will show the "Pin it" button
  • Feature: Image is highlighted once hovered
  • Feature: IE7 image highlight fix: using a transparent png instead of background-color

=

Download this release

Release Info

Developer mrsztuczkens
Plugin Icon wp plugin jQuery Pin It Button for Images
Version 0.5
Comparing to
See all releases

Version 0.5

Files changed (13) hide show
  1. css/admin.css +41 -0
  2. css/style.css +27 -0
  3. images/default-pinit-button.png +0 -0
  4. images/pinit-button.png +0 -0
  5. images/point-five.png +0 -0
  6. index.php +3 -0
  7. jquery-pin-it-button-for-images.php +271 -0
  8. js/script.js +81 -0
  9. readme.txt +74 -0
  10. screenshot-1.jpg +0 -0
  11. screenshot-2.jpg +0 -0
  12. screenshot-3.jpg +0 -0
  13. screenshot-4.jpg +0 -0
css/admin.css ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ table.form-table th {
2
+ font-weight:bold;
3
+ }
4
+
5
+ .settings-table {
6
+ background-color:#E7E7E7;
7
+ border:1px solid #B1B1B1;
8
+ border-radius:20px;
9
+ padding:20px;
10
+ width:60%;
11
+ }
12
+
13
+ .settings-table th {
14
+ font-weight:bold;
15
+ vertical-align:top;
16
+ text-align:left;
17
+ padding:0px 10px;
18
+ width:150px;
19
+ }
20
+
21
+ .settings-table p {
22
+ margin-top: 4px;
23
+ }
24
+
25
+ p.jpibfi-success-message, p.jpibfi-error-message {
26
+ border: 1px solid;
27
+ border-radius: 10px;
28
+ margin: 10px 0px;
29
+ padding:10px;
30
+ width: 55%;
31
+ }
32
+
33
+ p.jpibfi-success-message {
34
+ color: #4F8A10;
35
+ background-color: #DFF2BF;
36
+ }
37
+
38
+ p.jpibfi-error-message {
39
+ color: #D8000C;
40
+ background-color: #FFBABA;
41
+ }
css/style.css ADDED
@@ -0,0 +1,27 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .pinit {
2
+ position:relative;
3
+ display:inline-block;
4
+ }
5
+
6
+ .pinit .pinit-overlay {
7
+ position:absolute;
8
+ top:0;
9
+ left:0;
10
+ width:100%;
11
+ height:100%;
12
+ z-index:200;
13
+ display:none;
14
+ text-align:left;
15
+ }
16
+
17
+ .pinit .pinit-overlay a {
18
+ position:relative;
19
+ top:0%;
20
+ left:0%;
21
+ margin:20px 0 0 20px;
22
+ display:block;
23
+ width:65px;
24
+ height:41px;
25
+ background:transparent url('../images/pinit-button.png') no-repeat 0 0;
26
+ text-indent:-9999em;
27
+ }
images/default-pinit-button.png ADDED
Binary file
images/pinit-button.png ADDED
Binary file
images/point-five.png ADDED
Binary file
index.php ADDED
@@ -0,0 +1,3 @@
 
 
 
1
+ <?php
2
+ /* Let The Force Be With You */
3
+ ?>
jquery-pin-it-button-for-images.php ADDED
@@ -0,0 +1,271 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <?php
2
+ /*
3
+ Plugin Name: jQuery Pin It Button For Images
4
+ Plugin URI: http://www.wordpress.org/
5
+ Description: Highlights images on hover and adds a "Pin It" button over them for easy pinning.
6
+ Author: Marcin Skrzypiec
7
+ Version: 0.5
8
+ Author URI: http://www.wordpress.org/
9
+ */
10
+
11
+ if (!empty($_SERVER['SCRIPT_FILENAME']) && 'jquery-pin-it-button-for-images.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Stop! Hammer time!'); //Plugin shouldn't be accessed directly
12
+
13
+ define("JPIBFI_VERSION", "0.5");
14
+
15
+ if (!class_exists("jQuery_Pin_It_Button_For_Images")) {
16
+ class jQuery_Pin_It_Button_For_Images {
17
+
18
+ var $admin_options_name = "jptbfi_options";
19
+ var $description_option_values = array ( '1', '2', '3' );
20
+
21
+ //Constructor
22
+ function jQuery_Pin_It_Button_For_Images() {}
23
+
24
+ //Returns an array of admin options, updates settings if necessary
25
+ function get_admin_options() {
26
+ $admin_options = array(
27
+ 'image_selector' => 'div.jpibfi_container img',
28
+ 'disabled_classes' => 'nopin;wp-smiley',
29
+ 'description_option' => '1',
30
+ 'enabled_classes' => '',
31
+ 'compatibility_mode' => $this->description_option_values[0]
32
+ );
33
+
34
+ $dev_options = get_option( $this->admin_options_name );
35
+ $changes_in_db = count( $admin_options ) != count ( $dev_options ); //if arrays aren't of the same length, changes in db needed
36
+
37
+ //invalid values need to be corrected and saved in db
38
+ if ( ! empty( $dev_options ) ) {
39
+ foreach ( $dev_options as $key => $option ) {
40
+ switch ($key) {
41
+ case "image_selector":
42
+ $admin_options[$key] = $option;
43
+ break;
44
+ case "disabled_classes":
45
+ case "enabled_classes":
46
+ if ( $this->contains_css_class_names_or_empty( $option ) )
47
+ $admin_options[$key] = $option;
48
+ else
49
+ $changes_in_db = true;
50
+ break;
51
+ case "description_option":
52
+ if ( in_array( $option, $this->description_option_values ) )
53
+ $admin_options[$key] = $option;
54
+ else
55
+ $changes_in_db = true;
56
+ break;
57
+ case "compatibility_mode":
58
+ if ( strcmp( $option, '0') != 0 && strcmp( $option, '1') != 0 ) //invalid value in database
59
+ $changes_in_db = true;
60
+ else
61
+ $admin_options[$key] = $option;
62
+ break;
63
+ }
64
+ }
65
+ } else {
66
+ $changes_in_db = true;
67
+ }
68
+
69
+ //if something changed in the database, we need to save it
70
+ if ( $changes_in_db )
71
+ update_option( $this->admin_options_name, $admin_options );
72
+ return $admin_options;
73
+ }
74
+
75
+ //fire it when activating the plugin
76
+ function init_plugin() {
77
+ $this->get_admin_options();
78
+ }
79
+
80
+ //Adds all necessary scripts
81
+ function add_plugin_scripts() {
82
+ // Adding my custom js, dependent on jquery
83
+ wp_enqueue_script( 'jquery-pin-it-button-script', plugins_url( '/js/script.js', __FILE__ ), array('jquery'), JPIBFI_VERSION, false );
84
+ // Registering my custom style
85
+ wp_register_style( 'jquery-pin-it-button-style', plugins_url( '/css/style.css', __FILE__ ), array(), JPIBFI_VERSION, 'all' );
86
+ //Enqueue the style
87
+ wp_enqueue_style( 'jquery-pin-it-button-style');
88
+ }
89
+
90
+ function add_admin_site_scripts() {
91
+ wp_register_style( 'jquery-pin-it-button-admin-style', plugins_url( '/css/admin.css', __FILE__ ), array(), JPIBFI_VERSION, 'all' );
92
+ wp_enqueue_style( 'jquery-pin-it-button-admin-style' );
93
+ }
94
+
95
+ function is_string_css_class_name($class_name) {
96
+ return 1 == preg_match( "/^-?[_a-zA-Z]+[_a-zA-Z0-9-]*$/", $class_name );
97
+ }
98
+
99
+ function contains_css_class_names_or_empty($str) {
100
+ if ( strlen ($str ) == 0 )
101
+ return true;
102
+
103
+ $names = explode( ";", $str );
104
+ $only_css_class_names = true;
105
+
106
+ foreach ( $names as $name ) {
107
+ if ( false == $this->is_string_css_class_name( $name ) ) {
108
+ $only_css_class_names = false;
109
+ break;
110
+ }
111
+ }
112
+ return $only_css_class_names;
113
+ }
114
+
115
+ //Prints out the admin page
116
+ function print_admin_page() {
117
+ $dev_options = $this->get_admin_options();
118
+
119
+ if ( isset( $_POST['update_jQuery_Pin_It_Button_For_Images']) ) {
120
+ $errors = array();
121
+
122
+ if ( ! $this->contains_css_class_names_or_empty( $_POST['disabled_classes'] ) )
123
+ array_push( $errors, "Disabled classes field not valid");
124
+
125
+ if ( ! $this->contains_css_class_names_or_empty( $_POST['enabled_classes'] ) )
126
+ array_push( $errors, "Enabled classes field not valid");
127
+
128
+ if ( ! in_array( $_POST['description_option'], $this->description_option_values ) )
129
+ array_push( $errors, "Description option field not valid");
130
+
131
+ if ( 0 == count( $errors ) ) {
132
+ $dev_options['image_selector'] = sanitize_text_field( $_POST['image_selector'] );
133
+ $dev_options['compatibility_mode'] = $_POST['compatibility_mode'] == '1' ? '1' : '0';
134
+ $dev_options['disabled_classes'] = $_POST['disabled_classes'];
135
+ $dev_options['enabled_classes'] = $_POST['enabled_classes'];
136
+ $dev_options['description_option'] = $_POST['description_option'];
137
+ update_option( $this->admin_options_name, $dev_options );
138
+ ?>
139
+ <p class="jpibfi-success-message"><?php _e( "Settings Updated.", "jQuery_Pin_It_Button_For_Images" );?></p>
140
+ <?php
141
+ } else {
142
+ foreach( $errors as $error ) {
143
+ echo "<p class='jpibfi-error-message'>" . $error . "</p>";
144
+ }
145
+ }
146
+ }
147
+ ?>
148
+ <div class="wrap">
149
+ <h2>jQuery Pin It Button For Images</h2>
150
+ <form method="post" action="<?php echo $_SERVER["REQUEST_URI"]; ?>">
151
+ <h3>Plugin settings</h3>
152
+
153
+ <table class="settings-table">
154
+ <tbody>
155
+ <tr>
156
+ <th scope="row"><label for="image_selector">Image selector</label></th>
157
+ <td>
158
+ <input type="text" size="50" id="image_selector" name="image_selector" value="<?php echo esc_attr( $dev_options['image_selector'] );?>" />
159
+ <p class="description">jQuery selector for all the images that should have the "Pin it" button. Set the value to <b>div.jpibfi_container img</b> if you want the "Pin it" button to appear only on images in content or <b>img</b> to appear on all images on site (including sidebar, header and footer). If you know a thing or two about jQuery, you might use your own selector. <a href="http://api.jquery.com/category/selectors/" target="_blank">Click here</a> to read about jQuery selectors.</p>
160
+ </td>
161
+ </tr>
162
+ <tr>
163
+ <th scope="row"><label for="disabled_classes">Disabled classes</label></th>
164
+ <td>
165
+ <textarea rows="3" cols="25" id="disabled_classes" name="disabled_classes"><?php echo esc_attr( $dev_options['disabled_classes'] );?></textarea>
166
+ <p class="description">Pictures with these CSS classes won't show the "Pin it" button. Please separate multiple classes with semicolons. Spaces are not accepted.</p>
167
+ </td>
168
+ </tr>
169
+ <tr>
170
+ <th scope="row"><label for="enabled_classes">Enabled classes</label></th>
171
+ <td>
172
+ <textarea rows="3" cols="25" id="enabled_classes" name="enabled_classes"><?php echo $dev_options['enabled_classes'];?></textarea>
173
+ <p class="description">Pictures with these CSS classes will show the "Pin it" button. Please separate multiple classes with semicolons. If this field is empty, images with any (besides disabled ones) classes will show the Pin It button.</p>
174
+ </td>
175
+ </tr>
176
+ <tr>
177
+ <th scope="row"><label for="description_option">Description source</label></th>
178
+ <td>
179
+ <select id="description_option" name="description_option">
180
+ <option value="1" <?php if ( "1" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Page title</option>
181
+ <option value="2" <?php if ( "2" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Page description</option>
182
+ <option value="3" <?php if ( "3" == $dev_options['description_option'] ) echo "selected='selected'"; ?>>Picture title or alt attributes</option>
183
+ </select>
184
+ <p class="description">From where the Pinterest message should be taken.</p>
185
+ </td>
186
+ </tr>
187
+ <tr>
188
+ <th scope="row"><label> IE7 Compatibility mode</label></th>
189
+ <td>
190
+ <input type="checkbox" id="compatibility_mode" name="compatibility_mode" <?php echo "1" == $dev_options['compatibility_mode'] ? "checked='checked'" : "";?>" value="1" /><label for="compatibility_mode"> Compatibility mode</label>
191
+ <p class="description">Check this if you want the plugin to work properly on IE7. Without this it doesn't highlight images on IE7.</p>
192
+ </td>
193
+ </tr>
194
+ <tr>
195
+ <th scope="row"></th>
196
+ <td>
197
+ <input type="submit" style="padding:7px;float:right;" name="update_jQuery_Pin_It_Button_For_Images" value="<?php _e( 'Update Settings', 'jQuery_Pin_It_Button_For_Images' ) ?>" />
198
+ </td>
199
+ </tr>
200
+ </tbody>
201
+ </table>
202
+ </form>
203
+ </div>
204
+ <?php
205
+ }//End function print_admin_page()
206
+
207
+ function print_admin_page_action() {
208
+ $page = add_options_page( 'jQuery Pin It Button For Images', 'jQuery Pin It Button For Images', 9, basename( __FILE__ ), array( $this, 'print_admin_page' ) );
209
+ add_action( 'admin_print_styles-' . $page, array($this, 'add_admin_site_scripts'));
210
+ }
211
+
212
+ function jptbfi_instance_action() {
213
+ $dev_options = $this->get_admin_options();
214
+ ?>
215
+ <script type="text/javascript">
216
+ jQuery(document).ready(function($) {
217
+ $('.jpibfi').parent('div').addClass('jpibfi_container');
218
+ $('<?php echo $dev_options['image_selector'];?>').pinit({disabled_classes:'<?php echo $dev_options['disabled_classes'];?>',
219
+ description_option:'<?php echo $dev_options['description_option'];?>'<?php if ( $dev_options['enabled_classes'] ) echo ", enabled_classes:'".$dev_options['enabled_classes']."'";?>});
220
+ });
221
+ </script>
222
+ <?php
223
+ }
224
+
225
+ function print_header_style_action() {
226
+ $dev_options = $this->get_admin_options();
227
+ ?>
228
+ <style type="text/css">
229
+ .pinit .pinit-overlay {
230
+ <?php
231
+ if ( $dev_options['compatibility_mode'] == '0' )
232
+ echo 'background-color: rgba(255,255,255,0.5);';
233
+ else
234
+ echo "background: url('" . plugins_url('/images/point-five.png', __FILE__) . "') repeat;";
235
+ ?>
236
+ }</style>
237
+ <?php
238
+ }
239
+
240
+ function print_hidden_field_script($content) {
241
+ return "<input class='jpibfi' type='hidden' />" . $content;
242
+ }
243
+
244
+ function plugin_settings_filter($links) {
245
+ $settings_link = '<a href="options-general.php?page=jquery-pin-it-button-for-images.php">Settings</a>';
246
+ array_unshift( $links, $settings_link );
247
+ return $links;
248
+ }
249
+ }
250
+ } //End Class jQuery_Pin_It_Button_For_Images
251
+
252
+ if ( class_exists("jQuery_Pin_It_Button_For_Images") ) {
253
+ $jptbfi_instance = new jQuery_Pin_It_Button_For_Images();
254
+ }
255
+
256
+ //Actions and Filters
257
+ if ( isset($jptbfi_instance) ) {
258
+ //Actions
259
+ add_action( 'wp_enqueue_scripts', array( &$jptbfi_instance, 'add_plugin_scripts' ) );
260
+ add_action( 'activate_jquery-pin-it-button-for-images/jquery-pin-it-button-for-images.php', array( &$jptbfi_instance, 'init_plugin' ) );
261
+ add_action( 'admin_menu', array( &$jptbfi_instance, 'print_admin_page_action' ) );
262
+ add_action( 'wp_footer', array( &$jptbfi_instance, 'jptbfi_instance_action' ) );
263
+ add_action( 'wp_head', array( &$jptbfi_instance, 'print_header_style_action' ) );
264
+
265
+ //Filters
266
+ $plugin = plugin_basename( __FILE__ );
267
+ add_filter( "plugin_action_links_$plugin", array( &$jptbfi_instance, 'plugin_settings_filter' ) );
268
+ add_filter( "the_content", array( &$jptbfi_instance, 'print_hidden_field_script' ) );
269
+ }
270
+
271
+ ?>
js/script.js ADDED
@@ -0,0 +1,81 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ (function($){
2
+ //Attach this new method to jQuery
3
+ $.fn.extend({
4
+
5
+ pinit: function(options) {
6
+
7
+ var defaults = {
8
+ wrap: '<span class="pinit"/>',
9
+ pageURL: document.URL,
10
+ pageTitle: document.title
11
+ }
12
+ if (options.description_option == 3)
13
+ defaults.pageDescription = $('meta[name="description"]').attr('content');
14
+
15
+ var o = $.extend(defaults, options);
16
+ var discriminator_classes = o.disabled_classes.split(';');
17
+
18
+ if (!(typeof o.enabled_classes === 'undefined')) //variable exists
19
+ var allowed_classes = o.enabled_classes.split(';');
20
+
21
+ //Iterate over the current set of matched elements
22
+ return this.each(function(i) {
23
+ if (!(typeof allowed_classes === 'undefined')) {//variable exists
24
+ var has_class = false;
25
+ for(var c in allowed_classes){
26
+ if($(this).hasClass(allowed_classes[c])){
27
+ has_class = true;
28
+ break;
29
+ }
30
+ }
31
+ if (!has_class)
32
+ return;
33
+ }
34
+
35
+ for(var c in discriminator_classes){
36
+ if($(this).hasClass(discriminator_classes[c]))
37
+ return;
38
+ }
39
+
40
+ //to identify the image when loaded
41
+ $(this).attr('indexer', i);
42
+
43
+ var e = $(this),
44
+ pi_media = e.data('media') ? e.data('media') : e[0].src,
45
+ pi_url = o.pageURL,
46
+ pi_isvideo = 'false';
47
+
48
+ //Pin message depending on settings
49
+ var pi_desc;
50
+ if (o.description_option == 3)
51
+ pi_desc = e.attr('title') ? e.attr('title') : e.attr('alt');
52
+ else if (o.description_option == 2)
53
+ pi_desc = o.pageDescription;
54
+ if (!pi_desc)
55
+ pi_desc = o.pageTitle;
56
+
57
+ bookmark = 'http://pinterest.com/pin/create/bookmarklet/?media=' + encodeURI(pi_media) + '&url=' + encodeURI(pi_url) + '&is_video=' + encodeURI(pi_isvideo) + '&description=' + encodeURI(pi_desc);
58
+
59
+ e.wrap(o.wrap);
60
+ e.after('<span class="pinit-overlay" style=" indexer= "' + i + '"><a href="' + bookmark + '" class="pinit-button">Pin It</a></span>');
61
+
62
+ $(this).load(function(){
63
+ var indexer = $(this).attr("indexer");
64
+ $('span[indexer="' + indexer + '"]').css('height', $(this).innerHeight() + 'px');
65
+ });
66
+
67
+ $('.pinit .pinit-button').on('click', function () {
68
+ window.open($(this).attr('href'), 'Pinterest', 'width=632,height=253,status=0,toolbar=0,menubar=0,location=1,scrollbars=1');
69
+ return false;
70
+ });
71
+
72
+ $('.pinit').mouseenter(function () {
73
+ $(this).children('.pinit-overlay').fadeIn(200);
74
+ }).mouseleave(function () {
75
+ $(this).children('.pinit-overlay').fadeOut(200);
76
+ });
77
+
78
+ });
79
+ }
80
+ });
81
+ })(jQuery);
readme.txt ADDED
@@ -0,0 +1,74 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ === jQuery Pin It Button For Images ===
2
+ Contributors: mrsztuczkens
3
+ Donate link: http://bit.ly/Uw2mEP
4
+ Tags: pinterest, pin it, button, image, images, pinit, social media, hover, click, photo, photos
5
+ Requires at least: 3.0.0
6
+ Tested up to: 3.4.1
7
+ Stable tag: 0.5
8
+ License: GPLv2 or later
9
+
10
+ Highlights images on hover and adds a Pinterest "Pin It" button over them for easy pinning.
11
+
12
+ == Description ==
13
+ If you're looking for an easy way to pin images in your blog posts and pages, this plugin will help you with that. It highlights images and adds a "Pin it" button over them once the user hovers his mouse over an image. Once the user clicks the "Pin it" button, the plugin shows a pop-up window with the image and a description. Everything is ready for pinning, although the user can alter the description.
14
+
15
+ The plugin allows you to:
16
+
17
+ * choose from where the description should be taken (possible options: page title, page description and alt/title tags from the image)
18
+ * choose which pictures shouldn't show the "Pin it" button (using classes)
19
+ * choose which pictures should show the "Pin it" button (all images, post images, images with certain class(es))
20
+
21
+ Once you activate the plugin, it's ready to go with the typical settings - button appears on all images within the body of your posts/pages that aren't marked with "nopin" or "wp-smiley" classes.
22
+
23
+ **Please report any bugs (or feature requests) in the plugin's support forum.**
24
+
25
+ Check out the new features in the Changelog.
26
+
27
+ Please note that the plugin doesn't work if the user has Javascript disabled.
28
+
29
+ Please consider donating any spare change to help me work on this plugin more. Donations can be made at: http://bit.ly/Uw2mEP
30
+
31
+ (This plugin is not related to or endorsed by Pinterest or its affiliates)
32
+
33
+ == Installation ==
34
+
35
+ 1. Upload the folder to the `/wp-content/plugins/` directory
36
+ 1. Activate the plugin through the 'Plugins' menu in WordPress
37
+ 1. Configuration interface can be found under `Settings - jQuery Pin It Button For Images`. There's also a link to the plugin settings in the "Installed plugins" menu.
38
+
39
+ == Frequently Asked Questions ==
40
+
41
+ = Where can I change the plugins settings? =
42
+
43
+ Configuration interface can be found under `Settings - jQuery Pin It Button For Images`. There's also a link to the plugin settings in the "Installed plugins" menu.
44
+
45
+ = How do I add the button only to specific images? =
46
+ On the plugin settings page, there is a "Enabled classes" setting. Please enter there a class (or classes) that should show the "Pin it" button. Please note that images that don't contain any of the classes added in this setting won't show the "Pin it" button.
47
+
48
+ = How do I disable the button on specific images? =
49
+ Use the "Disabled classes" setting on the settings page - add there specific classes or use the "nopin" class.
50
+
51
+ = Where do I report bugs, improvements and suggestions? =
52
+ Please report them in the plugin's support forum.
53
+
54
+ == Screenshots ==
55
+
56
+ 1. Base image in a blog post
57
+ 2. Highlighted image and "Pin it" button on hover
58
+ 3. Settings panel
59
+ 4. Pinterest pop-up window
60
+
61
+ == Changelog ==
62
+
63
+ = 0.5 =
64
+ * Released 2012-12-9
65
+ * Feature: Pinterest window opens as a pop-up
66
+ * Feature: Ability to exclude certain classes from showing the "Pin it" button
67
+ * Feature: Ability to include only certain classes that will show the "Pin it" button
68
+ * Feature: Image is highlighted once hovered
69
+ * Feature: IE7 image highlight fix: using a transparent png instead of background-color
70
+
71
+ == Upgrade Notice ==
72
+
73
+ = 0.5 =
74
+ First version of the plugin.
screenshot-1.jpg ADDED
Binary file
screenshot-2.jpg ADDED
Binary file
screenshot-3.jpg ADDED
Binary file
screenshot-4.jpg ADDED
Binary file