Question

I am using jquery.cycle image viewer

A user clicks next or prev to scroll through the images

I need to know the image shown, and, for that value to be updated in a hidden form field so i can store the image the user has chosen.

this is cyle set up:

<script type="text/javascript">
$('#s2').cycle({ 
fx:     'fade', 
speed:  'normal', 
timeout: 0, 
next:   '#next2', 
prev:   '#prev2' 
});
</script>

What it does is shows images from a list, one at a time from within the container div – e.g.

<div id="s2" class="pics">
    <img src=http://blah.com/1.JPG>
    <img src=http://blah.com/2.JPG>
    <img src=http://blah.com/3.JPG>
    <img src=http://blah.com/4.JPG>
</div>

<div class="nav">
    <a id="prev2" href="#">Prev</a> <a id="next2" href="#">Next</a>
</div>

Is there a way to bind something onclick which can know the current image and then update a hidden field?

Answer 1

Here you can find a reference to the options of the cycle plugin (or you can look at the source code).

I think you want the after attribute:

$('#s2').cycle({
   ...
   after: function(currSlideElement, nextSlideElement, options, forwardFlag){
    $('input:hidden').val(currSlideElement.val()); //this is probably an object so you'll need to console.log it to see how to get the value     }
});

please note that i’m not sure if the currSlideElement is an objetc or just an id, so just do a console.log on it to see its attributes.