wordpress 产品图片放大镜效果制作

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/images/jquery.imagezoom.min.js"></script>

.box{width:380px;}
.box img{vertical-align:top;border:0;}
.tb-pic a{display:table-cell;text-align:center;vertical-align:middle;}
.tb-pic a img{vertical-align:middle;}
.tb-pic a{*display:block;*font-family:Arial;*line-height:1;}
.tb-thumb{margin:10px 0 0;overflow:hidden;}
.tb-thumb li{background:none repeat scroll 0 0 transparent;float:left;height:42px;margin:0 6px 0 0;overflow:hidden;padding:1px;}
.tb-s310, .tb-s310 a{height:310px;width:380px;}
.tb-s310{max-height:310px;max-width:380px;}
.tb-s310 img{max-height:306px;max-width:376px;}
.tb-s310 a{*font-size:271px;}
.tb-s40 a{*font-size:35px;}
.tb-s40 img{width:40px;height:40px;}
.tb-s40, .tb-s40 a{height:40px;width:40px;}
.tb-booth{border:1px solid #CDCDCD;position:relative;z-index:1;}
.tb-thumb .tb-selected{background:none repeat scroll 0 0 #C30008;height:44px;padding:2px;}
.tb-thumb .tb-selected div{background-color:#FFFFFF;border:medium none;}
.tb-thumb li div{border:1px solid #CDCDCD;}
div.zoomDiv{z-index:999;position:absolute;top:0px;left:0px;width:200px;height:200px;background:#ffffff;border:1px solid #CCCCCC;display:none;text-align:center;overflow:hidden;}
div.zoomMask{position:absolute;background:url("images/mask.png") repeat scroll 0 0 transparent;cursor:move;z-index:1;}

metaboxclass.php：

1. <?php
2. /*
3. wordpress文章自定义字段类文件
4. Version: 1.0
5. Author: 树是我的朋友
6. Author URI: http://www.ashuwp.com
7. License: http://www.ashuwp.com/courses/highgrade/298.html
8. */
9. class ashu_meta_box{
10.     var $options;
11.     var $boxinfo;
13.     //构造函数
14.     function ashu_meta_box($options,$boxinfo){
15.         $this->options = $options;
16.         $this->boxinfo = $boxinfo;
18.         add_action('admin_menu', array(&$this, 'init_boxes'));
19.         add_action('save_post', array(&$this, 'save_postdata'));
20.     }
22.     //初始化
23.     function init_boxes(){
24.         $this->add_script_and_styles();
25.         $this->create_meta_box();
26.     }
28.     //加载css和js脚本
29.     function add_script_and_styles(){
30.         if(basename( $_SERVER['PHP_SELF']) == "page.php"
31.         || basename( $_SERVER['PHP_SELF']) == "page-new.php"
32.         || basename( $_SERVER['PHP_SELF']) == "post-new.php"
33.         || basename( $_SERVER['PHP_SELF']) == "post.php"
34.         || basename( $_SERVER['PHP_SELF']) == "media-upload.php")
35.         {
36.             //注意加载的脚本的url
37.             wp_enqueue_style('metabox_fields_css', TEMJS_URI. 'metabox_fields.css');
38.             wp_enqueue_script('metabox_fields_js',TEMJS_URI. 'metabox_fields.js');
39.             wp_enqueue_style('thickbox');
40.             wp_enqueue_script('media-upload');
41.             wp_enqueue_script('thickbox');
44.             if(isset($_GET['hijack_target']))
45.             {
46.                 add_action('admin_head', array(&$this,'add_hijack_var'));
47.             }
48.         }
49.     }
51.     /*************************/
52.     function add_hijack_var()
53.     {
54.         echo "<meta name='hijack_target' content='".$_GET['hijack_target']."' />\n";
55.     }
57.     //创建自定义面板
58.     function create_meta_box(){
59.         if ( function_exists('add_meta_box') && is_array($this->boxinfo['page']) )
60.         {
61.             foreach ($this->boxinfo['page'] as $area)
62.             {
63.                 if ($this->boxinfo['callback'] == '') $this->boxinfo['callback'] = 'new_meta_boxes';
65.                 add_meta_box(
66.                     $this->boxinfo['id'],
67.                     $this->boxinfo['title'],
68.                     array(&$this, $this->boxinfo['callback']),
69.                     $area, $this->boxinfo['context'],
70.                     $this->boxinfo['priority']
71.                 );
72.             }
73.         }
74.     }
76.     //创建自定义面板的显示函数
77.     function new_meta_boxes(){
78.         global $post;
79.         //根据类型调用显示函数
80.         foreach ($this->options as $option)
81.         {
82.             if (method_exists($this, $option['type']))
83.             {
84.                 $meta_box_value = get_post_meta($post->ID, $option['id'], true);
85.                 if($meta_box_value != "") $option['std'] = $meta_box_value;
87.                 echo '<div class="alt kriesi_meta_box_alt meta_box_'.$option['type'].' meta_box_'.$this->boxinfo['context'].'">';
88.                 $this->$option['type']($option);
89.                 echo '</div>';
90.             }
91.         }
93.         //隐藏域
94.         echo'<input type="hidden" name="'.$this->boxinfo['id'].'_noncename" id="'.$this->boxinfo['id'].'_noncename" value="'.wp_create_nonce( 'ashumetabox' ).'" />';
95.     }
97.     //保存字段数据
98.     function save_postdata() {
99.         if( isset( $_POST['post_type'] ) && in_array($_POST['post_type'],$this->boxinfo['page'] ) && (isset($_POST['save']) || isset($_POST['publish']) ) ){
100.         $post_id = $_POST['post_ID'];
102.         foreach ($this->options as $option) {
103.             if (!wp_verify_nonce($_POST[$this->boxinfo['id'].'_noncename'], 'ashumetabox')) {
104.                 return $post_id ;
105.             }
106.             //判断权限
107.             if ( 'page' == $_POST['post_type'] ) {
108.                 if ( !current_user_can( 'edit_page', $post_id  ))
109.                 return $post_id ;
110.             } else {
111.                 if ( !current_user_can( 'edit_post', $post_id  ))
112.                 return $post_id ;
113.             }
114.             //将预定义字符转换为html实体
115.             if( $option['type'] == 'tinymce' ){
116.                     $data =  stripslashes($_POST[$option['id']]);
117.             }elseif( $option['type'] == 'checkbox' ){
118.                     $data =  $_POST[$option['id']];
119.             }else{
120.                 $data = htmlspecialchars($_POST[$option['id']], ENT_QUOTES,"UTF-8");
121.             }
123.             if(get_post_meta($post_id , $option['id']) == "")
124.             add_post_meta($post_id , $option['id'], $data, true);
126.             elseif($data != get_post_meta($post_id , $option['id'], true))
127.             update_post_meta($post_id , $option['id'], $data);
129.             elseif($data == "")
130.             delete_post_meta($post_id , $option['id'], get_post_meta($post_id , $option['id'], true));
132.         }
133.         }
134.     }
135.     //显示标题
136.     function title($values){
137.         echo '<p>'.$values['name'].'</p>';
138.     }
139.     //文本框
140.     function text($values){
141.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];
143.         echo '<p>'.$values['name'].'</p>';
144.         echo '<p><input type="text" size="'.$values['size'].'" value="'.$values['std'].'" id="'.$values['id'].'" name="'.$values['id'].'"/>';
145.         echo $values['desc'].'<br/></p>';
146.         echo '<br/>';
147.     }
148.     //文本域
149.     function textarea($values){
150.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];
152.         echo '<p>'.$values['name'].'</p>';
153.         echo '<p><textarea class="kriesi_textarea" cols="60" rows="5" id="'.$values['id'].'" name="'.$values['id'].'">'.$values['std'].'</textarea>';
154.         echo $values['desc'].'<br/></p>';
155.         echo '<br/>';
156.     }
157.     //媒体上传
158.     function media($values){
159.         if(isset($this->database_options[$values['id']])) $values['std'] = $this->database_options[$values['id']];
161.         //图片上传按钮
162.         global $post_ID, $temp_ID;
163.         $uploading_iframe_ID = (int) (0 == $post_ID ? $temp_ID : $post_ID);
164.         $media_upload_iframe_src = "media-upload.php?post_id=$uploading_iframe_ID";
165.         $image_upload_iframe_src = apply_filters('image_upload_iframe_src', "$media_upload_iframe_src&amp;type=image");
167.         $button = '<a href="'.$image_upload_iframe_src.'&amp;hijack_target='.$values['id'].'&amp;TB_iframe=true" id="'.$values['id'].'" class="k_hijack button thickbox" onclick="return false;" >上传</a>';
169.         //判断图片格式,图片预览
170.         $image = '';
171.         if($values['std'] != '') {
172.             $fileextension = substr($values['std'], strrpos($values['std'], '.') + 1);
173.             $extensions = array('png','gif','jpeg','jpg','pdf','tif');
175.             if(in_array($fileextension, $extensions))
176.             {
177.                 $image = '<img src="'.$values['std'].'" />';
178.             }
179.         }
181.         echo '<div id="'.$values['id'].'_div" class="kriesi_preview_pic">'.$image .'</div>';
182.         echo '<p>'.$values['name'].'</p><p>';
183.         if($values['desc'] != "") echo '<p>'.$values['desc'].'<br/>';
184.         echo '<input class="kriesi_preview_pic_input" type="text" size="'.$values['size'].'" value="'.$values['std'].'" name="'.$values['id'].'"/>'.$button;
185.         echo '</p>';
186.         echo '<br/>';
187.     }
188.     //单选框
189.     function radio( $values ){
190.         if(isset($this->database_options[$values['id']]))
191.             $values['std'] = $this->database_options[$values['id']];
192.         echo '<p>'.$values['name'].'</p>';
193.         foreach( $values['buttons'] as $key=>$value ) {
194.             $checked ="";
195.             if($values['std'] == $key) {
196.                 $checked = 'checked = "checked"';
197.             }
198.             echo '<input '.$checked.' type="radio" class="kcheck" value="'.$key.'" name="'.$values['id'].'"/>'.$value;
199.         }
200.     }
201.     //复选框
202.     function checkbox($values){
203.         echo '<p>'.$values['name'].'</p>';
204.         foreach( $values['buttons'] as $key=>$value ) {
205.             $checked ="";
206.             if( is_array($values['std']) && in_array($key,$values['std'])) {
207.                 $checked = 'checked = "checked"';
208.             }
209.             echo '<input '.$checked.' type="checkbox" class="kcheck" value="'.$key.'" name="'.$values['id'].'[]"/>'.$value;
210.         }
211.         echo '<label for="'.$values['id'].'">'.$values['desc'].'</label><br/></p>';
212.     }
213.     //下拉框
214.     function dropdown($values){
215.         echo '<p>'.$values['name'].'</p>';
216.             //选择内容可以使页面、分类、菜单、侧边栏和自定义内容
217.             if($values['subtype'] == 'page'){
218.                 $select = 'Select page';
219.                 $entries = get_pages('title_li=&orderby=name');
220.             }else if($values['subtype'] == 'cat'){
221.                 $select = 'Select category';
222.                 $entries = get_categories('title_li=&orderby=name&hide_empty=0');
223.             }else if($values['subtype'] == 'menu'){
224.                 $select = 'Select Menu in page left';
225.                 $entries = get_terms( 'nav_menu', array( 'hide_empty' => false ) );
226.             }else if($values['subtype'] == 'sidebar'){
227.                 global $wp_registered_sidebars;
228.                 $select = 'Select a special sidebar';
229.                 $entries = $wp_registered_sidebars;
230.             }else{
231.                 $select = 'Select...';
232.                 $entries = $values['subtype'];
233.             }
235.             echo '<p><select class="postform" id="'. $values['id'] .'" name="'. $values['id'] .'"> ';
236.             echo '<option value="">'.$select .'</option>  ';
238.             foreach ($entries as $key => $entry){
239.                 if($values['subtype'] == 'page'){
240.                     $id = $entry->ID;
241.                     $title = $entry->post_title;
242.                 }else if($values['subtype'] == 'cat'){
243.                     $id = $entry->term_id;
244.                     $title = $entry->name;
245.                 }else if($values['subtype'] == 'menu'){
246.                     $id = $entry->term_id;
247.                     $title = $entry->name;
248.                 }else if($values['subtype'] == 'sidebar'){
249.                     $id = $entry['id'];
250.                     $title = $entry['name'];
251.                 }else{
252.                     $id = $entry;
253.                     $title = $key;
254.                 }
256.                 if ($values['std'] == $id ){
257.                     $selected = "selected='selected'";
258.                 }else{
259.                     $selected = "";
260.                 }
262.                 echo"<option $selected value='". $id."'>". $title."</option>";
263.             }
265.         echo '</select>';
266.         echo $values['desc'].'<br/></p>';
267.         echo '<br/>';
268.     }
270.     //编辑器
271.     function tinymce($values){
272.         if(isset($this->database_options[$values['id']]))
273.             $values['std'] = $this->database_options[$values['id']];
275.         echo '<p>'.$values['name'].'</p>';
276.         wp_editor( $values['std'], $values['id'] );
277.         //wp_editor( $values['std'], 'content', array('dfw' => true, 'tabfocus_elements' => 'sample-permalink,post-preview', 'editor_height' => 360) );
278.         //带配置参数
279.         /*wp_editor($meta_box['std'],$meta_box['name'].'_value', $settings = array(quicktags=>0,//取消html模式
280.         tinymce=>1,//可视化模式
281.         media_buttons=>0,//取消媒体上传
282.         textarea_rows=>5,//行数设为5
283.         editor_class=>"textareastyle") ); */
284.     }
286. }
287. ?>