FancyBox 2 Ajax库

Question

我有一个页面，显示了会员的头像。当你点击一个头像时，它会使用FancyBox 2加载该成员的个人资料。如果你逐个点击它，它会工作得很好。但我希望它像fancybox中的画廊一样工作。因此当成员单击头像时，他可以单击下一步来加载下一个配置文件。

这是我的js代码。它打开成员的个人资料，但只显示我点击的个人资料，即使我点击下一步或上一步。但是fancybox的标题显示了不同的用户名。

$("a.ProfilePreview").click(function() {
a = $(this).attr('data-val');
$("a.ProfilePreview").attr('rel', 'gallery').fancybox({
    fixed: false,
    autoCenter: false,
    scrolling   : 'no',
    href : "http://localhost/site/preview/" + a, 
    type : 'ajax',
    openEffect : 'fade',
    closeEffect : 'fade',
    padding     : 10
});
});

这是我的HTML代码

<div class="image">
<a rel="gallery" href="http://localhost/site/user1/" class="ProfilePreview" data-val="user1" title="user1"><img src="http://localhost/site/media/uploads/photo1.jpg" alt="user1" border="0"></a>
</div>

<div class="image">
<a rel="gallery" href="http://localhost/site/user2/" class="ProfilePreview" data-val="user2" title="user2"><img src="http://localhost/site/media/uploads/photo2.jpg" alt="user2" border="0"></a>
</div>

<div class="image">
<a rel="gallery" href="http://localhost/site/user3/" class="ProfilePreview" data-val="user3" title="user3"><img src="http://localhost/site/media/uploads/photo3.jpg" alt="user3" border="0"></a>
</div>

Answer 1

不管怎样，我已经想出了一个解决方案：

$("a.ProfilePreview").click(function() {
    $("a.ProfilePreview").attr('rel', 'gallery').fancybox({
        fixed: false,
        autoCenter: false,
        scrolling   : 'no',
        beforeLoad : function(){
        var url= $(this.element).attr("data-val");
        this.href = "http://localhost/site/preview/" + url
        },
        type : 'ajax',
        openEffect : 'none',
        closeEffect : 'none',
        padding     : 10
    });
});