jfLightBoxLoad

jQuery plugin designed to load external html files via ajax loading with or without an iframe with a lightbox style effect.

Note

Because it uses ajax loading, to test locally, you will need either allow local file access or use a local server like MAMP.

Launch Chrome with allow file access

MAMP

https://www.mamp.info/en/

Script Set Up

Just follow these steps to enable:

Include jQuery on your page.

<script src="http://code.jquery.com/jquery.min.js"></script>

Download and include jfLightBoxLoad after jQuery and before its first use.
```
<script src="jquery.jfLightBoxLoad.js"></script>
```
Init the plugin by attaching it the elements you want responsible for launching external files.
```
$(".lbLoad").jfLightBoxLoad();
```

Options and Defaults

Options and Defaults

Basics

loadElement: 'body' The element you want the light box to be loaded into.
hash: $element.attr('href') The path to the file you want loaded. The default assumes you're using an anchor element so it references its href attribute. But, because this an option, you can use any element.
mouseEvent: 'click' The mouse event that you want to trigger the loading. If you're not wanting it to trigger on a mouse event, set this to 'none' and use the public function launch() when you want the file to launch and load.
iframe: false If you'd like to use an iframe set this to true.

Window Animation

The window fades in by default, but you can pass it From and To properties via lists and CSS properties to change its animation. The out will be the reverse of what ever you set.

animationFrom: {opacity:'0'} The load window's animation starting properties.
animationTo: {opacity:'1'} The load window's animation ending properties.
pause: 0 Pause time before the window comes in.
speed: 500 Speed of window animation.
ease: 'swing' You can pass the animation an ease, but you must to link to a library or plugin such as, jqueryUI, that includes ease options.

Misc Options

pathToScript: null For straight loading you may want to trigger an external script after loading is completed – you pass the path here. Keep in mind that the path should be relative to the page you're loading into, not necessarily the page you're loading.
useTransit: false Transit.js is a swell CSS3 jQuery animation plugin. In the HTML, if you link to transit.js before the link to this plugin and set this to true, all of the animations will be CSS3 instead of the older jQuery animate method. http://ricostacruz.com/jquery.transit/

Passing Functions

onStart: You can pass a function to be called when the load has started.
onStartArgs: If the onStart function has arguments, you can pass argument values via an array ['arg1', 'arg2'].
onComplete: You can pass a function to be called when the load is completed.
onCompleteArgs: If the onComplete function has arguments, you can pass argument values via an array ['arg1', 'arg2'].
onClosed: You can pass a function to be called when the window is closed.
onClosedArgs: If the onClose function has arguments, you can pass argument values via an array ['arg1', 'arg2'].

Options as Arguments

Options can be passed as arguments through the init function.

$('.lbLoad').jfLightBoxLoad({ 	iframe:true, 	mouseEvent:'mouseover', 	animationFrom:{opacity:'0', top:'80%'}, 	animationTo:{opacity:'1', top:'50%'}, 	pause:0, 	speed:250, 	ease:'easeInOutBack', 	pathToScript:'externalScript.js', 	useTransit:true, 	onStart:function(){console.log("started")}, 	onComplete:function(){console.log("complete")}, 	onClosed:function(){console.log("closed")},   });

Options as Data Attributes

Options can also be passed through data attributes in the opening of the attached element. Notice that the data attributes use dashes instead of camel case.

<div class="lbLoad"  	data-mouse-event="mouseover"  	data-hash="externalFile.html" 	data-path-to-script="externalScript.js" >Mouse Over Me</div>

Public functions

There are a few public functions that can be called at any time after init.

launch(): This function can be called to launch the external file associated with the element it's attached to. It's handy for launching on a unique event like drag stop or drop. Additionally, you will most likely need to disable the click functionality by setting the mouseEvent to "none".
close(): This closes the window.
destroy(): This deactivates the plugin.
init(): This initates the plugin, this gets called automatically.

$(".lbLoad").data("jfLightBoxLoad").launch(); $(".lbLoad").data("jfLightBoxLoad").close(); $(".lbLoad").data("jfLightBoxLoad").destroy(); $(".lbLoad").data("jfLightBoxLoad").init();

Structure

These are the elements the plugin creates. If you select the iFrame option .lb_content will be an iFrame.

<div class="lb_lightbox"> 	<div class="lb_shade"></div> 	<div class="lb_loadAnimation">loading</div> 	<div class="lb_window"> 		<div class="lb_content"><!--stuff gets loaded here --></div> 		<div class="lb_closeBtn">close</div> 	</div> </div>

Classes

.lb_lightbox: The main parent element of lightboxload.
.lb_shade: The backdrop area.
.lb_loadAnimation: The loading animation.
.lb_window: The parent of the content area and close button. Gives you a layer to work with.
.lb_content: Where the external file will be loaded. If you choose iframe this will be an iFrame element.
.lb_closeBtn: The close button.

Credits

I used http://stefangabos.ro/jquery/jquery-plugin-boilerplate-revisited/ as a starting point for the plugin.

Dynamic Customizable jQuery AJAX Modal Plugin - jfLightBoxLoad