Question

<script type="text/javascript"> 
    clBoxActive = true;
    clBoxTrigger = "cl-trigger";
    clBoxTriggerType = "#";
    clBoxClass = "overlay-box";
    clEffectIn = "fade";
    clEffectOut = "fade";
    clOnLoad = false;
    clAllowExit = true;
</script>

This is what i currently have. Its options to do a lightbox like script where you click on the trigger, and it opens:

<div class="overlay-box" style="display:none;">
    <div class="ol-wrapper">
        <div class="ol-box-content">
            This is the overlay box content.
        </div>
    </div>
    <div class="ol-box-bg">&nbsp;</div> 
</div>

ol-box-bg is the background which the jquery pulls the height and width of the browser, and set the css to the box, and the rest is in style.css which it says position: absolute; and opacity, and other stuff to just style it to make it black with see through…

ol-box-content is the content box, its got a wrapper to allow it to center, but otherwise its got similar properties in the style.css as the ol-box-bg..

My question is… Im trying to make it a little more dynamic where i can allow multiple lightbox triggers that open different boxes to overlay the pages content. However i came across the problem of, the variables can only be set one time, and i have no clue where to go from here..

I notice that some people do stuff like:

optionName: optionvalue

but im not sure what it is, or how its used..

Answer 1

Might be a good option to create a plugin.

Which would look something like:

(function($){
    $.fn.extend({ 
        clBox: function(options) {
            var defaults = {
                clBoxActive: true,
                clBoxTrigger: 'cl-trigger',
                clBoxTriggerType: '#',
                clEffectIn: 'fade'
            }

            var options =  $.extend(defaults, options);

            return this.each(function() {
                var obj = $(this);

                // do stuff with matching elements
                obj.click(function() {
                    // e.g. open lightbox
                });

                // to access an option simply use option.name
                console.log(options.clBoxTrigger);             
            });
        }
    });
})(jQuery);

You can now use your plugin with either the default options or with custom options.

$(document).ready(function() {
  // with default options
  $('.elements1').clBox();

  // with custom options
  $('.elements2').clBox({clBoxActive: false, clEffectIn: 'slide'});
});