How do you pass a variable from a click function to another function's parameters in jQuery?

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

I'm not quit sure what you mean. $(this) in DisplayImages is the control that raised the click event? — CyclingFreak
– CyclingFreak, Commented Apr 11, 2012 at 18:00

CyclingFreak · Accepted Answer · 2012-04-11 18:03:34Z

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

answered Apr 11, 2012 at 18:03

CyclingFreak

1,6252 gold badges22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ClosDesign Over a year ago

Your's is the one that has gotten me the closest. But I have to click the a.image-selector twice to get the imagePathArray to populate the $(cntrl).reel({ images: imagePathArray}); Any ideas?

CyclingFreak Over a year ago

I'm not quit sure but maybe I'm not having all HTML and the reel plugin. This you have to check: 1. You have to integrate the click code in ' $().ready(function () {' because the DOM is not ready. 2. Why is the DisplayImages('Kachina'); still there? It will not work because it come for the function plus the parameters are not correct (missing cntrl).

CyclingFreak Over a year ago

But I think that is subjet for another question :-)

ClosDesign Over a year ago

The click code is in the document.ready. I just added it here. It is in my JS file. The full HTML wasn't in this example. It is now. I took out the DisplayImages('Kachina'). Wasn't being used. Not sure what your last sentence means. In my Edit it is in there. Or did I put it in the wrong spot? Thanks

ClosDesign Over a year ago

Nevermind I got it to work. My "teardown" needed to be added to the click event not the DisplayImages function. Thanks for the help. Everything else you suggested works though. appreciated.

Sandeep Rajoria · Accepted Answer · 2012-04-11 18:00:54Z

0

How about making the imagePathArray a global variable.??

May be after the line

$(document).ready(function(){

you can have

var imagePathArray;

this way imagePathArray will be available everywhere in the jquery namespace

answered Apr 11, 2012 at 18:00

Sandeep Rajoria

1,2498 silver badges14 bronze badges

Comments

ClosDesign · Accepted Answer · 2012-04-12 16:44:08Z

I got it working

   $(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;
firstImagePath = imagePathArray[0];
$('#image').trigger('teardown');//MOVED TO HERE TO INITIALISE TEARDOWN ON CLICK.
$('#image').attr('src', firstImagePath).fadeOut('fast', function () {
    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

Collectives™ on Stack Overflow

How do you pass a variable from a click function to another function's parameters in jQuery?

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related