0

ASP.NETMVC3とjQueryCyclePluginを使用して画像ギャラリープロジェクトに取り組んでいます。これは私が持っているコードです:

 $(document).ready(function () {
     $('#s1').cycle({
         fx: 'curtainX',
         speed: 2000,
         next: '#raty',
         timeout: 0,
         after: Rate
     });
 }):

ページソースから次のリストを取得します。

<div id="s1" class="slides">     
    <img src="/Photo/Thumbnail/14?size=large" title="walk 071" alt="14" />
    <img src="/Photo/Thumbnail/15?size=large" title="walk 083" alt="15" />
    <img src="/Photo/Thumbnail/16?size=large" title="walk 125" alt="16" />
    <img src="/Photo/Thumbnail/17?size=large" title="001" alt="17" />
    <img src="/Photo/Thumbnail/18?size=large" title="002" alt="18" />
    <img src="/Photo/Thumbnail/19?size=large" title="003" alt="19" />
    <img src="/Photo/Thumbnail/20?size=large" title="004" alt="20" />
    <img src="/Photo/Thumbnail/21?size=large" title="005" alt="21" />
    <img src="/Photo/Thumbnail/22?size=large" title="006" alt="22" />
</div>

問題:スライド上の現在の写真のID(int)を上のimg urlからコントローラーアクションに渡して、実行時にデータベースからの関連情報を非同期に表示できるようにしたいのですが、どうすればよいですか?

これがコントローラーのアクションです。

public ActionResult AboutMe(int id) 
    {
       var myphoto = dbase.Photos.Single(x => x.PhotoId == id);
        var model = new MeViewModel
        {
            UserName =myphoto.UserProfile.UserName,
            Location =myphoto.UserProfile.Location,
            ...Continue populating model

        };

        return PartialView(model);
    } 
4

1 に答える 1

0

アフターイベント内で現在のスライドインデックスを取得できます。

afterイベント内では、optionsparamを使用して現在のスライドインデックスを参照できます。以下の例でgetDataは、ajax呼び出しになります。

デモ(現在のインデックスを使用してポケットベルを非表示/表示):http://jsfiddle.net/lucuma/fg6d4/10/

 $('#slideshow').cycle({
    prev: $('.controller .prev', this),
    next: $('.controller .next', this),
    after: function(currSlideElement, nextSlideElement, options, forwardFlag) {
        // you can easily adapt this to hide prev on firstslide and next on last slide
        getData(options.currSlide);

    }

});
于 2012-06-04T21:57:25.307 に答える