华仔博客

  • 首页
  • seo
  • 网站建设
  • 工具资源
  • 生活
  • 程序开发
  • 网上那点事
  • 网络营销
华仔博客
一个经验分享的博客
  1. 首页
  2. 网站建设
  3. 正文

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

2022年7月19日 563点热度 1人点赞 0条评论

<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;}

<script>
jQuery(document).ready(function($){
$(".jqzoom").imagezoom();
$("#thumblist li a").click(function(){
$(this).parents("li").addClass("tb-selected").siblings().removeClass("tb-selected");
$(".jqzoom").attr('src',$(this).find("img").attr("mid"));
$(".jqzoom").attr('rel',$(this).find("img").attr("big"));
});
});
</script>
metabox.php
<?php
//自定义面板类的实例化
/**********title*************/
$options = array();
$boxinfo = array('title' => '参数填写', 'id'=>'ashubox', 'page'=>array('post'), 'context'=>'normal', 'priority'=>'low','callback'=>'');$options[] = array( "name" => "产品缩略图上传",
"type" => "title");$options[] = array(
"name" => "缩略图1",
"desc" => "",
"id" => "ashu_upimg01",
"std" => "",
"button_label"=>'上传图片',
"type" => "media"
);

$options[] = array(
"name" => "缩略图2",
"desc" => "",
"id" => "ashu_upimg02",
"std" => "",
"button_label"=>'上传图片',
"type" => "media"
);
$options[] = array(
"name" => "缩略图3",
"desc" => "",
"id" => "ashu_upimg03",
"std" => "",
"button_label"=>'上传图片',
"type" => "media"
);
$options[] = array(
"name" => "缩略图4",
"desc" => "",
"id" => "ashu_upimg04",
"std" => "",
"button_label"=>'上传图片',
"type" => "media"
);
$options[] = array(
"name" => "缩略图5",
"desc" => "",
"id" => "ashu_upimg05",
"std" => "",
"button_label"=>'上传图片',
"type" => "media"
);

$new_box = new ashu_meta_box($options, $boxinfo);
?>

<div class="box">

<div class="tb-booth tb-pic tb-s310">
<?php if ( get_post_meta($post->ID, 'ashu_upimg01', true) ) {?>
<a href="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>"><img src="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>" rel="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>" class="jqzoom" /></a>
<?php }?>
</div>

<ul class="tb-thumb" id="thumblist">
<?php if ( get_post_meta($post->ID, 'ashu_upimg01', true) ) {?>
<li class="tb-selected"><div class="tb-pic tb-s40"><a href="javascript:void(0);"><img src="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>" mid="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>" big="<?php echo get_post_meta($post->ID,"ashu_upimg01",true);?>"></a></div></li>
<?php }else{?><li class="tb-selected"><div class="tb-pic tb-s40"></div></li>    <?php }?>

<?php if ( get_post_meta($post->ID, 'ashu_upimg02', true) ) {?>
<li><div class="tb-pic tb-s40"><a href="javascript:void(0);"><img  src="<?php echo get_post_meta($post->ID,"ashu_upimg02",true);?>" mid="<?php echo get_post_meta($post->ID,"ashu_upimg02",true);?>" big="<?php echo get_post_meta($post->ID,"ashu_upimg02",true);?>"></a></div></li>
<?php }else{?><li><div class="tb-pic tb-s40"></div></li>    <?php }?>

<?php if ( get_post_meta($post->ID, 'ashu_upimg03', true) ) {?>
<li><div class="tb-pic tb-s40"><a href="javascript:void(0);"><img src="<?php echo get_post_meta($post->ID,"ashu_upimg03",true);?>" mid="<?php echo get_post_meta($post->ID,"ashu_upimg03",true);?>" big="<?php echo get_post_meta($post->ID,"ashu_upimg03",true);?>"></a></div></li>
<?php }else{?><li><div class="tb-pic tb-s40"></div></li>    <?php }?>

<?php if ( get_post_meta($post->ID, 'ashu_upimg04', true) ) {?>
<li><div class="tb-pic tb-s40"><a href="javascript:void(0);"><img src="<?php echo get_post_meta($post->ID,"ashu_upimg04",true);?>" mid="<?php echo get_post_meta($post->ID,"ashu_upimg04",true);?>" big="<?php echo get_post_meta($post->ID,"ashu_upimg04",true);?>"></a></div></li>
<?php }?>

<?php if ( get_post_meta($post->ID, 'ashu_upimg05', true) ) {?>
<li><div class="tb-pic tb-s40"><a href="javascript:void(0);"><img src="<?php echo get_post_meta($post->ID,"ashu_upimg05",true);?>" mid="<?php echo get_post_meta($post->ID,"ashu_upimg05",true);?>" big="<?php echo get_post_meta($post->ID,"ashu_upimg05",true);?>"></a></div></li>
<?php }?>

</ul>

</div>

 

 

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

 

标签: WordPress
最后更新:2022年10月12日

admin

这个人很懒,什么都没留下

点赞
< 上一篇
下一篇 >

文章评论

取消回复
广告
搜索
最新 热点 随机
最新 热点 随机
谷歌SEO的页面标题和元描述的长度多长最合适? 如何利用wordpress编辑网站页面 Hitpaw watermark remover去图片视频水印神器 中国教育报发稿联系方式 WordPress博客页面和文章 如何充分利用您的 SEMrush 帐户 什么是 Robots.txt 文件以及Robots.txt 文件如何工作 ? WordPress列表页分页制作教程 youtube视频响应式插件Simple YouTube Responsive WordPress文章页添加展开/收缩功能 WordPress栏目调用去掉Ul标签 WordPress如何调用置顶文章 如何使用奈飞Netflix cookies登录奈飞Netflix GSA Search Engine Ranker项目屏幕 GSA Search Engine Ranker内容创建服务推荐 GSA Search Engine Ranker 仿写服务推荐 GSA Search Engine Ranker电子邮件账户推荐 GSA Search Engine Ranker搜索引擎提交服务推荐 GSA Search Engine Ranker索引服务推荐 GSA Search Engine Ranker验证码服务推荐 GSA Search Engine Ranker代理服务推荐 GSA Search Engine Ranker介绍 ChatGPT for Wechat-在微信上使用ChatGPT Netflix奈飞,HBO Max,Disney+账号会员免费分享 免费的ChatGPT API接口网站-The Free ChatGPT API 最后的生还者4k阿里云盘分享 Ahrefs账号-Ahrefs的终极使用教程 Ahrefs正版账号共享使用 Ahrefs共享团购账号 Wordpress文章列表没有缩略图就显示默认图片
谷歌SEO的页面标题和元描述的长度多长最合适?
中国教育报发稿联系方式 北京seo_网站内部优化实战篇 微博营销_企业微博的建设以及微博推广的技巧 ios开发_什么是UIImageView 一位做10年seo的老外经验之谈 百度外链工具如何批量拒绝垃圾链接 百度反向链接的增加与百度权重关系 章丘撤市设区最新进展 localhost与127.0.0.1的区别 谷歌feedburner邮件订阅详细介绍 神盾局特工第四季熟肉中英字幕 WordPress文章页添加展开/收缩功能 好消息,好消息8月10号lee重出江湖为站长解答问题 织梦dedecms集成微信公众平台功能(成功版最新版) 济南seo解释很多人不愿意原创的原因 网络营销_如何利用新浪微博营销 网站首页内容页内链多少个合适 企业微信营销必须牢记的5大要领 北京seo_robots.txt和nofollow的用法 有时,人生就是这样的无奈,无法改变的现实 北京seo成功申请搜外专栏 GSA Search Engine Ranker介绍 ios开发_父控件、子控件 seo博客_seo寻找资源的方法终极解密 Mountain Lion系统php环境的搭建 2014的前半年。。。。。。 discuz rss全文输出教程 个人微信号怎么实现公众号自动回复功能 转载:seowhy夫唯的人生经历 phpstudy forbidden 403错误的处理方法

© 2012-2023 sem-home.com.版权所有.

主题KRATOS貌似作者网站打不开了,就没加,嗯就这样

京ICP备12020022号