jQuery-尝试创建可在单击缩略图时滑入视图的图库

Question

我一直在试图弄清楚如何为我的投资组合网站创建自己的自定义图片库，但无济于事。

我有一个div，其中包含用于不同图像的缩略图。 该div的CSS代码如下：

.gallery {
width: 900px;
height: 600px;
background-color: white;
margin: 50px;
float: left;
box-shadow: 3px 3px 20px #000000;
position: relative;

我创建了另一个div，它是#project_display ，绝对位于画廊div的左侧-900px处。 该div也设置为width：900px和height：600px;

我想做的是获取缩略图的锚定链接（这是缩略图的较大版本的图像），并在动画中以较大的图像动态填充此div的外部div。这很难解释。 下面是代码，希望可以使其更加清晰：

$('.projects').bind('click', function(event){
    $('#project_display').animate({
        left:'0px'
        });
        event.preventDefault();

        var this_project = $('.projects').each(function(){
            $(this).children('a[href]');
        })

        $('#project_display').html('<img src="'+this_project+'"/>');
    })

指向大图片的锚点链接未放入外围div。

有人可以告诉我我在做什么错吗？ 因为我显然做错了什么。

Answer 1

$('.projects').bind('click', function(event){
       var aHref= $(this).attr("href");
       $('#project_display').html('<img src="'+aHref+'"/>');
       $('#project_display').animate({
           left:'0px'
       });
 });

试试上面的一个。 如果不起作用，请也提供HTML，这将增加对代码的理解。 因此，我将帮助您解决问题。