Having problems with a "lightbox" based plugin I wrote.
Hey guys, I wrote this plugin and at the moment its working with every browser, except some issues in IE. When using Global Variables, with IE it erases the global variable everytime the jBox is loaded. Any ideas as to why it happens?
- // @title: jBox v0.2
- // @author: John Madrigal
- // Copyright © 2010 Hitcents.
- /*
- * Use for documentation: The purpose of this box is to make it more customizable. As in have 6 different types of boxes using
- * different classes for each box and allowing each box to look different. This is the first attempt at making a plugin so
- * chances are there will most likely be bugs somewhere within the code. All the options that can be called with there
- * description is in the defaults object below.
- */
-
- // jBox code
- $(document).ready(function(){
- jbox_data = "<div id='jbox_wrap' style='display:none;'>";
- jbox_data+= "<div class='jbox_overlay'></div>";
- jbox_data+= "<div id='jbox_content' class='jbox_content_wrap'>";
- jbox_data+= "<div class='jbox_contentInner'></div><span class='jbox_close'></span>";
- jbox_data+= "</div></div>";
- $("body").append(jbox_data);
- });
- (function( $, window ){
-
- $.fn.jbox = function( options ) {
-
- // Options for jBox
- var defaults = {
- 'width' : '80%', // set width of content
- 'height' : '500px', // set height of content
- 'opacity' : '.8', // set opacity of content
- 'classname' : 'jbox_style', // give the box a class
- 'iframe' : false, // if outside content, it needs to be in this
- 'inline' : false, // allows you to grab content from the page
- 'selector' : '', // set the selector (ex. #jbox_code)
- 'href' : '', // give a relative link to grab from
- 'dataType': 'html', // a function that happens after the jBox is loaded.
- 'close' : 'Close', // path to an image file or just a word or message
- 'preload' : '', //path to preloader image
- 'callback' : '', // function to call after ajax load or inline loading
- 'flag' : '', // if flagged, checks against to not use click
- 'gloVar' : '' // if flagged, checks against to not use click
- },
- sets = $.extend({}, defaults, options),
-
- // Variables needed for the plugin
- overlayWidth,
- overlayHeight;
-
-
-
- // Calculate the overlay based on the browser
- function overlayShow(){
- if($.browser.msie){
- overlayWidth = document.documentElement.clientWidth;
- overlayHeight = document.documentElement.clientHeight;
- }
- else{
- overlayWidth = window.innerWidth;
- overlayHeight = window.innerHeight;
- }
-
- $(".jbox_overlay").css({
- "position":"fixed",
- "top":"0",
- "left":"0",
- "height":overlayHeight,
- "width":overlayWidth,
- "z-index":"100"
-
- });
-
- $(".jbox_overlay").animate({
- opacity: sets.opacity
- }, 0);
-
- $(".jbox_overlay").click(function(){
- $("#jbox_wrap").hide();
- // $("#jbox_wrap").remove();
- });
-
- }
-
- // Show a jBox based on params
- function jboxShow(parems){
-
- overlayShow();
-
- $(window).resize(function () {
- overlayShow();
- });
-
- // Create Content
- $("#jbox_content").css({
- "position":"relative",
- "height":sets.height,
- "width":sets.width,
- "z-index":"100"
- });
-
- $(".jbox_contentInner").css({
- "width":"100%",
- "height":"100%",
- "z-index":"110"
- });
-
- if(sets.preload !== undefined){
- $(".jbox_contentInner").html('<img id="jbox_load" src="' + sets.preload + '" alt="Loading" />');
- }
-
-
- // Creates the Iframe
- if(sets.iframe != false)
- {
- $(".jbox_contentInner").html("<iframe style='z-index:110' src ='"+sets.href+"' width='100%' height='100%'></iframe>");
- }
- else{
- // Creates the box if href is set
- if(sets.href != ""){
- $.ajax({
- url: sets.href,
- dataType: sets.dataType,
- success: function(output){
-
- if(sets.dataType == 'json'){
- $(".jbox_contentInner").html(output.data);
- }else{
- $(".jbox_contentInner").html(output);
- }
- if (jQuery.isFunction(sets.callback)){
-
- if($.browser.msie){ sets.callback(sets.gloVar); }
- else{ sets.callback(); }
- }
-
- }
- });
- }
- else{
- // Creates the box if inline is set
- if(sets.inline == true){
- $(sets.selector).clone().appendTo(".jbox_contentInner");
- if(jQuery.isFunction( sets.callback ))
- sets.callback();
- }
- else{
- // Happens when there are no ajax options
- $(".jbox_contentInner").load( $(this).attr('href') );
- if(jQuery.isFunction( sets.callback ))
- sets.callback();
- }
-
- }
- }
-
- // Displays the box when clicked.
- $("#jbox_wrap").css({
- "display":"block"
- });
-
- $('#jbox_content').removeClass();
- $('#jbox_content').addClass(sets.classname);
- $('#jbox_content').addClass('jbox_content_wrap');
-
- var close_detect = sets.close.split('.');
- close_detect = close_detect[close_detect.length - 1];
- close_detect.toLowerCase();
-
- if(close_detect.indexOf('gif') || close_detect.indexOf('jpg') || close_detect.indexOf('png') )
- $('.jbox_close').html('<img src="' + sets.close + '" alt="Close" />');
- else
- $('.jbox_close').html(sets.close);
-
- $('.jbox_close').click(function(){ $("#jbox_wrap").hide();});
- }
-
- // Start the plugins main code
- return this.each(function() {
-
- var jbox = $(this);
-
- // Plugin code can go here
- if (sets.flag == "click") {
- // alert(sets.href);
- jboxShow(sets);
- }
- else {
- jbox.click(function(){
- // Show the jBox based on params
- jboxShow(sets);
- });
- }
- });
-
- };
-
- }( jQuery, this ) );