Question

如何在这些图像上创建onclick以像缩略图一样显示并在其下显示更大的版本？在jQuery中。我正在使用flickr Api来搜索图像，这就是我如何创建一个onclick函数的地方，如果我点击其中一个图像，在主div中它下面会显示更大版本的图片。非常喜欢这里的jFiddle http://jsfiddle.net/99V75/light/。谢谢你的帮助。

＆＃13;

body {
		background-color: grey;
}

#main {
 background-color: red;
    width: 1100px;
    height: 600px;
    position: absolute;
    right:250px;
    top:50px;   
}

div{
		padding:6px;
	}

img {
 height: 140px;
    width:260px;
    float: left;
    margin-left: 70px;

}

#images {
    background-color: blue;
    height: 160px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
    <script type="text/javascript" src="jquery-1.11.2.js"></script>
</head>
    
<body>
    <script type="text/javascript">
 
        $(document).ready(function(){
            
            $("#button").click(function(){
                $("#images").empty();
                $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?",
                {
                    tags: "fire truck",
                    tagmode: "any",
                    format: "json"
                    
                }, function(data){
                    $.each(data.items, function(i,item){
                        $(".loadergif").remove();
                        $('<img/>').attr("src", item.media.m).appendTo('#images');
                        if(i==2) return false;
            });
            
        });
    });
        });
      
</script>
    
<button type="button" id="button">search</button>
<div id="main"</div>
<div id="images" /></div>
</body>
</html>

＆＃13;

Answer 1

您需要将onClick处理程序添加到容器中，因为添加的图像是动态的。另一个问题是你需要大型的＆＃39;你带来的图像的版本。我检查了Flickr API，看起来你可以更改图像源的最后一个字符以获得不同的文件大小。这是指向该引用的链接：Flickr API

这里是onClick处理程序和图像源更新所需的代码。

    $('#images').on('click', 'img', function(){
        var $imgClone = $(this).clone().attr('src', $(this).attr('src').replace('_m.', '_b.'));
        $('#main').html($imgClone);
    });

并jsFiddle显示完整代码。

Answer 2

DEMO：http://jsfiddle.net/erkaner/k7rtq3bz/1/

这就是你所需要的：

$('#images').on('click', 'img', function () {
      $('#mainImage').attr('src', $(this).attr('src'));
});

这是html，略有改动和一些更正：

<button type="button" id="button">search</button>
<div id="main">
    <img id='mainImage' src='' />
</div>
<div id="images"></div>

如何在这些图像上创建onclick以像缩略图一样显示并在其下显示更大的版本？

2 个答案: