如何将另一页中的图像显示为带缩放的灯箱

时间：2014-02-20 11:46:59

标签： jquery html image magnific-popup

我是Jquery的新手。我有一个图像需要用放大镜在另一个标签中打开。这将在新标签页中打开，但我不知道如何为此图像添加变焦镜头。

<a href="images/layout.jpg" ><img src="images/layout.jpg" /></a>

我该怎么做？
的修改

<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
    var totalImgs=$('img').length;

$('img').each(function(){
    var imgSel=$(this);
    var imgActualWidth = $(this).width();
    $(this).wrap( "<div class='imgs'></div>" );
    var par=$(this).parent();
    par.css({'z-index':''+totalImgs+''});
    totalImgs=totalImgs-1;
    par.append("<div><span>+</span>&nbsp;&nbsp;<span>-</span></div>");
    par.children('div').on('click','span:nth-child(1)',function(){
        imgSel.width(imgSel.width()+imgActualWidth);
    });
    par.children('div').on('click','span:nth-child(2)',function(){
        if(imgSel.width()>imgActualWidth)
        {
        imgSel.width(imgSel.width()-imgActualWidth);
        }
    });
});
    </script>
    <style>
        .imgs{
    position:relative;
    width:70px;
    height:70px;
    z-index:100;
}
.imgs div{
    position:absolute;
    top:0px;
    left:15px;
    font-size:20px;
    color:red;
    font-weight:bold;
}
.imgs div span{
    cursor:pointer;
}
        </style>


    </head>
    <body>
        <img src="images/course_layout.jpg"/>
    </body>
</html>

请看这个

1 个答案:

答案 0 :(得分：1)

首先，您需要点击链接打开一个页面：

<a href="images/pagecontainingimage.html" target="_blank" ><img src="images/layout.jpg" /></a>

然后在下面的小提琴中使用代码：

Fiddle

整个代码：

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
  <style type='text/css'>
    .imgs{
        position:relative;
        width:70px;
        height:70px;
        z-index:100;
    }
    .imgs div{
        position:absolute;
        top:0px;
        left:15px;
        font-size:20px;
        color:red;
        font-weight:bold;
    }
    .imgs div span{
        cursor:pointer;
    }
  </style>
  <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    var totalImgs=$('img').length;

    $('img').each(function(){
        var imgSel=$(this);
        var imgActualWidth = $(this).width();
        $(this).wrap( "<div class='imgs'></div>" );
        var par=$(this).parent();
        par.css({'z-index':''+totalImgs+''});
        totalImgs=totalImgs-1;
        par.append("<div><span>+</span>&nbsp;&nbsp;<span>-</span></div>");
        par.children('div').on('click','span:nth-child(1)',function(){
            imgSel.width(imgSel.width()+imgActualWidth);
        });
        par.children('div').on('click','span:nth-child(2)',function(){
            if(imgSel.width()>imgActualWidth)
            {
            imgSel.width(imgSel.width()-imgActualWidth);
            }
        });
    });
    });//]]>  

    </script>
    </head>
    <body>
       <img src="images/course_layout.jpg"/>
    </body>
    </html>