Question

I need help on how to pass a variable from a jQuery click function to another plugin’s function’s parameters. In the code below I need to pass the ‘imagePathArray’ from the click function to the to the images Parameter in the $(this).reel . Will this work? So far I can not seem to get it to work.
Any help is appreciated.
Here is my code:

$(document).ready(function(){
  $('a.image-selector').click(function (event) {

    event.preventDefault();

    // Work out which image to display, amend the displaying image then load the rest and fade in.              
    whichImageInput = $(this).data('which');
    imagePathImages = $('#imageSequence-' + whichImageInput).attr('value');
    imagePathArray = imagePathImages.split(','); 
    totalFrames = imagePathArray.length;
    imagePath = imagePathArray[0];



    //alert(imagePathArray[0]);
    //alert(whichImageInput);
    $('#image').attr('src', imagePath).fadeOut('fast', function () {
        //DisplayImages(whichImageFolder);
        DisplayImages(imagePathArray[0]);
    });
  });



 DisplayImages('Kachina');

function DisplayImages(whichInput) {

    //function DisplayImages(whichFolder) {
    //var imagePath = 'images/' + whichFolder + '/';
    // Call this to destroy any existing reference before initialising...
    $('#image').trigger('teardown');
    // Needs a bit more thought when swapping between colours.          
    $('#image').fadeIn('fast', function () {


        $(this).reel({
            frames: totalFrames,
            //footage: 4,
            sensitivity: 70,
            saves: true,
            //path: imagePath,
            cw: true,
            hint: "Click and drag",
            clickfree: false,
            preloader: 20,

            images: imagePathArray
        });
    });
}
});

EDIT
Ok this is the code I have now using some of the suggestions from below. However I now am having to click the a.image-selector twice to populate the image onto the page. It passes correctly the first time (tested via alert()), but the actual image in the tag is not populating the first time. I am going to include my HTML too.
$(document).ready(function(){
$(‘a.image-selector’).click(function (event) {

    event.preventDefault();

    // Work out which image to display, amend the displaying image then load the rest and fade in.              
    // var whichImageFolder = $(this).data('which');
    //var imagePath = 'images/' + whichImageFolder + '/0001.png';
    whichImageInput = $(this).data('which');
    imagePathImages = $('#imageSequence-' + whichImageInput).attr('value');
    imagePathArray = imagePathImages.split(',');
    totalFrames = imagePathArray.length;
    firstImagePath = imagePathArray[0];

    //alert(imagePathArray[0]);
    //alert(whichImageInput);
    $('#image').attr('src', firstImagePath).fadeOut('fast', function () {
        //DisplayImages(whichImageFolder);
        DisplayImages(firstImagePath, $(this));
    });
});


function DisplayImages(whichInput, cntrl) {

    //function DisplayImages(whichFolder) {
    //var imagePath = 'images/' + whichFolder + '/';
    // Call this to destroy any existing reference before initialising...
    $('#image').trigger('teardown');
    // Needs a bit more thought when swapping between colours.          
    $('#image').fadeIn('fast', function () {
       // alert(imagePathArray);
        $(cntrl).reel({
            frames: totalFrames,
            //footage: 4,
            sensitivity: 70,
            saves: true,
            //path: imagePath,
            cw: true,
            hint: "Click and drag",
            clickfree: false,
            preloader: 20,

            images: imagePathArray
        });
    });
  }
 });//End doc.ready

HTML Below

   <div class="block">
        <div class="imgHolder">
            <img id="image" src="" height="448" width="360" />
        </div>
    </div>
  <!--Thumbs-->

    <ul class="tabs">
        <li><a href="#" class="image-selector" data-which="Kachina"><img src="images/smooshed150dpi/Kachina0001.png" width="150" /></a></li>
        <li><a href="#" class="image-selector" data-which="Lapis"><img src="images/Lapis/Lapis_Thumb.png" width="150" /></a></li>

    </ul>

        <input type="hidden" id="imageSequence-Kachina" value="images/Kachina/0001.png, images/Kachina/0002.png, images/Kachina/0003.png, images/Kachina/0004.png, images/Kachina/0005.png, images/Kachina/0006.png, images/Kachina/0007.png, images/Kachina/0008.png, images/Kachina/0009.png, images/Kachina/0010.png,
                     images/Kachina/0011.png, images/Kachina/0012.png, images/Kachina/0013.png, images/Kachina/0014.png, images/Kachina/0015.png, images/Kachina/0016.png, images/Kachina/0017.png, images/Kachina/0018.png, images/Kachina/0019.png, images/Kachina/0020.png,
                     images/Kachina/0021.png, images/Kachina/0022.png, images/Kachina/0023.png, images/Kachina/0024.png, images/Kachina/0025.png, images/Kachina/0026.png, images/Kachina/0027.png, images/Kachina/0028.png, images/Kachina/0029.png, images/Kachina/0030.png,
                     images/Kachina/0031.png, images/Kachina/0032.png, images/Kachina/0033.png, images/Kachina/0034.png, images/Kachina/0035.png, images/Kachina/0036.png" />

         <input type="hidden" id="imageSequence-Lapis" value="images/Lapis/0001.png, images/Lapis/0002.png, images/Lapis/0003.png, images/Lapis/0004.png, images/Lapis/0005.png, images/Lapis/0006.png, images/Lapis/0007.png, images/Lapis/0008.png, images/Lapis/0009.png, images/Lapis/0010.png,
                     images/Lapis/0011.png, images/Lapis/0012.png, images/Lapis/0013.png, images/Lapis/0014.png" />

Answer 1

Send the control that raised the event as a reference/variable to the function.

DisplayImages(imagePathArray[0], $(this));

The function will look like this:

function DisplayImages(whichInput, cntrl) {

and

$(cntrl).reel({