­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ register_post_type(); $this->add_metaboxes(); $this->add_admin_assets(); $this->add_shortcode_columns(); // $this->cq_hotspot_deactive(); } public function register_post_type(){ $labels = array( 'name' => _x("Image HotSpot", 'cq_hotspot'), 'menu_name' => _x('Image HotSpot', 'cq_hotspot'), 'singular_name' => _x('Image HotSpot', 'cq_hotspot'), 'add_new' => _x('Add New HotSpot', 'cq_hotspot'), 'add_new_item' => __('Add New HotSpot'), 'edit_item' => __('Edit HotSpot'), 'new_item' => __('New HotSpot'), 'view_item' => __('View HotSpot'), 'search_items' => __('Search HotSpot'), 'not_found' => __('No HotSpot Found'), 'not_found_in_trash' => __('No HotSpot Found in Trash'), 'parent_item_colon' => '' ); $args = array( 'labels' => $labels, 'hierarchical' => true, 'description' => 'Image HotSpot', // 'supports' => array('title', 'custom-fields'), 'supports' => array('title'), 'public' => false, // 'menu_position' => 80, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'show_in_admin_bar' => false, 'publicly_queryable' => true, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' => true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post' ); register_post_type('cq_hotspot', $args); // $args = array( 'post_type' => array('cq_hotspot'), // not 'page' // 'orderby' => $prlx_sort, // 'order' => $prlx_order, // 'numberposts' => $prlx_hotspot_nb_articles, // 'cat' => $cat ); // $myposts = get_posts( $args ); } public function cq_hotspot_deactive(){ register_deactivation_hook(__FILE__, 'remove_cq_hotspot_options'); function remove_cq_hotspot_options(){ delete_option('cq_hotspot_fields'); } } public function add_metaboxes(){ function cq_hotspot_change_default_title( $title ){ $screen = get_current_screen(); if ( $screen->post_type == 'cq_hotspot' ) { echo 'Enter Your HotSpot\'s Name'; } } add_filter( 'enter_title_here', 'cq_hotspot_change_default_title'); add_action('add_meta_boxes', 'cq_hotspot_add_meta_boxes_func'); function cq_hotspot_add_meta_boxes_func(){ add_meta_box( 'cq_hotspot_setting', __('Current HotSpot Setting', 'cq_hotspot'), 'cq_hotspot_setting_func', 'cq_hotspot'); add_meta_box('cq_hotspot_add_spot', __('Add HotSpot', 'cq_hotspot'), 'cq_hotspot_add_content_func', 'cq_hotspot', 'normal', 'default'); // add_meta_box('cq_hotspot_setting', __('Setting for this HotSpot', 'cq_hotspot'), 'cq_hotspot_setting_func', 'cq_hotspot', 'normal', 'high'); add_meta_box('cq_hotspot_shortcode', __('Get this HotSpot Codes', 'cq_hotspot'), 'cq_hotspot_codes_func', 'cq_hotspot' , 'side', 'low'); global $cq_hotspot_fields, $post; $cq_hotspot_fields = get_post_meta($post->ID, 'cq_hotspot_fields', true); if($cq_hotspot_fields){ add_meta_box('cq_hotspot_preview', __('Preview HotSpot (You can drag the icon to update it\'s position, don\'t forget to save)', 'cq_hotspot'), 'cq_hotspot_preview_func', 'cq_hotspot', 'normal', 'low'); } }; function cq_hotspot_preview_func(){ wp_enqueue_script('cq_hotspot_script_modernizr', plugins_url('js/modernizr.custom.49511.js', __FILE__), array("jquery")); global $cq_hotspot_fields, $post; $cq_hotspot_fields = get_post_meta($post->ID, 'cq_hotspot_fields', true); $output = ''; if($cq_hotspot_fields){ $output.= '
'; foreach ($cq_hotspot_fields as $field) { for ($j=0; $j < count($field["text_block"]); $j++) { $output.='
'; if(htmlspecialchars($field["popover_title"][$j])!=""){ $output.= '

'.htmlspecialchars($field["popover_title"][$j]).'

'; }; $output.= '

'.do_shortcode(htmlspecialchars($field["text_block"][$j])).'

'; // custom icon if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_customicon']!=""){ $output.='
'; }else{ $output.='
'; } if(!isset($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_pulsecolor'])) $cq_hotspot_fields[0]['setting_arr']['cq_hotspot_pulsecolor'] = 'info-icon-pulse2'; if(isset($field["popover_ispulse"])&&$field["popover_ispulse"][$j]=="yes") $output .= '
'; }; }; if($cq_hotspot_fields[0]["hotspot_img_url"]!=""){ // add the image $output.=''; } $output.='

Note: The position maybe different when you view it on your blog depends on the theme, so please focus on the blog, use here as a hint.

'; } echo html_entity_decode($output); } // the global hotspot setting panel function cq_hotspot_setting_func(){ global $cq_hotspot_fields, $post; $cq_hotspot_fields = get_post_meta($post->ID, 'cq_hotspot_fields', true); $output = ''; if($cq_hotspot_fields){ $output.= ''; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_autodelay']=="true"){ $output.= ''; }else{ $output.= ''; } if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_loop']=="true"){ $output.=''; }else{ $output.=''; }; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_triggerby']=="click"){ $output.=''; }else{ $output.=''; }; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_autohide']=="true"){ $output.=''; }else{ $output.=''; }; // if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_sticky']=="true"){ // $output.=''; // }else{ // $output.=''; // }; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_clickimageclose']=="true"){ $output.=''; }else{ $output.=''; }; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_dropinease']=="true"){ $output.=''; }else{ $output.=''; } if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_displayvideo']=="true"){ $output.=''; }else{ $output.=''; } if(!isset($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_pulsecolor'])) $cq_hotspot_fields[0]['setting_arr']['cq_hotspot_pulsecolor'] = 'info-icon-pulse2'; if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_pulsecolor']=="info-icon-pulse1"){ $output.=''; }else{ $output.=''; } $output.=''; /* if($cq_hotspot_fields[0]['setting_arr']['cq_hotspot_arrowstyle']=="icon1"){ $output.=''; }else{ $output.=''; }; */ $output.= '
Auto delay slideshow: yes no delay time of slideshow:
Auto delay slideshow: yes no delay time of slideshow:
Loop the slideshow or not: yes no
Loop the slideshow or not: yes no
Display the Popover when user: click mouseover
Display the Popover when user: click mouseover
Auto hide the Popover or not: yes no delay time of auto hide:
Auto hide the Popover or not: yes no delay time of auto hide:
Pause slideshow when hover: yes no
Pause slideshow when hover: yes no
Close the Popover when click the image: yes no
Close the Popover when click the image: yes no
Icon drop in animation: yes no
Icon drop in animation: yes no
Popover support video: yes no only support YouTube HTML5 embed player right now
Popover support video: yes no only support YouTube HTML5 embed player right now
Pulse animation border color: white black
Pulse animation border color: white black
Custom pin icon (24x24, globally): '; $output.= 'Choose Icon
Select the Popover icon:
Select the Popover icon:

'; }else{ $output.= ''; $output.= ''; $output.=''; $output.=''; $output.=''; // $output.=''; $output.=''; $output.=''; $output.=''; $output.=''; // $output.=''; $output.=''; $output.= '
Auto delay slideshow: yes no delay time of slideshow:
Loop the slideshow or not: yes no
Display the Popover when user: click mouseover
Auto hide the Popover or not: yes no delay time of auto hide
Pause slideshow when hover: yes no
Close the Popover when click the image: yes no
Icon drop in animation: yes no
Popover support video: yes no
Pulse border color: white black
Select the Popover icon:
Custom pin icon (24x24, globally): '; $output.= 'Choose Icon

'; } echo html_entity_decode($output); }; // the add/remove slide panel function cq_hotspot_add_content_func(){ $cq_hotspot_icon_arr = array( array( 'text' => 'icon 1', 'value' => 'icon1' ), array( 'text' => 'icon 2', 'value' => 'icon2' ), array( 'text' => 'icon 3', 'value' => 'icon3' ), array( 'text' => 'icon 4', 'value' => 'icon4' ), array( 'text' => 'icon 5', 'value' => 'icon5' ), array( 'text' => 'icon 6', 'value' => 'icon6' ), array( 'text' => 'icon 7', 'value' => 'icon7' ), array( 'text' => 'icon 8', 'value' => 'icon8' ) ); $popover_style_prop_arr = array( array( 'text' => 'default', 'value' => '' ), array( 'text' => 'green', 'value' => 'pop-green' ), array( 'text' => 'red', 'value' => 'pop-red' ), array( 'text' => 'orange', 'value' => 'pop-orange' ), array( 'text' => 'blue', 'value' => 'pop-blue' ), array( 'text' => 'pink', 'value' => 'pop-pink' ) ); $popover_direction_prop_arr = array( array( 'text' => 'top', 'value' => 'top' ), array( 'text' => 'right', 'value' => 'right' ), array( 'text' => 'bottom', 'value' => 'bottom' ), array( 'text' => 'left', 'value' => 'left' ) ); $popover_target_prop_arr = array( array( 'text' => '_self', 'value' => '_self' ), array( 'text' => '_blank', 'value' => '_blank' ) ); $popover_ispulse_arr = array( array( 'text' => 'no', 'value' => 'no' ), array( 'text' => 'yes', 'value' => 'yes' ) ); global $cq_hotspot_fields, $post; $cq_hotspot_fields = get_post_meta($post->ID, 'cq_hotspot_fields', true); $_tempNum = 0; $output = ''; $output.= '
'; if ( $cq_hotspot_fields ){ $output.= 'Image:
'; $output.= 'Choose Image

'; foreach ( $cq_hotspot_fields as $field ) { $output.= '
'; for ($j=0; $j < count($field["text_block"]); $j++) { $output .='

Popover

'; $output.= 'Title (optional):
'; $output.= 'Content:

'; // $output.='background:'; // $output.='font color:'; $output.= ''; $output.= ''; // $output.= 'direction:'; $output.='style:'; $output.='direction:'; $output.='icon:'; $output.= 'label:'; $output.= 'width:'; $output.= 'link:'; $output.='target:'; $output.='pulse animation:'; $output.='
Note: You can drag the icon in the preview to update it\'s position. Update position first, specify the icon link (if any) after saving.'; $output.= '
'; } $output.='Add More Popover
'; } }else{ $output.=' image:
Choose Image

Popover

Title (optional):
Content:

'; $output.='style:'; $output.='direction:'; $output.='icon:'; $output.='label:'; $output.='width:'; $output.= 'link:'; $output.='target:'; $output.='pulse:'; $output.='
Note: You can drag the label in the preview to update it\'s position.
Add More Popover
'; } $output.='

How to use:

'; $output.='

Step 1, choose an image and save.
Step 2, drag the icon above the image, add the content, don\'t forget to save again.

'; $output.='

Icon Reference:

icon 1 icon 2 icon 3 icon 4 icon 5 icon 6 icon 7 icon 8

'; $output.= '
'; echo html_entity_decode($output); } // the shortcode panel on the right of admin page function cq_hotspot_codes_func(){ global $post; echo '

Just copy and put it on the post or page editor:

[hotspot id=', $post->ID ,' /]

Or put it on the php file:

<?php echo do_shortcode(\'[hotspot id=',$post->ID,' /]\'); ?>

And you can view more works from me.

'; }; add_action( 'save_post', 'cq_hotspot_save_hotspot_post'); function cq_hotspot_save_hotspot_post($id){ // if(isset($_POST['cq_hotspot_setting'])){ // update_post_meta( $id, 'cq_hotspot_setting', strip_tags($_POST['cq_hotspot_setting'])); // } // verify nonce // global $cq_hotspot_fields; if(isset($_POST['cq_hotspot_setting'])){ if (!wp_verify_nonce($_POST['cq_hotspot_setting'], basename(__FILE__))) { return $id; } // check autosave if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) { return $id; } // check permissions if ('page' == $_POST['post_type']) { if (!current_user_can('edit_page', $id)) { return $id; } } elseif (!current_user_can('edit_post', $id)) { return $id; } $old = get_post_meta($post_id, 'cq_hotspot_fields', true); $new = array(); $setting_arr = array( 'cq_hotspot_animation' => $_POST['cq_hotspot_animation'], 'cq_hotspot_autodelay' => $_POST['cq_hotspot_autodelay'], 'cq_hotspot_delaytime' => $_POST['cq_hotspot_delaytime'], 'cq_hotspot_loop' => $_POST['cq_hotspot_loop'], 'cq_hotspot_triggerby' => $_POST['cq_hotspot_triggerby'], 'cq_hotspot_sticky' => $_POST['cq_hotspot_sticky'], 'cq_hotspot_autohide' => $_POST['cq_hotspot_autohide'], 'cq_hotspot_autohide_delay' => $_POST['cq_hotspot_autohide_delay'], 'cq_hotspot_arrowstyle' => $_POST['cq_hotspot_arrowstyle'], 'cq_hotspot_dropinease' => $_POST['cq_hotspot_dropinease'], 'cq_hotspot_displayvideo' => $_POST['cq_hotspot_displayvideo'], 'cq_hotspot_pulsecolor' => $_POST['cq_hotspot_pulsecolor'], 'cq_hotspot_customicon' => $_POST['cq_hotspot_customicon'], 'cq_hotspot_clickimageclose' => $_POST['cq_hotspot_clickimageclose'] ); // $hotspot_img_url = $_POST['hotspot_img_url']; $text_width_prop = $_POST['text_width_prop']; $text_top_prop = $_POST['text_top_prop']; $text_left_prop = $_POST['text_left_prop']; // $popover_background_prop = $_POST['popover_background_prop']; // $popover_fontcolor_prop = $_POST['popover_fontcolor_prop']; $popover_style_prop = $_POST['popover_style_prop']; $popover_direction_prop = $_POST['popover_direction_prop']; $cq_hotspot_icon = $_POST['cq_hotspot_icon']; $popover_title = $_POST['popover_title']; $popover_label_prop = $_POST['popover_label_prop']; $popover_link_prop = $_POST['popover_link_prop']; $popover_target_prop = $_POST['popover_target_prop']; $popover_ispulse = $_POST['popover_ispulse']; $text_block = $_POST['text_block']; for ( $j = 0; $j < count( $text_block); $j++ ) { $new[$j]['text_block'] = $text_block[$j]; $new[$j]['popover_title'] = $popover_title[$j]; $new[$j]['popover_label_prop'] = $popover_label_prop[$j]; $new[$j]['popover_link_prop'] = $popover_link_prop[$j]; $new[$j]['popover_target_prop'] = $popover_target_prop[$j]; $new[$j]['popover_ispulse'] = $popover_ispulse[$j]; $new[$j]['text_width_prop'] = $text_width_prop[$j]; $new[$j]['text_top_prop'] = $text_top_prop[$j]; $new[$j]['text_left_prop'] = $text_left_prop[$j]; // $new[$j]['popover_background_prop'] = $popover_background_prop[$j]; // $new[$j]['popover_fontcolor_prop'] = $popover_fontcolor_prop[$j]; $new[$j]['popover_style_prop'] = $popover_style_prop[$j]; $new[$j]['popover_direction_prop'] = $popover_direction_prop[$j]; $new[$j]['cq_hotspot_icon'] = $cq_hotspot_icon[$j]; } $new[0]['hotspot_img_url'] = $_POST['hotspot_img_url']; $new[0]['setting_arr'] = $setting_arr; if ( !empty( $new ) && $new != $old ){ update_post_meta( $id, 'cq_hotspot_fields', $new ); }else if(empty($new) && $old){ delete_post_meta( $id, 'cq_hotspot_fields', $old ); }; } } } public function add_admin_assets(){ function cq_hotspot_admin_scripts() { $screen = get_current_screen(); if($screen->post_type=="cq_hotspot"){ wp_enqueue_media(); // wp_enqueue_script('cq_hotspot_script_main', plugins_url('js/jquery.hotspot.js', __FILE__), array("jquery")); wp_enqueue_script( 'cq_hotspot_admin', plugins_url('js/hotspot_admin.js', __FILE__), array('jquery','jquery-ui-core','jquery-ui-draggable' )); } } function cq_hotspot_admin_styles() { $screen = get_current_screen(); if($screen->post_type=="cq_hotspot"){ wp_enqueue_style('cq_hotspot_admin_css', plugins_url( 'css/jquery.hotspot.admin.css' , __FILE__ )); // wp_enqueue_style('animate_css', plugins_url( 'css/animate.min.css' , __FILE__ )); } } add_action('admin_print_scripts', 'cq_hotspot_admin_scripts'); add_action('admin_print_styles', 'cq_hotspot_admin_styles'); } public function add_shortcode_columns(){ add_filter('manage_edit-cq_hotspot_columns', 'cq_set_custom_edit_cq_hotspot_columns'); add_filter('post_updated_messages', 'cq_hotspot_post_updated_messages'); add_action('manage_cq_hotspot_posts_custom_column', 'cq_custom_cq_hotspot_column', 10, 2); function cq_set_custom_edit_cq_hotspot_columns($columns) { return $columns + array('hotspot_shortcode' => __('Shortcode')); } function cq_hotspot_post_updated_messages($messages){ // global $post, $post_ID; $messages['cq_hotspot'] = array( 0 => '', 1 => __( 'HotSpot updated.', 'cq_hotspot' ), 2 => __( 'Custom field updated.', 'cq_hotspot' ), 3 => __( 'Custom field deleted.', 'cq_hotspot' ), 4 => __( 'HotSpot updated.', 'cq_hotspot' ), 5 => __( 'HotSpot updated.', 'cq_hotspot' ), 6 => __( 'HotSpot created.', 'cq_hotspot' ), 7 => __( 'HotSpot saved.', 'cq_hotspot' ), 8 => __( 'HotSpot updated.', 'cq_hotspot' ), 9 => __( 'HotSpot updated.', 'cq_hotspot' ), 10 => __( 'HotSpot updated.', 'cq_hotspot' ) ); return $messages; } function cq_custom_cq_hotspot_column($column, $post_id) { $hotspot_meta = get_post_meta($post_id, "cq_hotspot", true); $hotspot_meta = ($hotspot_meta != '') ? json_decode($hotspot_meta) : array(); switch ($column) { case 'hotspot_shortcode': echo "[hotspot id='$post_id' /]";//.\r\n."Just copy the short code to your post or page."; break; } } } } add_action( 'init', 'cq_hotspot_init'); function cq_hotspot_init(){ new CQ_HotSpot(); include_once dirname(__FILE__).'/cq-hotspot-shortcode.php'; } ?>