show image onclick javascript

如何在點擊圖像的tumbnail版本時加載原始圖像？ Im在ASP.NET中與javascript組合使用。show image onclick javascript

原始圖像很大，所以它們已經在服務器端進行了縮放。這使網站加載速度更快。但不知何故，圖像的兩個版本（原始和縮略圖）正在被下載。

我試圖只下載圖像的縮略版。當用戶點擊圖像時，我想顯示原始圖像。

我怎樣才能做到這一點？

2010-09-17 Yustme

用fancybox重新標記，因爲這在問題的任何地方都沒有提到，只在下面的註釋中提到。 – TimS 2010-09-17 12:20:18

的Html如下面針對每個縮略圖像應該做的伎倆

<a href="[url to original image]" target="_blank" id="thumbnail_link"> 
    <img src="[url to thumbnail image]" alt="Click to see the full image" /> 
</a>

編輯：修改以示出使用的fancybox的。

使用上面標記下面的Java腳本一起：

$(document).ready(function() { 
    $("a#thumbnail_link").fancybox(); 
})'

不要忘了，包括jQuery和的fancybox js文件。

來源

2010-09-17 09:42:30 VinayC

我不確定鏈接到全尺寸的圖像是他的後... – TimS 2010-09-17 09:47:31

@TimS，上面的代碼將點擊縮略圖時，在新窗口中顯示全尺寸圖像。除非，他希望在頁面內的圖層中顯示完整圖像，否則我更喜歡高於標記，因爲它不依賴於java腳本。 – VinayC 2010-09-17 09:56:36

這個問題的標題是「show image onclick javascript」：D – TimS 2010-09-17 10:07:18

我認爲你必須先顯示縮略圖，然後點擊你需要在新的彈出窗口中打開原始圖像。你可以使用下面給出的代碼來做到這一點 -

<SCRIPT LANGUAGE="JavaScript"> 
function openImage(imageFile){ 
windowOpen=window.open("",'Open','toolbar=no,location=no,directories=no,menubar=no,scrollbars=no,resizable=1,width=420,height=420'); 
windowOpen.document.writeln("<head><title>Image</title></head><body>"); 
windowOpen.document.writeln('<img src=http://www.mysite.com/' + imageFile + 'border=1>'); 
windowOpen.document.writeln("</body></html>"); 
} 
</SCRIPT>

然後在onClick的縮略圖圖像期間調用這個openImage（）方法。您可以將imageFile作爲參數傳遞給函數。

來源

2010-09-17 09:42:52

可以工作，但不需要彈出窗口，因爲圖像可以加載到覆蓋格。 – TimS 2010-09-17 09:46:43

嗨，我顯示在fancybox，這是JavaScript的圖像。 www.fancybox。淨。 – Yustme 2010-09-17 09:51:41

@Yustme - 不知道花哨哥們，但我的答案中的代碼是一個javascript方法。不知道你將如何在強悍的花哨盒中使用這種方法。 – 2010-09-17 10:05:46

聽起來你在HTML中引用了這兩個圖像，即使其中一個圖像是隱藏的，所以瀏覽器同時請求這兩個圖像。您需要做的是使用JavaScript從頭開始創建全尺寸<img>標籤，然後將其添加到HTML中的相關位置。一旦添加到DOM，瀏覽器將加載完整大小的圖像。

來源

2010-09-17 09:44:54 TimS

但它會在鼠標點擊事件後添加嗎？因爲現在它的下載。這是不必要的。 – Yustme 2010-09-17 09:53:52

的確如此，在鼠標點擊時渲染較大圖像的HTML，不要將其隱藏在頁面加載的HTML中，然後使用JS稍後顯示它，因爲無論如何瀏覽器都會下載它。 – TimS 2010-09-17 10:09:00

另外，只是一個想法，你有沒有嘗試過使用jQuery？它非常適合你正在做的事情，你會發現一個完整的插件負載，使用close/next/previous按鈕來渲染全尺寸圖像。只是谷歌jQuery圖片庫。 – TimS 2010-09-17 10:11:01

花式箱，所有你需要做的是

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

問候，安迪。

來源

2010-09-17 10:24:16 cherhan

HTML代碼：

<!DOCTYPE html> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
    <title> - jsFiddle demo</title> 
    <script type='text/javascript' src='http://identify.site88.net/showimage.js'></script> 
    <style type='text/css'> 
     #test{ 
     display:none 
     } 
     #blackout { 
     width:50%; 
     position:absolute; 
     background-color: rgba(0, 0, 0, .5); 
     display: none; 
     z-index: 20; 
     } 
     .modal { 
     margin: auto; 
     } 
     #close { 
     color: white; 
     font-weight: bold; 
     cursor: pointer; 
     } 
    </style> 
    <script type='text/javascript'> 
    $(window).load(function(){ 
    $('img').click(function() { 
     var img = $(this).clone().addClass('modal').appendTo($('#blackout')); 
     $('#blackout > #close').click(function() { 
      $('#blackout').fadeOut(function() { 
       img.remove(); 
      }); 
     }); 
     $('#blackout').fadeIn(); 
    }); 
    }); 

    $(window).load(function(){ 
    $('#close2').hide(); 
    $('span').click(function() { 
     $('#test').show(); 
     $('#close2').show(); 
     $('#txtsp').hide(); 
     $('#blackout2 > #close2').click(function() { 
      $('#blackout2').fadeOut(function() { 
       $('#test').hide(); 
       $('#txtsp').show(); 
       $(this).css({ 
        "text-decoration": '' 
       }); 
      }); 
     }); 
     $('#blackout2').fadeIn(); 
    }); 
    }); 
    </script> 
</head> 
<body> 
    <div id="blackout2"><div id="close2" >Close</div></div><img id="test" src="http://data.vietinfo.eu/News//2012/10/16/179281/1350402084.7404.jpg"/> <span id="txtsp">Click here to show image</span> 
    <br /><br /> 
    <div id="blackout"><div id="close">Close</div></div><div style="width: 50px; height: 50px;"><img width="100%" src="http://dantri.vcmedia.vn/Uploaded/2009/06/02/hh02066.jpg" /></div> 
</body> 
</html>

你可以通過你的形象更換標籤跨度已縮放的服務器端。

來源

2013-12-02 19:18:34 woondark

show image onclick javascript

回答

相關問題