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

Nevermind Я придумал решение:

$("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 
    }); 
});