0

メンバーのアバターを表示するページがあります。アバターをクリックすると、FancyBox 2 を使用してそのメンバーのプロフィールが読み込まれます。1 つずつクリックすると問題なく動作します。しかし、fancyboxのギャラリーのように機能させたい. メンバーがアバターをクリックすると、[次へ] をクリックして次のプロファイルをロードできるようにします。

これが私のjsコードです。メンバーのプロフィールを開きますが、次または前をクリックしてもクリックしたプロフィールしか表示されません。ただし、ファンシーボックスのタイトルには異なるユーザー名が表示されます。

$("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>
4

1 に答える 1

0

私が解決策を思いついたことを気にしないでください：

$("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
    });
});
于 2013-09-09T05:24:30.303 に答える