顯示圖像點擊時放大的圖像

我想知道如何實現這一點，因爲我想要的東西非常精益而且不想使用燈箱。這是我的代碼到目前爲止。它會自動爲每個圖像添加一個單擊事件，並調用一個函數來顯示大圖像所在的路徑。現在我只需要在屏幕中心顯示一個大圖像，就像模態窗口一樣。顯示圖像點擊時放大的圖像

<!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

顯示圖像點擊時放大的圖像

回答

相關問題