学做网站培训课程介绍

当前位置：

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淘客模板 图文教程 (112746 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • Wordpress幻灯片插件Slideshow Gallery (111589 次浏览)
    插件介绍在网站中插入幻灯片可以让网站更加绚丽,例如学做网站论坛首页顶部左侧就是一个幻灯片,这种方式是直接借助js文件,然后嵌入到网站主题中的.
  • 分享产品十佳排行淘客模板 图文教程 (17252 次浏览)
    今天分享一款分享产品十佳排行淘客模板，操作简单淘客主题，很符合SEO ，安装即用，给新手少走弯路。该主题是静态页+文章页，首页有16个广告位置。
  • 如何制作滚动产品图片展示 图文教程 (130128 次浏览)
    很多企业网站的首页都会做一种动态滚动展示企业产品的效果，是企业网站建设常用的方法。既展示了企业的产品，又让整个网站动静结合，不再毫无生气。
  • 静态网页不显示图片 (119350 次浏览)
    作者: 脉动Email: 511039684@qq.com详细内容:今天听了老师讲的课程第九节：什么是网站静态页面，然后自己就动手去照着做，文字什么的都可以显
  • DW网页中如何插入图片 视频教程 (1187857 次浏览)
    DW给网页插入图片一般有二种方法：一种是插入拥有ALT属性的图片，这在我们的企业网站制作教程中经常用到。另一种是插入背景图片，实现在图片
  • Wordpress网站产品图片放大镜效果制作 图文教程 (18744 次浏览)
    在之前的建站教程中，我们讲了如何制作淘宝图片放大镜功能，并给了相应的代码。这是一个固定的HTML代码，很多学习建网站的学员不懂怎么把它与Wordpres
  • 如何制作淘宝图片放大镜功能（附代码） 图文教程 (128384 次浏览)
    逛过淘宝的人都知道，淘宝有一个宝贝图片放大镜功能。光标指向小图片时，可以查看大图片细节。效果如下图：如何在自己做网站时，在自己的网站
  • 图片放大镜js插件文件jquery.imagezoom 图文教程 (17266 次浏览)
    我们在很多商城网站和企业网站都看到有图片放大镜功能，光标指向一个小图片时，可以显示出一个大图片。效果如下图：这种图片放大镜功能，可以
  • Wordpress网站添加彩色标签云效果 图文教程 (127082 次浏览)
    Wordpress标签云是将网站里的标签附着不同的颜色，好像一个七彩的云一样，在自己建网站时，可以美化我们的网站。效果如下：我们在学习怎么做
  • wordpress网站实现新闻头条效果（首篇样式加粗） 图文教程 (112866 次浏览)
    使用WP程序制作门户网站时，需要调用网站头条新闻，让第一个文章标题与其它的标题不一样，以形成新闻头条的效果。如下图：如何使用wp网站代码
  • 网站制作流程是什么 视频教程 (1270965 次浏览)
    相信很多朋友第一次接触到网络，接触到建站，会被域名、空间、解析、建站程序等各种问题困扰，甚至都不清楚网站制作流程，也不知该如何下手开始做自己
  • 论坛VIP学员网站制作课程分解 图文教程 (171253 次浏览)
    以下是我们学做网站论坛建站培训课程的所有内容：【只需支付680元的培训费用，就可以学习以下所有课程。】零基础网站制作培训报名地址：https://w

建站培训课程

最新教程

其它教程