Question

我有一个div，带有一堆带有href链接的缩略图到完整的图像。因此，我不需要将此图像从网站上打开，而是需要在第二个div中动态显示此图像。

这就是我现在所拥有的：

HTML

<article id="thumbnails">

    <a href="large-image-1.jpg">
    <img class="image-99" alt="97" src="thumbnail-1.jpg">
    </a>

    <a href="large-image-2.jpg">
    <img class="image-98" alt="96" src="thumbnail-2.jpg">
    </a>

    <a href="large-image-3.jpg">
    <img class="image-97" alt="95" src="thumbnail-3.jpg">
    </a>

</article>

<div id="large-image">
    <img id="xxl" src="" title="">
</div>

jQuery

$(document).ready(function() {

  $('#thumbnails').on('click','a', function(event) {

    var toLoad = $(event.target).append('<img src="' + 'attr('src').jpg />"');
    $('#large-image').fadeOut('fast',loadContent);

    function loadContent () {
        $('#large-image').load(toLoad,'',showNewContent);
    }

    function showNewContent () {
        $('#large-image').fadeIn('normal');
    }

    return false;
  });

我还做了codepen of it来更好地说明它。

我正在考虑的另一件事是记录点击的图像href并用attr()替换另一个div的src。但我迷失了如何做到这一点。

Answer 1

您还可以尝试获取链接的href并更改目标图片的src。

var largeImage = $('#large-image img');

$('#thumbnails a').click(function(e){
  e.preventDefault();

  var imageUrl = $(this).attr('href'); 

  largeImage.attr('src', imageUrl);
});

Example on JS Bin

Answer 2

$('#thumbnails').on('click','a', function(event) {
    var toLoad = $(this).append('<img src="' + this.href + '.jpg" />');

    //Rest of code
});

编辑：上面的代码将获得所点击链接的href属性，并将其添加到图像的src中。

抓住href并把它放在src上

2 个答案: