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 | jQuery Pin It Button for Images |
Version | 0.5 |
Comparing to | |
See all releases |
Version 0.5
- css/admin.css +41 -0
- css/style.css +27 -0
- images/default-pinit-button.png +0 -0
- images/pinit-button.png +0 -0
- images/point-five.png +0 -0
- index.php +3 -0
- jquery-pin-it-button-for-images.php +271 -0
- js/script.js +81 -0
- readme.txt +74 -0
- screenshot-1.jpg +0 -0
- screenshot-2.jpg +0 -0
- screenshot-3.jpg +0 -0
- 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
|