SubscriptionFacebox(Facebook-Style): Load Your Page into Lightbox on the Fly!
If you have been on Facebook for some while, I am sure you are getting used to experience those fancy popup boxes on the site. Doesn’t it look cool? I believe most of the web programmers have shown their jealousy when seeing this cool effect for fetching data on Facebook. I could say that I am the one of them, too. But now, I can do it and even apply to my works and of course, it is the same to you!
Well, here I am using jQuery’s Facebox – a facebook style lightbox. Try out this DEMO, and then take a look at these source code I have written:
JavaScript/jQuery:
<script type="text/javascript" src="../jquery.js"></script> <script type="text/javascript" src="facebox.js"></script> <script type="text/javascript"> //<![CDATA[ var boris = (function(){ var borisImage = { image: function(){ $("#loading").show("fast",function(){ var i = 3; $("#loading").html("<b>Loading... " + i +"</b>"); var firsInterval = setTimeout(function(){boris.countDown(i);}, 1000); }); },// end image function countDown: function(i){ if(i != 1){ i--; $("#loading").html("<b>Loading... " + i +"</b>"); var secondInterval = setTimeout(function(){boris.countDown(i);}, 1000); // call itself, recursively after one second }else if(i == 1){ // clear ajax loader, and then load facebox $("#loading").hide("fast", function(){ boris.showImage(); }); }// end if },// end countDown showImage: function(){ var input = "action=view&sid=" + Math.random(); $.ajax({ // load page via jquery ajax, type: "POST", url: "boris-image.php", data: input, success: function(result){ $.facebox(result); //and get the fetched data and load into facebox }//end success });// end $.ajax }// end showImage }; return borisImage; })(); //]]> </script>
As you have seen from the DEMO, actually the idea of the behind is quite simple:
1) Show the Ajax’s loader
2) Counting down by starting with 3 and minus 1 after every second (call the function recursively)
3) Hide the Ajax’s loader again once reached the first
4) Trigger jQuery $.ajax() function
5) Load data (image for this case) from server-side (php file)
6) Display fetched data (image) into facebox
I have fully written the JavaScript in closures method, so it is important to get yourself familiar with JavaScript’s closures concept before you dive into it.
The CSS for the Ajax’s loader is as follows:
<style type="text/css"> <!-- /* loader */ .loader { display: none; position: fixed; top: 18px; left: 0%; width: auto; height: auto; padding: 4px; border: 0px solid #CCCCCC; background-color:#FF9900; z-index:1002; overflow: auto; text-align:center; } --> </style>
It is actually similar with the one I have shown in my previous post, just with slight changes inside.
And the last, is very basic PHP code here:
<?php $action = $_POST["action"]; if($action == "view"){ echo "<h3>Hi! There, thanks for trying out this demo ^^</h3>"; echo "<img src=\"boris.jpg\" title=\"Boris Ding Poh Hing\">"; } ?>
Feel free to contact me for all files if you need it. Enjoy! 
Note:
Not only for static text, yet you can also display any pages into this cool lightbox as well as the form, etc.
Related posts:
