jquery - Click links to load the relevant image into a container

Question

I have some links that when you click on them, i need them to load an image into a container, and when you click the close link, it hides it again.

I have an example of it here but unsure how to apply the images into the div with the link if this makes sense:

http://jsfiddle.net/SGktV/1/

I assume i need something along the lines of this....

<a class="click" href= "#" src="image/location">Click here to fadeIn the image in a container</a>

I am going to have many links with the images and the container will stay the same.

What is the best and efficient way to start this?

Thanks!

Answer 1

html就在这里

<div class="wrapper">
 <a href="image.png">click me to show</a>

 <div style="display: none;">
  <img src="noimg.png" />
  <a href="#"></a>
 </div>
</div>

和 jquery 在这里

$('.wrapper > a').click(function(event) {
 var thisSrc = $(this).attr('href');
 var thisImg = $(this).next().children('img');

 thisImg.attr('src', thisSrc);
 $(this).next().show();
 event.preventDefault();
});

$('.wrapper > div > a').click(function() {
 $(this).parent().hide();
});

我认为这是执行此操作的简单方法...您也可以键入函数来执行此操作，然后在单击事件上运行此函数...

并且您可以在没有元素样式的情况下设置标记样式:))

Answer 2

$(function () {
    $("a.click").click(function (event) {
        //hide panel in case it's already visible because of a previously loaded image
        $("#hiddenPanel").fadeOut(0);
        //disable default link click event so page does not change if link has a href
        event.preventDefault();
        //set links src to the src of image in the hidden panel 
        $("#hiddenPanel img").attr("src", $(this).attr("src"));
        $("#hiddenPanel").fadeIn(1000);
    });
    $("#closeButton").click(function () {
        $("#hiddenPanel").fadeOut(1000);
    });
});

小提琴

如果图像可见，您可能希望慢慢淡出图像而不是 fadeOut(0)，并在淡出完成后加载新图像。