jQuery plugin - using variable outside function

Question

I have a function for a jQuery plugin that loop through some images.

//load images
function ImageSettings(config, fileNames) {

    //loop through the array in the second argument
    for (var x = 0; x < fileNames.length; x++) {

            //create image
            $("<img />").attr({
                id: fileNames[x],
                src: config.imgDir + fileNames[x] + config.imgFormat,
                title: fileNames[x] + " layout"
            }).appendTo("#" + config.imgContainer);
    }


};

Further down my plugin, I need to pass the image attr ID inside a unordered list item , but my variable is located inside my function called fileNames.

so if use:

  $(config.sidebar).append('<ul>' + fileNames + '</ul>');
//I get a string like: home, about, contact but I need it to be styled in a list item

If I use the split method to remove the " , " then I get an unknown method split. So, is it possible to pass the function and variable inside? like for instance so I work around the unknown method?

 $(config.sidebar).append('<ul>' +
ImageSettings(fileNames[x]).each(function() {
  $( this ).wrap( "<li>" ); 
+ '</ul>');

I thought about using something like $('img').attr('id') and then style this in a list item but because I will have several images on my page but not all will be loaded and not all will need to be wrapped in a list item. Hence the reason why I would like to use my variable inside the function. Thank you.

I can't figure out what you're doing. ImageSettings takes two arguments, but you're only passing it one. And it doesn't return anything, it just modifies the DOM, so why are you trying to apply .each to it. And .each doesn't return a string, so you can't concatenate it. — Barmar
– Barmar, Commented Dec 26, 2013 at 4:44
I would like to use the variable fileNames and style it with list items. this is only part of my plugin, hence 2 arguments in the function for my plugin — Michel
– Michel, Commented Dec 26, 2013 at 4:49
You can't use the variable fileNames outside the function it's declared in. — Barmar
– Barmar, Commented Dec 26, 2013 at 4:55

Vikram Deshmukh · Accepted Answer · 2013-12-26 05:28:57Z

1

You code seems a bit convoluted. Does this solve your problem?

Here's the code:

var config = {
    "imgContainer": "imgContainer",
    "sidebar": "ul",
    "imgDir": "",
    "imgFormat": "jpg"
};
var fNames= [/* list of file names */];

function ImageSettings(fileNames) {
    //loop through the array in the second argument
    for (var x = 0; x < fileNames.length; x++) {
        var fname = fileNames[x];
        //create image
        $("<img />").attr({
            id: fname.substr(fname.lastIndexOf("/"+1, fname.length)),
            src: config.imgDir + fname + "."+config.imgFormat,
            title: fname.substr(fname.lastIndexOf("/"+1, fname.length)) + " layout"
        }).appendTo("#" + config.imgContainer);

        $(config.sidebar).append('<li>' + fname + '</li>');
    }
}
ImageSettings(fNames);

answered Dec 26, 2013 at 5:28

Vikram Deshmukh

16.1k4 gold badges40 silver badges44 bronze badges

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

2 Comments

Michel Over a year ago

Thank you for the code, it worked perfectly :) 1. could you please let me know why you have an array outside the function? var fNames=[] 2. also why did you set the variable fname = fileNames[x]

Vikram Deshmukh Over a year ago

1. fNames has been added outside just to assume your data structure that provides image paths. No specific reason. 2. Also, the reason for declaring fname = fileNames[x]; and then using fname there onwards is just to optimize the code. Otherwise, it would have to traverse to the xth location of the array fileNames everytime to fetch the same value.

Collectives™ on Stack Overflow

jQuery plugin - using variable outside function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related