Sunday, 25 August 2013

How do I make options for my jQuery Plugin?

How do I make options for my jQuery Plugin? References I have a plugin with a bunch of variables set for width, height, position, etc. How do I modify my lightbox plugin so that the settings options (settings variables) can be set when I initialize the plugin with a selector? I am intermediate with jQuery, and have not made many plugins. Thanks for your help. My plugin is below: (function($){ $.fn.scpopup = function(){ // Settings Variables var linkType = \"iframe\"; // iframe, inline, html, image var scWidth = \"65%\"; // Width of popup container (in px, % or auto) var scHeight = \"auto\"; // Height of popup container (in px, % or auto) var popupMaxWidth = \"700px;\"; // Max width of popup container (in px, % or auto) var popupMaxHeight = \"auto\"; // Max width of popup container (in px, % or auto) var popupTheme = \"test\"; // Popup theme name (is an additional class added to parent) var activeClass = \"active\"; // Class name to use for active elements var popupPosition = \"fixed\"; // absolute, fixed var effectOpen = \"\"; // Popup opening effect var effectClose = \"\"; // Popup closing effect var htmlContent = \"

Title

This content will go into the popup.

\"; // Must set linkType to html // Functions to Specify Width and Height of Popup function scpopupWidth(scW) { $(\'#scpopup\').css({\'position\' : popupPosition, \'margin-left\' : \'-\' + scW/2 + \'px\'}); } function scpopupHeight(scH) { $(\'#scpopup\').css({\'position\' : popupPosition, \'margin-top\' : \'-\' + scH/2 + \'px\'}); } // Append Backdrop and Content Container $(\'body\').append(\'
\'); $(\'body\').append(\'
\'); // Set Width and Height of Outer Container $(\'#scpopup\').width(scWidth).height(scHeight).addClass(popupTheme); $(this).addClass(\'scpopuplink\'); // Click Event: Open $(this).on(\'click\', function(e){ e.preventDefault(); // Margin/Width/Height for Popup scpopupWidth($(\'#scpopup\').width()); scpopupHeight($(\'#scpopup\').height()); // Setting Body/HTML tags to 100% width and height $(\'body\', \'html\').css({\'width\' : \'100%\', \'height\' : \'100%\'}); $(\'body\').addClass(\'scpopupactive\'); // Transitions $(\'div.popupbackdrop\').fadeIn(150).addClass(activeClass); $(\'#scpopup\').fadeIn(300).addClass(activeClass); // Empty Title/Subtitle Holders on Click $(\'#scpopuptitle, #scpopupsubtitle\').empty(); // Load Title/Subtitles on Click $(\'\').text($(this).attr(\'title\')).appendTo(\'#scpopuptitle\'); $(\'\').text($(this).attr(\'alt\')).appendTo(\'#scpopupsubtitle\'); // Link Type (linkType) if(linkType == \'iframe\'){ $(\'#scpopupcontent\').empty().append( $(\'\'); }else if(linkType == \'inline\'){ //alert(\'inline\'); }else if(linkType == \'html\') { $(\'#scpopupcontent\').empty().append(htmlContent); }else if(linkType == \'image\') { //alert(\'image\'); } }); // Click Event: Close $(\'div.popupbackdrop\').on(\'click\', function(e){ e.preventDefault(); $(\'body\').removeClass(\'scpopupactive\'); $(this).delay(50).fadeOut(300).removeClass(activeClass); $(\'#scpopup\').delay(25).fadeOut(150).removeClass(activeClass); }); }; })(jQuery);

No comments:

Post a Comment