显示图像点击时放大的图像

我想知道如何实现这一点，因为我想要的东西非常精益而且不想使用灯箱。这是我的代码到目前为止。它会自动为每个图像添加一个单击事件，并调用一个函数来显示大图像所在的路径。现在我只需要在屏幕中心显示一个大图像，就像模态窗口一样。显示图像点击时放大的图像

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title></title> 
    <script src="Scripts/jquery-1.6.2.min.js" type="text/javascript"></script> 

    <script type="text/javascript"> 

     $(document).ready(function() { 
      $('#imageContainer img').each(function (index) { 
       if ($(this).attr('onclick') != null) {      
        if ($(this).attr('onclick').indexOf("runThis()") == -1) {       
         $(this).click(function() { 
          $(this).attr('onclick'); 
          var src = $(this).attr("src"); 
          ShowLargeImage(src); 
         }); 
        } 
       } 
       else {      
        $(this).click(function() {       
         var src = $(this).attr("src"); 
         ShowLargeImage(src); 
        }); 
       } 
      }); 
     }); 

     function ShowLargeImage(imagePath) { 
      alert(imagePath.replace("small","large")); 
     } 

    </script> 

</head> 
<body> 
    <div id="imageContainer">   
     <br /> 
     <br />   
     <img src="/img/small/image3.jpg" /> 
     <br /> 
     <br /> 
     <img src="/img/small/image2.jpg" /> 
    </div> 
    <br /> 
    <img src="/img/small/image3.jpg" /> 
</body> 
</html>

来源

2012-09-17 Dkong

...想起来，我愿意使用一个插件，但希望能够让我传入图像路径的东西，还有一些不需要图像周围锚标签的东西 – Dkong

你不用不需要放弃灯箱或其他插件。只需编写您自己的代码，然后在Lightbox插件和thadaa中加载。例如，如果你想让自己更容易，你可以在'img'周围生成'link'元素，并从图像复制路径，同时将'small'改为'large'。你可能想要记住，它不一定是最好的选择，因为如果js由于某种原因被禁用，那么将不会链接到更大的图像，如果这是你想要考虑的事情。 – Joonas

例如http://jsfiddle.net/lollero/pkSxc/ – Joonas

你可以尝试这样的事情fiddle

$('#imageContainer img').each(function (index) { 
    if ($(this).attr('onclick') != null) {      
     if ($(this).attr('onclick').indexOf("runThis()") == -1) {       
      $(this).click(function() { 
       $(this).attr('onclick'); 
       var src = $(this).attr("src"); 
       ShowLargeImage(src); 
      }); 
     } 
    } 
    else {      
     $(this).click(function() {       
      var src = $(this).attr("src"); 
      ShowLargeImage(src); 
     }); 
    } 
}); 

$('body').on('click', '.modal-overlay', function() { 
    $('.modal-overlay, .modal-img').remove(); 
}); 

function ShowLargeImage(imagePath) { 
    $('body').append('<div class="modal-overlay"></div><div class="modal-img"><img src="' + imagePath.replace("small","large") + '" /></div>'); 
}

您可以修改CSS来获得正确对齐的图像，添加一个关闭按钮等。但其基本思想是存在的;）

编辑：

下面是一个example居中的图像和一个额外的衰落EFFE ct给它多一点shablam！

来源

2012-09-17 07:51:53 VDP

谢谢，正是我之后 – Dkong

它在IE中有点疯狂，但是谢谢:) – Dkong

IE对你的一切有点疯狂？ :)没有严重的，IE9对我来说工作得很好，IE7和IE8不支持不透明，所以覆盖层是黑色的。这对我来说是:) – VDP

显示图像点击时放大的图像

回答

相关问题