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

回答

相关问题