华仔博客

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

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

2022年7月19日 35点热度 0人点赞 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. ?>

 

标签: 暂无
最后更新:2022年7月19日

admin

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

点赞
< 上一篇

文章评论

取消回复
广告
搜索
最新 热点 随机
最新 热点 随机
wordpress 产品图片放大镜效果制作 phpmyadmin 修改表 Table 'wp_options' is read only GSA Search Engine Ranker 项目窗口详细介绍 iRedMail 支持的密码 Wild Rift 英雄联盟手游美服转日服(国际服之间的转换)教程 网站更换主题喽 Burn It All Down (ft. PVRIS) _Worlds 2021 - League of Legends iredmail批量导入用户 Helo command rejected: ACCESS DENIED的 问题处理 宝塔面板编译开启ngx_pagespeed成功版 华仔教你如何看清一个网站和公众号 网站建设_wdcp mysql5.5升级5.6成功版 ios开发_UIButton的常见设置 ios开发_UIButton的状态 ios开发_什么是UIImageView ios开发_UIView的常见属性 ios开发_父控件、子控件 ios开发IBAction和IBOutlet的介绍 ios开发笔记 织梦dedecms集成微信公众平台功能(成功版最新版) spamassassin垃圾邮件拦截插件 号外号外谷歌字体国内已经正常打开 网络资源_Roundcube推荐插件整理 如何下载m3u8格式的文件 phpstudy forbidden 403错误的处理方法 centos7 mysql5.7安装教程 apache双机搭建高可用负载均衡 keepalived 安装教程 centos7下apache安装以及自动启动 营销魔术师的最新举动......震撼了100万营销人
wordpress 产品图片放大镜效果制作
宝塔面板编译开启ngx_pagespeed成功版 seo详解企业优化容易作弊的3点 李彦宏“改变,从你我开始”为题的公开信 北京seo_网站三大标签的优化 seo博客_百度11名的快速解决方法 如何策划个seo优化方案 ecshop首页通过关键词调用产品 seo工具_无忧帐号管理软件 做百度知道不被删除的实战技巧 这就是生活_备案那点事 你真的会换链接吗 如何编辑短信营销内容吸引客户 seo博客_网站内部链接应该这么建设 迈耶Google高层跳槽,担任雅虎新任CEO ecshop商品详情页显示4个同类别下的推荐商品 seo工具_免费刷百度下拉框,百度相关词 新手做淘宝电商要学会的心态 长春杀婴盗车事件后媒体的反思! dedecms转wordpress详细版,成功版,经典版 北京seo_昨天的百度小更新 ios开发_什么是UIImageView 有时,人生就是这样的无奈,无法改变的现实 网络口碑传播的特点 济南seo教程:怎样让网站的百度排名再度提升 兄弟贾磊谈域名注册要领 seo博客_网站图片的优化 营销魔术师的最新举动......震撼了100万营销人 dedecms 点击加载更多功能的实现 Helo command rejected: ACCESS DENIED的 问题处理 (转载)如何正确使用微同步来更新微博

© 2021 sem-home.com.版权所有

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

京ICP备12020022号