FancyBox 2 阿贾克斯画廊答案

【问题标题】：FancyBox 2 Ajax GalleryFancyBox 2 阿贾克斯画廊
【发布时间】：2013-09-09 05:17:22
【问题描述】：

我有一个显示成员头像的页面。当您单击一个头像时，它将使用 FancyBox 2 加载该成员的个人资料。如果您一个一个单击它，它就可以正常工作。但我希望它像fancybox 中的画廊一样工作。这样当会员点击一个头像时，他可以点击next加载下一个配置文件。

这是我的 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>

【问题讨论】：

标签： jquery ajax gallery fancybox-2

【解决方案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
    });
});

【讨论】：