Jquery -尝试创建一个图像库，在点击缩略图时滑入视图

Jquery - trying to create a image gallery that slides in to view upon clicking thumbnail

本文关键字：略图 视图 图像 创建 一个 Jquery      更新时间：2023-09-26

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

我有一个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，它的绝对位置是在gallerydiv的左边-900px。这个div也被设置为宽度:900px，高度:600px;

我要做的是采取锚定的缩略图的链接(这是缩略图的较大版本的图像)，并动态地填充这个外围的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中。

谁能告诉我我做错了什么?因为我显然做错了什么 
$('.projects').bind('click', function(event){
       var aHref= $(this).attr("href");
       $('#project_display').html('<img src="'+aHref+'"/>');
       $('#project_display').animate({
           left:'0px'
       });
 });

试试上面这个。如果不工作，请提供HTML也，这将增加对代码的理解。所以我会帮你解决这个问题。

相关文章：