Question

i created a function in jQuery which lets me create a lightbox as following:

var lightbox = create_lightbox(params);

I would like to expand this function so i can add custom css to it and make it look like a feel in any given circumstance. I would prefer to be able to do the folowing:

    lightbox.css = {
    "background-color" : "red",
    etc...

}

What would be the best way to do this and how would i iterate over the css elements inside my function?

tyvm

Answer 1

Create your function to take an object with all the values you want to add to your lightbox’s css property, then add in your defaults with jQuery’s extend.

function create_lightbox(params, css){
    css = $.extend({ "background-color": "default val"}, css);

    lightbox.css = css;
}

If you really want to loop over all the properties in css, you could use a for in loop

function create_lightbox (params, css) {
   css = $.extend({ "background-color": "default val"}, css);

   for (cssKey in css)
     lightbox.css[cssKey] = css[cssKey];
}