jquery theme settings options

Question

Creating this theme, I'm pretty new to jquery and struggling as usual.

Just watched this tutorial and decided to have a shot at making my own theme settings to simplify customization.

This is what i have so far:

(function($){

        $.fn.themeSettings = function(options) {

                var
                  slideshow = {
                        opacity: '0.5'
                  },
                  settings = $.extend({}, defaults, options);         
        };

        var slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

        slideShowShadow.css({ 
                opacity: slideshow.opacity 
        });

})(jQuery);

Any help would be awesome since It's messing up all over current jquery on the theme which I have not added to it yet.

I think by the code you can see what I'm trying to accomplish but obviously since I'm new to jQuery I'm not sure how to go about it.

Any help would be much appreciated, cheers

Answer 1

The way you have the plugin set up right now, slideShowShadow.css is trying to assign slideshow.opacity at loading time and outside the scope of the themeSettings function, which means that slideshow.opacity will be undefined. All you have to do is move the last few lines into the themeSettings function so that they're run when you apply the plugin to some element by calling $('#your_elem').themeSettings():

(function($){
  $.fn.themeSettings = function(options) {

    var slideshow = {
          opacity: '0.5'
        },
        settings = $.extend({}, slideshow, options),
        slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

    slideShowShadow.css({ 
      opacity: settings.opacity 
    });
  };
})(jQuery);

Note: Your original post referenced an undefined variable (default) in the $.extend function, which I'm sure you had intended to be the slideshow object.

Answer 2

$(function(){

        var slideshow = {  
                opacity: 1,
                corners: true,
                shadows: true
        },
            xShadow = {
                opacity: 0.5      
        }; 

        // Slideshow Corners & Shadows        
        var $hWrap = $('#headerTopWrapper');

        if(slideshow.corners){
            $hWrap.prepend('<div id="slideCornersTop"></div>' + "\n" +
                           '<div id="slideCornersBottom"></div>');   
        }

        if(slideshow.shadows){
            $hWrap.prepend('<div id="slideShadowTop"></div>' + "\n" +
                           '<div id="slideShadowBottom"></div>' + "\n" +
                           '<div id="slideShadowRight"></div>' + "\n" +
                           '<div id="slideShadowLeft"></div>'); 
        }


        // Slideshow Shadow Opacity
        var $slideShowShadow = $('#slideShadowTop, #slideShadowBottom, #slideShadowLeft, #slideShadowRight');

        $slideShowShadow.css({
            opacity: xShadow.opacity
        });

});