how to - once a day rotation thickbox jquery popup

Started by jimmy6154, July 26, 2011, 04:14:39 PM

Previous topic - Next topic

jimmy6154

So my preamble to this is that, I'm not a coder, none if this is my code. I've hacked and slashed around the net to find what I needed to make this work for me. credit goes to those that actually know how to code.

Description: A thickbox window will pop up once a day for members and guests on your site.

Files needed:
thickbox.js [nofollow]
jquery.js [nofollow]
thickbox.css [nofollow]
loadinganimation.gif [nofollow]

Steps:
1) After you download, open the thickbox.js file and edit the location of the loadinganimation.gif. This for me was in my default theme images folder.
2) Upload thickbos.js and jquery.js to your theme scripts folder.
3) Upload thickbox.css to your theme css folder
4) Upload the loadinganimation.gif file to the location you specified in step 1.
5) set permissions on the files. for me I just 777 chmod everything, your server requirements might be different.
6) Create 2 files named thick.php and thickbox.html
7) Edit thick.php with the following code


<script>
var expDays = 1; // number of days the cookie should last

var page = "thicktest.js";
var windowprops = "width=500,height=400,location=no,toolbar=no,menubar=no,scrollbars=no,resizable=yes";

function GetCookie (name) {
  var arg = name + "=";
  var alen = arg.length;
  var clen = document.cookie.length;
  var i = 0;
  while (i < clen) {
    var j = i + alen;
    if (document.cookie.substring(i, j) == arg)
    return getCookieVal (j);
    i = document.cookie.indexOf(" ", i) + 1;
    if (i == 0) break;
  }
  return null;
}

function SetCookie (name, value) {
  var argv = SetCookie.arguments;
  var argc = SetCookie.arguments.length;
  var expires = (argc > 2) ? argv[2] : null;
  var path = (argc > 3) ? argv[3] : null;
  var domain = (argc > 4) ? argv[4] : null;
  var secure = (argc > 5) ? argv[5] : false;
  document.cookie = name + "=" + escape (value) +
    ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
    ((path == null) ? "" : ("; path=" + path)) +
    ((domain == null) ? "" : ("; domain=" + domain)) +
    ((secure == true) ? "; secure" : "");
}

function DeleteCookie (name) {
  var exp = new Date();
  exp.setTime (exp.getTime() - 1);
  var cval = GetCookie (name);
  document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

var exp = new Date();
exp.setTime(exp.getTime() + (expDays*24*60*60*1000));

function amt(){
  var count = GetCookie('count')
  if(count == null) {
    SetCookie('count','1')
    return 1
  } else {
    var newcount = parseInt(count) + 1;
    DeleteCookie('count')
    SetCookie('count',newcount,exp)
    return count
  }
}

function getCookieVal(offset) {
  var endstr = document.cookie.indexOf (";", offset);
  if (endstr == -1)
  endstr = document.cookie.length;
  return unescape(document.cookie.substring(offset, endstr));
}

function checkCount() {
  var count = GetCookie('count');
  if (count == null) {
    count=1;
    SetCookie('count', count, exp);
    tb_show("Some title","thickbox.html?",false);
  } else {
    count++;
    SetCookie('count', count, exp);
  }
}

window.onload=checkCount;

</script>


8) edit the line tb_show("Some title","thickbox.html?",false); and change "some title" to what you want your title of the thickbox to be. Leave the quotes in place.
9) Edit thickbox.html and place what ever html code you want in there.
10) Save both files and upload to your websites root directory. Example http://www.somewebsite.com/thick.php [nofollow]
11) Insert code into forum to call thick.php. For me I ediited my boardindex.template.php file in my default theme forlder. I'm sure you can tailor the code a bit more around other files but for me, this is what worked.
    FIND:
echo '
<div id="boardindex_table">
<table class="table_list">';


      INSERT ABOVE
echo ' <link rel="stylesheet" href="Themes/default/css/thickbox.css" type="text/css" media="screen" />';
echo ' <script type="text/javascript" src="/Themes/default/scripts/jquery.js"></script>';
echo ' <script type="text/javascript" src="/Themes/default/scripts/thickbox.js"></script>';
echo include('thick.php');


12) save boardindex.template.php and upload back to your server.
13) refresh page and you should be good to go. Clear your cookies if you want to see it come up again.


The thick box can be re-sized by changing the var windowprops line in the thick.php file as well the time delay can be manipulated when changing the var expDays line.

Please feel free to ping me if I screwed the instructions up. I may someday put this into a package but that is more time I really don't have atm. Some ideas for the package would be to integrate it into the admin consoles and correct any code to follow best practices which I'm not sure what they are.

Anyways, hope you find it useful

thanks


References:
http://jquery.com/demo/thickbox/ [nofollow]

Robert.


jimmy6154

your Welcome  ;D

One thing I forgot to mention is for Mac web viewers you will need to download macFFBgHack.png [nofollow] and update the path to it in thickbox.css. This is a hack to get Thickbox to work correctly on Firefox on the Mac.




desi4um

It's not working for me.

Tried every step you mentioned with patience after first unsuccessful attempt. No jquery pop up is coming while navigating to any page (First tried with  index.template.php then BoardIndex.template.php).

No error no Msg ...nothing.

Any help in this regard would be appreciated.

Thanks

Advertisement: