Michel2/auto-thickbox-plus
1
0 Fork 0
Code Activity

Add 'Image' options to specify arbitrary images for !Prev/Next/First/Last/Close/Close (Button)/Loading...

Browse Source 
* The options will be disabled when the corresponding 'None' checkbox is checked (JavaScript)
 * Copy tb-close.png, loadingAnimation.gif etc from wp-includes/js/thickbox/ directory
 * Fix: Loading image is not displayed in the exact center of browser window (thickbox.css bug)
This commit is contained in:
attosoft committed 2012-02-22 03:39:38 +00:00
1 parent 7338337eea
commit 6c7911c090
6 files changed
+117 -10
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

auto-thickbox.php
+111 -4
View File
@@ -138,8 +138,8 @@ class auto_thickbox {
'of' => $this->txt_of,
'close' => $this->txt_close,
'noiframes' => __('This feature requires inline frames. You have iframes disabled or your browser does not support them.'),
'loadingAnimation' => includes_url('js/thickbox/loadingAnimation.gif'),
'closeImage' => includes_url('js/thickbox/tb-close.png')
'loadingAnimation' => $this->options['img_load'] != 'none' ? $this->options['img_load'] : $this->options_def['img_load'],
'closeImage' => $this->options['img_close_btn'] != 'none' ? $this->options['img_close_btn'] : $this->options_def['img_close_btn']
));
}
} # scripts()
@@ -252,6 +252,36 @@ class auto_thickbox {
if ( !$this->is_default_options('txt_shadow_cap') )
$style .= "#TB_caption { text-shadow:{$this->options['txt_shadow_cap']}; }\n";
if ( $this->options['img_prev'] == 'none' )
$style .= "#TB_ImageClick a#TB_ImagePrev:hover { background-image: none; }\n";
else if ( !$this->is_default_options('img_prev') )
$style .= "#TB_ImageClick a#TB_ImagePrev:hover { background-image: url({$this->options['img_prev']}); }\n";
if ( $this->options['img_next'] == 'none' )
$style .= "#TB_ImageClick a#TB_ImageNext:hover { background-image: none; }\n";
else if ( !$this->is_default_options('img_next') )
$style .= "#TB_ImageClick a#TB_ImageNext:hover { background-image: url({$this->options['img_next']}); }\n";
if ( $this->options['img_first'] == 'none' )
$style .= "#TB_ImageClick a#TB_ImageFirst:hover { background-image: none; }\n";
else if ( !$this->is_default_options('img_first') )
$style .= "#TB_ImageClick a#TB_ImageFirst:hover { background-image: url({$this->options['img_first']}); }\n";
if ( $this->options['img_last'] == 'none' )
$style .= "#TB_ImageClick a#TB_ImageLast:hover { background-image: none; }\n";
else if ( !$this->is_default_options('img_last') )
$style .= "#TB_ImageClick a#TB_ImageLast:hover { background-image: url({$this->options['img_last']}); }\n";
if ( $this->options['img_close'] == 'none' )
$style .= "#TB_ImageClick a#TB_ImageClose:hover { background-image: none; }\n";
else if ( !$this->is_default_options('img_close') )
$style .= "#TB_ImageClick a#TB_ImageClose:hover { background-image: url({$this->options['img_close']}); }\n";
if ( $this->options['img_close_btn'] == 'none' )
$style .= "#TB_closeWindow { display: none; }\n";
if ( $this->options['img_load'] == 'none' )
$style .= "#TB_load { display: none !important; }\n";
else if ( !$this->is_default_options('img_load') ) {
list($width, $height) = getimagesize($this->options['img_load']);
$margin_top = $height / 2; $margin_left = $width / 2;
$style .= "#TB_load { background-color:transparent; border:none; padding:0; margin: -{$margin_top}px 0 0 -{$margin_left}px; }\n";
}
if ($style)
echo '<style type="text/css">' . $style . '</style>';
} # thickbox_images()
@@ -273,6 +303,20 @@ class auto_thickbox {
}
function auto_thickbox_options() {
$click_end_disabled = in_array($this->options['click_img'], array('close', 'none'));
$img_prev_none = $this->options['img_prev'] == 'none';
$img_prev = !$img_prev_none ? $this->options['img_prev'] : $this->options_def['img_prev'];
$img_next_none = $this->options['img_next'] == 'none';
$img_next = !$img_next_none ? $this->options['img_next'] : $this->options_def['img_next'];
$img_first_none = $this->options['img_first'] == 'none';
$img_first = !$img_first_none ? $this->options['img_first'] : $this->options_def['img_first'];
$img_last_none = $this->options['img_last'] == 'none';
$img_last = !$img_last_none ? $this->options['img_last'] : $this->options_def['img_last'];
$img_close_none = $this->options['img_close'] == 'none';
$img_close = !$img_close_none ? $this->options['img_close'] : $this->options_def['img_close'];
$img_close_btn_none = $this->options['img_close_btn'] == 'none';
$img_close_btn = !$img_close_btn_none ? $this->options['img_close_btn'] : $this->options_def['img_close_btn'];
$img_load_none = $this->options['img_load'] == 'none';
$img_load = !$img_load_none ? $this->options['img_load'] : $this->options_def['img_load'];
?>
<div class="wrap">
<style type="text/css">
@@ -285,6 +329,9 @@ class auto_thickbox {
for (var i = 0; i < document.form['auto-thickbox-plus[click_end]'].length; i++)
document.form['auto-thickbox-plus[click_end]'][i].disabled = disabled;
}
function disableImageText(checkbox) {
document.form[checkbox.name][0].disabled = checkbox.checked;
}
</script>
<?php screen_icon(); ?>
<h2><?php echo $this->txt_options; ?></h2>
@@ -543,6 +590,58 @@ class auto_thickbox {
</td>
</tr>
</table>
<h3><?php echo $this->txt_image; ?></h3>
<table class="form-table">
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_prev2; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_prev]" value="<?php esc_attr_e($img_prev); ?>" size="80"<?php disabled($img_prev_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_prev]" value="none"<?php checked($img_prev_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_next2; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_next]" value="<?php esc_attr_e($img_next); ?>" size="80"<?php disabled($img_next_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_next]" value="none"<?php checked($img_next_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_first2; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_first]" value="<?php esc_attr_e($img_first); ?>" size="80"<?php disabled($img_first_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_first]" value="none"<?php checked($img_first_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_last2; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_last]" value="<?php esc_attr_e($img_last); ?>" size="80"<?php disabled($img_last_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_last]" value="none"<?php checked($img_last_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_close; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_close]" value="<?php esc_attr_e($img_close); ?>" size="80"<?php disabled($img_close_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_close]" value="none"<?php checked($img_close_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_close; ?> (<?php _e('Button', 'auto-thickbox'); ?>)</th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_close_btn]" value="<?php esc_attr_e($img_close_btn); ?>" size="80"<?php disabled($img_close_btn_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_close_btn]" value="none"<?php checked($img_close_btn_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
<tr style="vertical-align: top;">
<th scope="row"><?php echo $this->txt_load; ?></th>
<td>
<label><input type="text" name="auto-thickbox-plus[img_load]" value="<?php esc_attr_e($img_load); ?>" size="80"<?php disabled($img_load_none); ?> /></label>
<label><input type="checkbox" name="auto-thickbox-plus[img_load]" value="none"<?php checked($img_load_none); ?> onclick="disableImageText(this)" /><?php _e('None'); ?></label>
</td>
</tr>
</table>
<p class="submit">
<input type="submit" class="button-primary" value="<?php _e('Save Changes') ?>" />
<input type="submit" class="button-primary" value="<?php _e('Reset') ?>" name="reset" />
@@ -575,7 +674,7 @@ class auto_thickbox {
var $is_en_locale;
var $txt_next, $txt_prev, $txt_first, $txt_last, $txt_image, $txt_of, $txt_close;
var $txt_next2, $txt_prev2, $txt_first2, $txt_last2;
var $txt_options, $txt_action;
var $txt_options, $txt_action, $txt_load;
function auto_thickbox() {
$this->__construct(); // for PHP4
@@ -646,7 +745,14 @@ if ( is_admin() ) {
'opacity_bg' => '0.75',
'box_shadow_win' => 'rgba(0,0,0,1) 0 4px 30px',
'txt_shadow_title' => 'none',
'txt_shadow_cap' => 'none'
'txt_shadow_cap' => 'none',
'img_prev' => plugins_url('images/tb-prev.png', __FILE__),
'img_next' => plugins_url('images/tb-next.png', __FILE__),
'img_first' => plugins_url('images/tb-first.png', __FILE__),
'img_last' => plugins_url('images/tb-last.png', __FILE__),
'img_close' => plugins_url('images/tb-close.png', __FILE__),
'img_close_btn' => plugins_url('images/tb-close.png', __FILE__),
'img_load' => plugins_url('images/loadingAnimation.gif', __FILE__)
);
$this->options = get_option('auto-thickbox-plus');
$this->options = $this->options ? wp_parse_args($this->options, $this->options_def) : $this->options_def;
@@ -688,6 +794,7 @@ if ( is_admin() ) {
$this->txt_options = $this->gettext('Options:', array('Options', 'Settings'));
$this->txt_options = AUTO_THICKBOX_PLUS . ' - ' . str_replace(array(':', '：'), '', $this->txt_options);
$this->txt_action = $this->gettext('Action', array('Actions'));
$this->txt_load = $this->gettext('Loading&#8230;', array('Loading...'));
$this->txt_first2 = ucfirst($this->gettext('first'));
$this->txt_first = '&laquo; ' . $this->txt_first2;
images/loadingAnimation.gif
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.7 KiB

images/macFFBgHack.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 207 B

images/tb-close.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 506 B

thickbox.css
+3 -3
View File
@@ -6,7 +6,7 @@
#TB_window a:active{color:#666666;}
#TB_window a:focus{color:#666666;}
#TB_overlay{position:fixed;z-index:10100;top:0px;left:0px;height:100%;width:100%;}
.TB_overlayMacFFBGHack{background:url(../../../wp-includes/js/thickbox/macFFBgHack.png) repeat;}
.TB_overlayMacFFBGHack{background:url(images/macFFBgHack.png) repeat;}
.TB_overlayBG{background-color:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";filter:alpha(opacity=75);-moz-opacity:0.75;opacity:0.75;}
* html #TB_overlay{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight + 'px');}
#TB_window{position:fixed;background:#ffffff;z-index:10102;color:#000000;visibility:hidden;text-align:left;top:50%;left:50%;border:1px solid #555;-moz-box-shadow:rgba(0,0,0,1) 0 4px 30px;-webkit-box-shadow:rgba(0,0,0,1) 0 4px 30px;-khtml-box-shadow:rgba(0,0,0,1) 0 4px 30px;box-shadow:rgba(0,0,0,1) 0 4px 30px;}
@@ -19,7 +19,7 @@
#TB_ImageClick a#TB_ImageNext:hover{background-image:url(images/tb-next.png);}
#TB_ImageClick a#TB_ImageFirst:hover{background-image:url(images/tb-first.png);}
#TB_ImageClick a#TB_ImageLast:hover{background-image:url(images/tb-last.png);}
#TB_ImageClick a#TB_ImageClose:hover{background-image:url(../../../wp-includes/js/thickbox/tb-close.png);}
#TB_ImageClick a#TB_ImageClose:hover{background-image:url(images/tb-close.png);}
#TB_ImageClick a span{display:block;height:100%;background:inherit;background-position:right;}
#TB_caption{height:25px;padding:7px 30px 10px 25px;float:left;}
.TB_singleLine #TB_caption{padding-bottom:0;}
@@ -31,7 +31,7 @@
#TB_ajaxContent{clear:both;padding:2px 15px 15px 15px;overflow:auto;text-align:left;line-height:1.4em;}
#TB_ajaxContent.TB_modal{padding:15px;}
#TB_ajaxContent p{padding:5px 0px 5px 0px;}
#TB_load{position:fixed;display:none;z-index:10103;top:50%;left:50%;background-color:#E8E8E8;border:1px solid #555;margin:-45px 0pt 0pt -125px;padding:40px 15px 15px;}
#TB_load{position:fixed;display:none;z-index:10103;top:50%;left:50%;background-color:#E8E8E8;border:1px solid #555;margin:-46px 0pt 0pt -119px;padding:40px 15px 15px;}
* html #TB_load{position:absolute;margin-top:expression(0 - parseInt(this.offsetHeight/2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px');}
#TB_HideSelect{z-index:10099;position:fixed;top:0;left:0;background-color:#fff;border:none;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;height:100%;width:100%;}
* html #TB_HideSelect{position:absolute;height:expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight:document.body.offsetHeight + 'px');}
thickbox_uncompressed.css
+3 -3
View File
@@ -30,7 +30,7 @@
width:100%;
}
.TB_overlayMacFFBGHack {background: url(../../../wp-includes/js/thickbox/macFFBgHack.png) repeat;}
.TB_overlayMacFFBGHack {background: url(images/macFFBgHack.png) repeat;}
.TB_overlayBG {
background-color:#000;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
@@ -87,7 +87,7 @@ margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = d
#TB_ImageClick a#TB_ImageNext:hover { background-image: url(images/tb-next.png); }
#TB_ImageClick a#TB_ImageFirst:hover { background-image: url(images/tb-first.png); }
#TB_ImageClick a#TB_ImageLast:hover { background-image: url(images/tb-last.png); }
#TB_ImageClick a#TB_ImageClose:hover { background-image: url(../../../wp-includes/js/thickbox/tb-close.png); }
#TB_ImageClick a#TB_ImageClose:hover { background-image: url(images/tb-close.png); }
#TB_ImageClick a span { display: block; height: 100%; background: inherit; background-position: right; }
#TB_caption{
@@ -148,7 +148,7 @@ margin-top: expression(0 - parseInt(this.offsetHeight / 2) + (TBWindowMargin = d
left: 50%;
background-color: #E8E8E8;
border: 1px solid #555;
margin: -45px 0pt 0pt -125px;
margin: -46px 0pt 0pt -119px;
padding: 40px 15px 15px;
}