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，這將增加對代碼的理解。 因此，我將幫助您解決問題。