Javascript 图片库中的缩略图_Javascript_Jquery_Image

Javascript 图片库中的缩略图

javascript jquery image

Javascript 图片库中的缩略图,javascript,jquery,image,Javascript,Jquery,Image,请看: html <body> <div class="thumbnails"> <a href="#"><img src="http://s30.postimg.org/4yboplkxd/dotty.jpg" width="100" height="100"></a> <a href="#"><img src="http://s9.postimg.org/4fg0tjk5r/goldy.jpg"

请看:

html

<body>
  <div class="thumbnails">
    <a href="#"><img src="http://s30.postimg.org/4yboplkxd/dotty.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s9.postimg.org/4fg0tjk5r/goldy.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s12.postimg.org/5lsgrnfcd/oily.jpg" width="100" height="100"></a>
    <a href="#"><img src="http://s29.postimg.org/mcpamwhaf/splashy.jpg" width="100" height="100"></a>
  </div>

  <div class="large-image"><div>
</body>

我目前拥有的是一个div中的4个缩放图像，使用class=“thumbnails”

我希望实现的是，当我单击缩略图时，我希望在div中使用class=“large image”显示较大的图像。

包括jQuery库后，添加以下JS：

$("img").click(function() {
    $("div.large-image").empty().append($(this).clone().css('width',1000));
})

这将为所有图像添加一个事件侦听器，当单击这些图像时将触发该事件侦听器。然后，它将删除

.large image

div的所有内容，并附加

img

元素的副本。

仅附加一个imag标记和单击图像的图像源，如下所示：

$("img").click(function() {
    $("div.large-image").empty().append(
        $("<img/>", { src: this.src })
    );
})

$（“img”）。单击（函数（）{
$（“div.large-image”）.empty（）.append(
$("
Demo@谢谢，非常感谢您的快速回复，您的回答非常好，但它完全克隆了缩略图。我希望将图像的更大版本放在“大图像”分区中。但是感谢您的回复，这对我来说是一个很好的开始。我可以请教您如何改进我的jquery和javascript吗技能。你们显然很好，我想做得更好。所以我想知道你们是建议学习还是只是练习。首先，我希望我的回答对你们有所帮助。至于学习JS/jQuery，需要大量阅读（在线）当你遇到一些东西时，把它们付诸实践。仅仅阅读是没有帮助的。所以我离开了，尝试添加代码，以便每次点击缩略图时，大图像下面都有很多文字来描述图片。这是我目前的代码笔。我喜欢它，但它并没有给我任何分离或处理文字的自由在alt标记中使用了ing。你能建议另一种方法吗？我们很清楚，我不希望得到完整的答案，因为我知道你有更好的事情要做。只是寻求建议或方向？？这就是你所说的？或者你想在alt以外的地方输入文本吗？不，你的工作方式与我的工作方式基本相同目前。但是如果你注意到下面写着艺术家1的图片，我旁边有一个参考号，我有点想把它和艺术家的名字分开。但是我用alt的方式来获得下面的文字，我不确定是否可能有单独的文字样式。我对这个网站很陌生，也许我弄错了。但是每次我提出一个问题，有人不得不抱怨，我再过几天就不能发帖了。我无法解决这个问题，这有什么建设性的或必要的。我没有骗你回答。真正让我生气的是，有些人非常乐意帮助我，他们给了我很多建议，但其他人却无缘无故地过来尝试双关语请原谅我提出问题。试着理解不是每个人都像你一样有天赋，一个看似愚蠢的问题真的能帮助别人解决问题。我认为反对票来自于你没有在你的问题中加入更多相关代码并解释问题所在。我确实有一个问题，就是反对票没有礼貌地向y解释你知道为什么他们否决了你的问题。每个人对努力的想法都有点不同，所以应该解释一下。一旦你编辑了，他们可以删除他们的否决票。
$("img").click(function() {
    $("div.large-image").empty().append(
        $("<img/>", { src: this.src })
    );
})