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
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];
}
Just use CSS as CSS should be used: In a <style>-tag or a linked .css-file. The lightbox plugin uses the following dom tree;
<div id="jquery-lightbox">
<div id="lightbox-container-image-box">
<div id="lightbox-container-image">
<img id="lightbox-image" />
<div id="lightbox-nav">...</div>
</div>
</div>
</div>
So then style what you want to style. I guess you dpn't want to use different styles on each of your boxes?
You can add an element property to the lightbox class so you can modify value out of the constructor:
function lightbox() {
this.element = document.ccreateElement("div")
this.light = "light";
this.box = "box";
}
var newLightBox = new lightbox();
newLightBox.element.style.background = "#000";
