Question

I am working on image gallery project using ASP.NET MVC3 and jQuery Cycle Plugin. This is the code i have:

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

I get the following list from page source:

<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>

Problem:
I want to pass Id (int) of current photo on slide from the img url above to a controller action so that I can asynchronously display related information from database at run-time.How can i do this?

Here is the contoller action:

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

Answer 1

You can get the current slide index inside the after event.

Inside the after event you can use the options param to reference the current Slide index. In the below example the getData would be your ajax call.

Demo (using current index to hide/show pager): 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);

    }

});