如何在不刷新页面的情况下在 ASP.net 网页中实现图片库？

Question

我正在使用 ASP.NET 开发网站。我想实现一个图片库的东西，比如在这张图片中显示。当用户单击缩略图时，应加载全分辨率图像。

所以我有一个页面来保存图像的所有信息。因此，当用户上传图像时，我将它们保存在 2 个文件夹中（一个文件夹用于全分辨率图像，另一个用于小分辨率的缩略图）。此外，我将两条路径都保存在我的数据库中。

所以我已经使用我的缩略图加载了底部面板（缩略图面板）。我为它动态创建了图像按钮。在那里，我将 imagebutton 图像 URL 设置为我的数据库 URL。然后我将这些图像按钮添加到我的页面中设置的占位符。所以现在它的加载。现在的问题是如何获得我的大预览。

我是否应该为我的 Imagebutton 创建一个事件处理程序，当用户单击图像时，页面将异步刷新并显示图像？

我需要使用 Jquery 或 javascript 来执行此操作吗？那怎么办？

这和 iframe 有关系吗？

那么最好的方法是什么？我在做正确的事吗？我的意思是在下方加载缩略图并在其顶部加载大型图像，或者我应该首先加载高分辨率图像并调整大小以在缩略图面板中显示它们吗？

非常感谢。

Answer 1

最简单的方法是在初始加载时存储 large-image-url 作为每个 Imagebutton 上的属性，并且 onClick 事件处理程序使用 JS 获取该属性并替换大预览的 img src。

Answer 2

我在this website 为我以前的公司工作时创造了类似的东西。您可以查看此JavaScript file 的代码，但以防链接失效或网站更新，代码如下：

呼唤

widashowSetup('[Pipe Delimited List of Small Images]','[Pipe Delimited List of Large Images]','[Path to Left Arrow]','[Path to Right Arrow]');

JS 文件

//####################################################
//#####  Widashow slideshow image scroller V1.2  #####
//##### Made by Jamie Barker for Wida Group Ltd. #####
//####################################################

//##### SETUP #####
var ThumbnailWidth=111      //SET THIS TO THE WIDTH (+margin/padding) OF THE SMALL IMAGES
var SlideTimer=4000         //THIS IS THE DURATION BETWEEN SLIDE TRANSITIONS, 4000=4 SECONDS
var TransitionTimer=1000    //THIS IS THE TRANSITION DURATION, 1000=1 SECOND
//##### END SETUP #####

var MoveNext
var MovePrev

//Function to decide which way we're moving, and if we're moving now or after a timeout
function CallMove(dir,timer,clear) {
    //Clear the current timers so we're starting afresh
    clearTimeout(MoveNext);
    clearTimeout(MovePrev);

    //If we've specified no timer, just move it now. Otherwise set it to move in the specified time above
    if (dir=='right') {
        if (timer==false) {
            widashowMoveNext()
        } else {
            MoveNext=setTimeout("widashowMoveNext()",SlideTimer);
        }
    } else if (dir=='left') {
        if (timer==false) {
            widashowMovePrev()
        } else {
            MovePrev=setTimeout("widashowMovePrev()",SlideTimer);
        }
    }
}
//Move the images to the right
function widashowMoveNext() {
    //#### Large Images #####
    //Set the current and next image as variables and clone the current image at the end
    var currentImg=$('#widashow-large img:nth-child(1)')
    var nextImg=$('#widashow-large img:nth-child(2)')
    currentImg.clone().appendTo('#widashow-large');

    //Hide the cloned and put it to the bottom of the z-index
    $('#widashow-large img:last-child').css('z-index','0');
    $('#widashow-large img:last-child').hide();

    //Put the next image second in the z-index and make it appear, then fade out the top image
    nextImg.css('z-index','50')
    nextImg.show();
    currentImg.fadeOut(TransitionTimer);

    //#### Small Images #####
    var ImageList=$('#widashow-smallimagelist')
    var FirstImage=$('#widashow-smallimagelist img:first-child')

    //slide the images across by the width each image takes up and move it back when the first image gets put at the end
    ImageList.animate({
        left: '-='+ThumbnailWidth,
        width: '+='+ThumbnailWidth
    },TransitionTimer, function() {
        ImageList.animate({
            left:'+='+ThumbnailWidth,
            width:'-='+ThumbnailWidth
        },0)
    });
    FirstImage.fadeOut(TransitionTimer, function(){
        $(this).appendTo(ImageList);
        $(this).show()
    });

    //Set the new image showing as z-index 100 and remove the image from the top
    setTimeout("$('#widashow-large img:nth-child(2)').css('z-index','100')",TransitionTimer);
    setTimeout("$('#widashow-large img:nth-child(1)').remove()",TransitionTimer);

    //Call it again so it keeps the slideshow moving
    CallMove('right');
}
//Move the images to the left
function widashowMovePrev() {
    //#### Large Images #####
    //Set the current and next image as variables and clone the current image at the end
    var currentImg=$('#widashow-large img:nth-child(1)')
    var nextImg=$('#widashow-large img:last-child')
    //Move the last image to front, hide it but put it's z-index on par with the current top image
    nextImg.prependTo('#widashow-large');
    nextImg.hide();
    nextImg.css('z-index','100');

    //#### Small Images #####
    //Hide the last image and put it to the front of the list
    var LastImg=$('#widashow-smallimagelist img:last-child')
    LastImg.hide();
    LastImg.prependTo($('#widashow-smallimagelist'));

    //Move the images across and fade in the new active small image and fade in the new top large image
    var ImageList=$('#widashow-smallimagelist')
    ImageList.animate({
        left: '+='+ThumbnailWidth,
        width: '+='+ThumbnailWidth
    },TransitionTimer, function() {
        ImageList.animate({
            left:'-='+ThumbnailWidth,
            width:'-='+ThumbnailWidth
        },1, function(){
            LastImg.fadeIn();
            currentImg.css('z-index','50');
            nextImg.fadeIn(TransitionTimer);
            setTimeout("$('#widashow-large img:nth-child(2)').css('z-index','0')",TransitionTimer);
            setTimeout("$('#widashow-large img:nth-child(2)').hide()",TransitionTimer);
        })
    });

    //Call it again so it keeps the slideshow moving
    CallMove('left');
}

//This function sets up the HTML and calls the function to get it moving initially
function widashowSetup(SmallImages,LargeImages,LeftImg,RightImg) {
    //Put the Images into an array so we can loop through them
    var SmallImageList=SmallImages.split('|');
    var LargeImageList=LargeImages.split('|');

    //Put the HTML in for the small images and the navigation buttons
    $('#widashow-small').html('<img class="widashow-nav left" src="'+LeftImg+'" alt="" /><div id="widashow-smallimagelist"></div><img class="widashow-nav right" src="'+RightImg+'" alt="" />');

    //Loop through and insert the large images
    for (var i=0;i<LargeImageList.length;i++) {
        $('#widashow-large').append('<img rel="'+[i]+'" src="'+LargeImageList[i]+'" alt="" />');
    }

    //Loop through and insert the small images
    for (var i=0;i<SmallImageList.length;i++) {
      $('#widashow-smallimagelist').append('<img rel="'+[i]+'" src="'+SmallImageList[i]+'" alt="" />');
    }

    //Start it off by moving it right
    CallMove('right');
}       

//Set up the click events for the navigation
$(document).ready(function(){
    $('.widashow-nav.right').on('click', function(event) {
        CallMove('right',false);
    });
    $('.widashow-nav.left').on('click', function(event) {
        CallMove('left',false);
    });
    $('#widashow-smallimagelist img').on('click', function(event) {
        //Set the index for the clicked image
        var ImgIndex=eval($(this).index()+1);

        //Get the number of images
        var ImgTotal=$('#widashow-large img').length
        var ImageList=$('#widashow-smallimagelist')
        var TotalWidth=0

        //Loop through the images, moving them along until we hit the clicked image. Also work out the total width we need to move the images across.
        for (var i=1;i<ImgIndex;i++) {
            $('#widashow-large img:first-child').appendTo('#widashow-large');
            $('#widashow-large img:last-child').css('z-index','0');
            $('#widashow-large img:last-child').hide();
            $('#widashow-large img:first-child').css('z-index','100')
            $('#widashow-large img:first-child').show();
            TotalWidth=eval(TotalWidth+ThumbnailWidth)
            $('#widashow-smallimagelist img:first-child').appendTo($('#widashow-smallimagelist'))   
        }

        //Move the images across the width required
        ImageList.animate({
            left: '-='+TotalWidth,
            width: '+='+TotalWidth
        },100, function() {
            $('#widashow-smallimagelist').animate({
                left:'+='+TotalWidth,
                width:'-='+TotalWidth
            },1, function(){
            })
        });

        //Make it stop moving
        CallMove(false,false);
    });
});