AustraliaBound.org ModalBox Nag Screen
Turn guests into registered users. or more .... ?
PLEASE READ THIS POST BEFORE WHINGING Spoiler (click to open)
Arch.
The objective of this is to show people how to adopt a Modal , jquery powered nag screen. With upto 600 guests on our site on most days, we are always looking to further our membership. Had you read the first line of the mod:
This mod, can be triggered onclick or onload Meaning you could add a html navbar link, which is usergroup conditional or not. You could then optimise the code, to display anything AJAXified, including Login forms, feedback forms, comment systems... tutorial videos.. We dont use this code on our site, but the concept is to give people the tools and inspiration to "have a go" and see that this is a modification which you could use for many other purposes. In its Onclick State, a user doesnt get nagged ( I have posted that code above ) So a guest would not see this, until they clicked a button. The code within ajax.html can easily be swapped out for any other code, specifically see the examples I posted within the link on post 7 I am sure you could find a use for this, just need to think outside the box. Close
Please SEE VIDEO Modal: Spoiler (click to open)
See if this works now.
I have coded this now ( slightly differently on our forum ) But feel free to use this code change for adding dynamic videos using Modal. This is a follow up to our Nag Screen. Here is another example: FOR FRESH USERS ( you still need to upload content and colorbox folders !!!!! ) This MODALS a youtube link video dynamically on your Page Open forumhome template add this above </head> Code:
<!--jquery modal--> <link type="text/css" media="screen" rel="stylesheet" href="colorbox/colorbox.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="colorbox/jquery.colorbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ //Examples of how to assign the ColorBox event to elements $("a[rel='example1']").colorbox(); $("a[rel='example2']").colorbox({transition:"fade"}); $("a[rel='example3']").colorbox({transition:"none", width:"75%", height:"75%"}); $("a[rel='example4']").colorbox({slideshow:true}); $(".example5").colorbox(); $(".example6").colorbox({iframe:true, innerWidth:425, innerHeight:344}); $(".example7").colorbox({width:"80%", height:"80%", iframe:true}); $(".example8").colorbox({width:"50%", inline:true, href:"#inline_example1"}); $(".example9").colorbox({ onOpen:function(){ alert('onOpen: colorbox is about to open'); }, onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); }, onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); }, onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); }, onClosed:function(){ alert('onClosed: colorbox has completely closed'); } }); //Example of preserving a JavaScript event for inline calls. $("#click").click(function(){ $('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here."); return false; }); }); </script> <!--jquery modal--> Code:
<!--Modal Box--> <p><a class='example6' href="http://www.youtube.com/v/8k__7q3jRw8" title="vBulletin 4 - How to make a fixed style">vBulletin Tutorial</a></p> <!--Modal Box End--> This link could be anywhere , navbar etc etc Could be coded to add ajax inline , rather than iframe. Whatever, but you cannot knock the fact this makes good sense, and looks wicked. Anyhoo.. I cant spark peoples imaginations, I suppose they need to do that themselves. ---------- Post added at 06:58 AM ----- British Expats Australia----- Previous post was at 06:50 AM ---------- We will be adopting this system for tutorials and other link screens in main menu over the coming weeks. Currently link just below header, for weather widget Close
This does what it says on the tin, it isnt for everyone. So dont go whining and whinging. But if you feel a need for this, then enjoy. Utilising: Jquery Ajax Css and a bit of JiggeryPokery we bring you: NAG the BUGGERS NagScreen. This mod will NAG your guests to register !!! Simple as really. Easy to install. 2 folders to upload 3 templates to add some code to - copy the code between the [code] this code here [/code] tags. Please do not upload the actual code tags themselves ok Included are the PSD's I used in production of this for our forum. Please feel free to use / change and bastardize. Do not ask me to do it for you, I am far too busy. This is a free hack, and I for one think VB should instigate a system of you download ---- you click install system. If you dont click install you should PAY ! Not a lot to ask is it ! Sheesh cmon, ONE FINGER CLICK ! Anyhoo.... To install the mod. Open the read me. There are 3 templates to change.-- -- forumhome -- -- forumdisplay -- -- -- footer 2 folders to upload to your forum root. -- content -- -- colorbox Thats it. Instructions on editing conditionals is in the readme. PSD included for our button image and register ajax image DEMO: http://australiabound.org/forum/forum.php Enjoy and ffs click installed and rate it. ... pps dont remove copyright comments ! Download
AustraliaBound_Modal_nag_screen2.zip (620.2 KB, 67 downloads) Screenshots |
Similar Mods
Mini Mods AustraliaBound.org - Instant IP LookUP | vBulletin 4.x Add-ons |
TUX Avatar Set 70x70 px AustraliaBound.org | vBulletin Avatar Sets |