2

I use thickbox in the WP backend for preview or other content. On own pages in the backend works my script very fine and a can use custom width and height for the thickbox. below my code:

            <script type="text/javascript">
            <!--
                var viewportwidth;
                var viewportheight;

                if (typeof window.innerWidth != 'undefined') {
                    viewportwidth = window.innerWidth-80,
                    viewportheight = window.innerHeight-100
                } else if (typeof document.documentElement != 'undefined'
                    && typeof document.documentElement.clientWidth !=
                    'undefined' && document.documentElement.clientWidth != 0)
                {
                    viewportwidth = document.documentElement.clientWidth,
                    viewportheight = document.documentElement.clientHeight
                } else { // older versions of IE
                    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                    viewportheight = document.getElementsByTagName('body')[0].clientHeight
                }
                //document.write('<p class="textright">Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
                document.write('<a onclick="return false;" href="<?php echo WP_PLUGIN_URL . '/' . FB_ADM_BASEDIR; ?>/inc/index.php?username=<?php echo DB_USER; ?>&?KeepThis=true&amp;TB_iframe=true&amp;height='+viewportheight+'&width='+viewportwidth+'" class="thickbox button"><?php _e( 'Start Adminer', FB_ADM_TEXTDOMAIN ); ?></a>');
                //-->
            </script>

Now to my problem and question. I will use a thickbox on the page wp-admin/plugins.php and here dont work the script. WP set the height and width always to the core-values and this is to small for my request.

Maybe other readers have an idea or a solution.

Many thanks!

3 Answers 3

0

plugins.php page calls add_thickbox() function that enqueues WP native thickbox script and style. It has this in documentation:

If any of the settings need to be changed, this can be done with another js file similar to media-upload.js and theme-preview.js. That file should require array('thickbox') to ensure it is loaded after.

So there are different possible ways to approach this:

  1. As WP suggest create and queue .js file that will add settings you need to defaults.
  2. Re-register or disable native thickbox completely and replace with your own code.
4
  • Thanks, i dont have see on the function for documentation :( Now i have found the JS for own settings to thickbox.
    – bueltge
    Sep 11, 2010 at 19:24
  • That is in inline documentation (right above function source code in \wp-includes\general-template.php)
    – Rarst
    Sep 11, 2010 at 19:39
  • Yes, i had see in the source. I search normaly about the core in localy or use WPAPI(wpdocs.labs.thedextrousweb.com)
    – bueltge
    Sep 13, 2010 at 11:02
  • 2
    I've found the documentation above add_thickbox, but it's not enough for me to understand how to use it. I'm trying to avoid the default Thickbox height/width on the Add Post screen, but can't figure it out. Are you able to expand/comment on this answer with a code sample that uses thickbox with custom dimensions? Jul 16, 2013 at 14:53
0

Front End or Backend you can set the width and height of the thickbox via setting GET value of the source url.

the thickbox js code will be something like this:

tb_show('Demo', '?action=show_demo&type=extended&width=900&height=800');

notice the width and height parameter. And off course you will have to enqueue the thickbox script and style before.

Note: Code is tested and worked for me on frontend. It should work on backend too. If it doesn't work on backend please let me know. I will try to fix the code

3
  • I think Frank referred to the backend problematic in his original post and this behaviour didn't change. So, this will most likely not work on edit screens in the backend because WP does some overrides. Apr 7, 2013 at 20:44
  • 3
    On custom backend page works this, but not on pages, like plugins.php. WP default the values for wight and height in core and with this way is it not possible to overwrite for your custom requirements.
    – bueltge
    Apr 9, 2013 at 19:22
  • 1
    Banging my head on why the bloody thickbox won't respect the height I'm setting on plugins.php... Thanks, Mr. Frank! @bueltge
    – brasofilo
    Jan 14, 2021 at 19:07
-1

The solution I read nowhere on the internet:

tb_position is the thickbox function that do strange things with the window size. You can easily and simply overide it by the time thickbox call it.

old_tb_position = tb_position;  
tb_position = function(){
    $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px', height: TB_HEIGHT + 'px', marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});    
};

// Set-up inner size
tb_show("Window title,"<?= $the_url; ?>&width=600&height=350",      
tb_position = old_tb_position;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.