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
    });
});

FancyBox 2 Ajax Gallery

1 个答案: