Question

如果单击图像的缩略图版本，如何加载原始图像？我使用ASP.NET在cominaton中使用javascript。

原始图像很大，因此它们已在服务器端缩放。这使网站加载速度更快。但不知何故，图像的两个版本（原始版本和缩略图）都被下载了。

我正在尝试仅下载图片的tumbnail版本。当用户点击图像时，我想显示原始图像。

我怎样才能完成这项工作？

Answer 1

每个缩略图的下面的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文件。

Answer 2

我认为你必须首先显示缩略图，然后点击你需要在新的弹出窗口中打开原始图像。您可以使用下面给出的代码执行此操作 -

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

然后在点击缩略图图像时调用此openImage（）方法。您可以将imageFile作为参数传递给函数。

Answer 3

听起来你在HTML中引用了两个图像，即使一个图像在视图中隐藏，因此浏览器会同时请求这两个图像。您需要做的是使用JavaScript从头开始创建完整大小的<img>标记，然后将其添加到HTML中的相关位置。然后，浏览器将在添加到DOM后加载完整大小的图像。

Answer 4

对于花式盒子，你需要做的只是

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

此致安迪。

Answer 5

HTML code：

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

您可以在服务器端缩放图像替换标记范围。

显示图像onclick javascript

5 个答案: