学做网站培训课程介绍

当前位置：

WordPress网站产品图片放大镜效果制作

在之前的建站教程中，我们讲了如何制作淘宝图片放大镜功能，并给了相应的代码。这是一个固定的HTML代码，很多学习建网站的学员不懂怎么把它与Wordpress结合起来，使用动态PHP代码进行调用。

fd

下面介绍一下Wordpress网站产品图片放大镜效果制作方法及代码。

方法/步骤

  1. 下载图片放大镜功能JQUERY插件代码，下载地址：图片放大镜js插件文件jquery.imagezoom；
  2. 将下载下来的JQUERY插件，放在与自己网页同一个目录下；
  3. 在自己网站的头部文件</head>标签上面，使用以下的JS代码来调用图片放大镜功能JQUERY插件。（不懂HTML标签，可先学习一下html入门教程） 
    

    <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>
  4. 在Style.css文件里添加以下的CSS样式代码，用于控制放大镜效果样式； 
    

    /* //图片放大 */
    
.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;}
  5. 在底部模板里放上以下的JS代码； 
    

    <script type="text/javascript">
    
$(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>
  6. 安装WordPress后台框架WPD主题设置面板； 
    

    <?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);   
    
?>
  7. 在显示放大镜效果的位置使用以下的代码进行调用； 
    

    <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>
  8. 这样就实现了放大镜代码与Wordpress程序的结合，制作出Wordpress网站产品图片放大镜效果。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 用什么建网站？Wordpress建网站好不好 (110785 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • Wordpress 如何开启伪静态 视频教程 (1120063 次浏览)
    做网站制作好之后，如果网站做SEO优化时，需要进行伪静态的设置，同样也可以通过网站设置选置进行设置。Wordpress伪静态设置方法 登陆到wordpr
  • wordpress网站如何制作产品滚动展示 图文教程 (120596 次浏览)
    对于一些公司企业网站，在网站的首页可以通过滚动展示的效果去展示公司的产品，这样可以有效的节省网页的空间，并且能更多的展示产品的图片。对于
  • Wordpress网站产品图片放大镜效果制作 图文教程 (18519 次浏览)
    在之前的建站教程中，我们讲了如何制作淘宝图片放大镜功能，并给了相应的代码。这是一个固定的HTML代码，很多学习建网站的学员不懂怎么把它与Wordpres
  • Dreamweaver 如何添加网页图片热区链接 视频教程 (111816 次浏览)
    以下是学做网站论坛关于《Dreamweaver 如何添加网页图片热区链接》视频教程。
  • 如何给网页添加背景图片 视频教程 (1117456 次浏览)
    使用DW软件给网页添加背景图片的步骤： 启动Dreamweaver程序，新建一个新的HTML文档，将文档保存到电脑的适当位置。 单击属性栏中的“属性
  • 怎么做网站产品图片滚动展示功能 图文教程 (130841 次浏览)
    很多网站的产品图片都采用滚动展示的效果，我们在学建网站时，也可以制作网站产品图片滚动展示功能。方法如下：第一步、删除原有图片调用所
  • 如何制作淘宝图片放大镜功能（附代码） 图文教程 (125007 次浏览)
    逛过淘宝的人都知道，淘宝有一个宝贝图片放大镜功能。光标指向小图片时，可以查看大图片细节。效果如下图：如何在自己做网站时，在自己的网站
  • 图片放大镜js插件文件jquery.imagezoom 图文教程 (17246 次浏览)
    我们在很多商城网站和企业网站都看到有图片放大镜功能，光标指向一个小图片时，可以显示出一个大图片。效果如下图：这种图片放大镜功能，可以
  • Wordpress网站添加彩色标签云效果 图文教程 (123647 次浏览)
    Wordpress标签云是将网站里的标签附着不同的颜色，好像一个七彩的云一样，在自己建网站时，可以美化我们的网站。效果如下：我们在学习怎么做
  • 如何让网站上的文字产生阴影效果 图文教程 (18098 次浏览)
    有些网站的文字的后面或者下面都有阴影效果，这样使文字更有立体感。并且可以根据自己网站版面要求去设置阴影的颜色，离文字的距离，阴影范围的大小等
  • 上海电气公司网站制作案例 图文教程 (15915 次浏览)
    这是一家上海电气公司网站，网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO，网站导航制作使用全屏宽度菜单，每个菜单项宽
  • 全璟数码印花公司网站制作案例 图文教程 (14206 次浏览)
    广州全璟皮革制品有限公司网站,本公司是一家细致印花厂家，集数码印花、服装印花、数码直喷、印花加工等设计、生产、销售。全璟数码印花公司网站由

建站培训课程

最新教程

其它教程