学做网站培训课程介绍

当前位置：

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淘客模板 图文教程 (111439 次浏览)
    今天再次给大家分享一款自己仿的一个wordpress淘客模板。这个模板是我自己在别人模板的基础上进行二次开发，自己比较喜欢。注意：此模板不支持IE6,
  • 用什么建网站？Wordpress建网站好不好 (110907 次浏览)
    用什么建网站？Wordpress建网站好不好？这些问题经常被新手问上问起。可以这样说，wordpress程序可以建各种类型的网站，它的功能强大之处令人称赞，
  • 分享产品十佳排行淘客模板 图文教程 (16973 次浏览)
    今天分享一款分享产品十佳排行淘客模板，操作简单淘客主题，很符合SEO ，安装即用，给新手少走弯路。该主题是静态页+文章页，首页有16个广告位置。
  • 如何制作滚动产品图片展示 图文教程 (127307 次浏览)
    很多企业网站的首页都会做一种动态滚动展示企业产品的效果，是企业网站建设常用的方法。既展示了企业的产品，又让整个网站动静结合，不再毫无生气。
  • html5做网站：怎样用HTML5在网页图片上写文字 图文教程 (157614 次浏览)
    在做网站过程中，如果想在一张网页上实现图片加文字的格式，就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片，然后
  • 如何制作网站轮播图（网页图片轮播幻灯片代码分享） 图文教程 (135764 次浏览)
    各位同学大家好，我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间，对我的辅导帮助。现在在这里我想给同学做分享一
  • Wordpress网站产品图片放大镜效果制作 图文教程 (18588 次浏览)
    在之前的建站教程中，我们讲了如何制作淘宝图片放大镜功能，并给了相应的代码。这是一个固定的HTML代码，很多学习建网站的学员不懂怎么把它与Wordpres
  • 如何制作淘宝图片放大镜功能（附代码） 图文教程 (125550 次浏览)
    逛过淘宝的人都知道，淘宝有一个宝贝图片放大镜功能。光标指向小图片时，可以查看大图片细节。效果如下图：如何在自己做网站时，在自己的网站
  • 图片放大镜js插件文件jquery.imagezoom 图文教程 (17169 次浏览)
    我们在很多商城网站和企业网站都看到有图片放大镜功能，光标指向一个小图片时，可以显示出一个大图片。效果如下图：这种图片放大镜功能，可以
  • Wordpress网站添加彩色标签云效果 图文教程 (124324 次浏览)
    Wordpress标签云是将网站里的标签附着不同的颜色，好像一个七彩的云一样，在自己建网站时，可以美化我们的网站。效果如下：我们在学习怎么做
  • wordpress网站实现新闻头条效果（首篇样式加粗） 图文教程 (112595 次浏览)
    使用WP程序制作门户网站时，需要调用网站头条新闻，让第一个文章标题与其它的标题不一样，以形成新闻头条的效果。如下图：如何使用wp网站代码
  • 新手学习网站制作（0基础入门） 图文教程 (111791 次浏览)
    零基础新手要学习网站建设，以下的网站建设教程是零基础新手必须学习的网站制作教程。只有将以下的基础知识学会了，才能为以后建网站打下坚实的基础。
  • 上海电气公司网站制作案例 图文教程 (15810 次浏览)
    这是一家上海电气公司网站，网站制作时采用传统企业网站制作方法与布局结构。网站顶部使用大尺寸的LOGO，网站导航制作使用全屏宽度菜单，每个菜单项宽

建站培训课程

最新教程

其它教程