Help to implement new function in nCode Image Resizer

Hello,

I use nCode Image Resizer for Wordpress. You can see an example here: http://tinyurl.com/9kemyd6

The plugin resize all images and when you click the bar shown before photo, the photo resize to a bigger dimension what it’s set in admin panel. What I try to do and I can’t resolve is to have same function when I click directly the image.

I have 3 files: ncode_imageresizer.js , tinybox.js and ncode-image-resizer.php

ncode_imageresizer.js CODE:

// nCode Image Resizer for WordPress
// [nCode - vBulletin Plugins](http://www.ncode.nl/vbulletinplugins/)
// Version: 1.0.1
//
// (c) 2007 nCode
//
// WordPress plugin by [Günlük Haftal?k Ayl?k](http://www.dmry.net/)

NcodeImageResizer.IMAGE_ID_BASE = 'ncode_imageresizer_container_';
NcodeImageResizer.WARNING_ID_BASE = 'ncode_imageresizer_warning_';
NcodeImageResizer.scheduledResizes = [];

function NcodeImageResizer(id, img) {
	this.id = id;
	this.img = img;
	this.originalWidth = 0;
	this.originalHeight = 0;
	this.warning = null;
	this.warningTextNode = null;
	this.originalWidth = img.originalWidth;
	this.originalHeight = img.originalHeight;
	
	img.id = NcodeImageResizer.IMAGE_ID_BASE+id;
}

NcodeImageResizer.executeOnload = function() {
	var rss = NcodeImageResizer.scheduledResizes;
	for(var i = 0; i  < rss.length; i++) {
		NcodeImageResizer.createOn(rss[i], true);
	}
}

NcodeImageResizer.schedule = function(img) {
	if(NcodeImageResizer.scheduledResizes.length == 0) {
		if(window.addEventListener) {
			window.addEventListener('load', NcodeImageResizer.executeOnload, false);
		} else if(window.attachEvent) {
			window.attachEvent('onload', NcodeImageResizer.executeOnload);
		}
	}
	NcodeImageResizer.scheduledResizes.push(img);
}

NcodeImageResizer.getNextId = function() {
	var id = 1;
	while(document.getElementById(NcodeImageResizer.IMAGE_ID_BASE+id) != null) {
		id++;
	}
	return id;
}

NcodeImageResizer.createOnId = function(id) {
	return NcodeImageResizer.createOn(document.getElementById(id));
}

NcodeImageResizer.createOn = function(img, isSchedule) {
	if(typeof isSchedule == 'undefined') isSchedule = false;
	
	if(!img || !img.tagName || img.tagName.toLowerCase() != 'img') {
		alert(img+' is not an image ('+img.tagName.toLowerCase()+')');
	}
	
	if(img.width == 0 || img.height == 0) {
		if(!isSchedule)
			NcodeImageResizer.schedule(img);
		return;
	}
	
	if(!img.originalWidth) img.originalWidth = img.width;
	if(!img.originalHeight) img.originalHeight = img.height;
	
	if((NcodeImageResizer.MAXWIDTH > 0 && img.originalWidth > NcodeImageResizer.MAXWIDTH) || (NcodeImageResizer.MAXHEIGHT > 0 && img.originalHeight > NcodeImageResizer.MAXHEIGHT)) {
		var isRecovery = false; // if this is a recovery from QuickEdit, which only restores the HTML, not the OO structure
		var newid, resizer;
		if(img.id && img.id.indexOf(NcodeImageResizer.IMAGE_ID_BASE) == 0) {
			newid = img.id.substr(NcodeImageResizer.IMAGE_ID_BASE.length);
			if(document.getElementById(NcodeImageResizer.WARNING_ID_BASE+newid) != null) {
				resizer = new NcodeImageResizer(newid, img);
				isRecovery = true;
				resizer.restoreImage();
			}
		} else {
			newid = NcodeImageResizer.getNextId();
			resizer = new NcodeImageResizer(newid, img);
		}
		
		if(isRecovery) {
			resizer.reclaimWarning(newid);
		} else {
			resizer.createWarning();
		}
		resizer.scale();
	}
}

NcodeImageResizer.prototype.restoreImage = function() {
	newimg = document.createElement('IMG');
	newimg.src = this.img.src;
	this.img.width = newimg.width;
	this.img.height = newimg.height;
}

NcodeImageResizer.prototype.reclaimWarning = function(id) {
	this.warning = document.getElementById(NcodeImageResizer.WARNING_ID_BASE+id);
	this.warningTextNode = this.warning.firstChild.firstChild.childNodes[1].firstChild;
	this.warning.resize = this;
	
	this.scale();
}

NcodeImageResizer.prototype.createWarning = function() {
	var mtable = document.createElement('TABLE');
	var mtbody = document.createElement('TBODY');
	var mtr = document.createElement('TR');
	var mtd1 = document.createElement('TD');
	var mtd2 = document.createElement('TD');
	var mimg = document.createElement('IMG');
	var mtext = document.createTextNode('');
	
	//mimg.src = NcodeImageResizer.BBURL+'/images/statusicon/wol_error.gif';
	mimg.src = NcodeImageResizer.BBURL;
	mimg.width = 16;
	mimg.height = 16;
	mimg.alt = '';
	mimg.border = 0;
	
	mtd1.width = 20;
	mtd1.className = 'td1';
	
	mtd2.unselectable = 'on';
	mtd2.className = 'td2';
	
	mtable.className = 'ncode_imageresizer_warning';
	mtable.textNode = mtext;
	mtable.resize = this;
	mtable.id = NcodeImageResizer.WARNING_ID_BASE+this.id;
	
	mtd1.appendChild(mimg);
	mtd2.appendChild(mtext);
	
	mtr.appendChild(mtd1);
	mtr.appendChild(mtd2);
	
	mtbody.appendChild(mtr);
	
	mtable.appendChild(mtbody);
	
	this.img.parentNode.insertBefore(mtable, this.img);
	
	this.warning = mtable;
	this.warningTextNode = mtext;
}

NcodeImageResizer.prototype.setText = function(text) {
	var newnode = document.createTextNode(text);
	this.warningTextNode.parentNode.replaceChild(newnode, this.warningTextNode);
	this.warningTextNode = newnode;
}

NcodeImageResizer.prototype.scale = function() {
	this.img.height = this.originalHeight;
	this.img.width = this.originalWidth;
	
	if(NcodeImageResizer.MAXWIDTH > 0 && this.img.width > NcodeImageResizer.MAXWIDTH) {
		this.img.height = (NcodeImageResizer.MAXWIDTH / this.img.width) * this.img.height;
		this.img.width = NcodeImageResizer.MAXWIDTH;
	}
	
	if(NcodeImageResizer.MAXHEIGHT > 0 && this.img.height > NcodeImageResizer.MAXHEIGHT) {
		this.img.width = (NcodeImageResizer.MAXHEIGHT / this.img.height) * this.img.width;
		this.img.height = NcodeImageResizer.MAXHEIGHT;
	}
	
	this.warning.width = this.img.width;
	this.warning.onclick = function() { return this.resize.unScale(); }
	
	if(this.img.width < 450) {
		this.setText(vbphrase['ncode_imageresizer_warning_small']);
	} else if(this.img.fileSize && this.img.fileSize > 0) {
		this.setText(vbphrase['ncode_imageresizer_warning_filesize'].replace('%1$s', this.originalWidth).replace('%2$s', this.originalHeight).replace('%3$s', Math.round(this.img.fileSize/1024)));
	} else {
		this.setText(vbphrase['ncode_imageresizer_warning_no_filesize'].replace('%1$s', this.originalWidth).replace('%2$s', this.originalHeight));
	}
	
	return false;
}

NcodeImageResizer.prototype.unScale = function() {
	switch(NcodeImageResizer.MODE) {
		case 'samewindow':
			window.open(this.img.src, '_self');
			break;
		case 'newwindow':
			window.open(this.img.src, '_blank');
			break;
		case 'tinybox':
			TINY.box.show('<img src="'+this.img.src+'" />',0,0,0,1);
			break;			
		case 'enlarge':
		default:
			this.img.width = this.originalWidth;
			this.img.height = this.originalHeight;
			this.img.className = 'ncode_imageresizer_original';
			if(this.warning != null) {
				this.setText(vbphrase['ncode_imageresizer_warning_fullsize']);
				this.warning.width = this.img.width;
				this.warning.onclick = function() { return this.resize.scale() };
			}
			break;
	}
	
	return false;
}

tinybox.js Code:

var TINY={};

function T$(i){return document.getElementById(i)}

TINY.box=function(){
	var p,m,b,fn,ic,iu,iw,ih,ia,f=0;
	return{
		show:function(c,u,w,h,a,t){
			if(!f){
				p=document.createElement('div'); p.id='tinybox';
				m=document.createElement('div'); m.id='tinymask';
				b=document.createElement('div'); b.id='tinycontent';
				document.body.appendChild(m); document.body.appendChild(p); p.appendChild(b);
				m.onclick=TINY.box.hide; window.onresize=TINY.box.resize; f=1
			}
			if(!a&&!u){
				p.style.width=w?w+'px':'auto'; p.style.height=h?h+'px':'auto';
				p.style.backgroundImage='none'; b.innerHTML=c
			}else{
				b.style.display='none'; p.style.width=p.style.height='100px'
			}
			this.mask();
			ic=c; iu=u; iw=w; ih=h; ia=a; this.alpha(m,1,80,3);
			if(t){setTimeout(function(){TINY.box.hide()},1000*t)}
		},
		fill:function(c,u,w,h,a){
			if(u){
				p.style.backgroundImage='';
				var x=window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject('Microsoft.XMLHTTP');
				x.onreadystatechange=function(){
					if(x.readyState==4&&x.status==200){TINY.box.psh(x.responseText,w,h,a)}
				};
				x.open('GET',c,1); x.send(null)
			}else{
				this.psh(c,w,h,a)
			}
		},
		psh:function(c,w,h,a){
			if(a){
				if(!w||!h){
					var x=p.style.width, y=p.style.height; b.innerHTML=c;
					p.style.width=w?w+'px':''; p.style.height=h?h+'px':'';
					b.style.display='';
					w=parseInt(b.offsetWidth); h=parseInt(b.offsetHeight);
					b.style.display='none'; p.style.width=x; p.style.height=y;
				}else{
					b.innerHTML=c
				}
				this.size(p,w,h,4)
			}else{
				p.style.backgroundImage='none'
			}
		},
		hide:function(){
			TINY.box.alpha(p,-1,0,3)
		},
		resize:function(){
			TINY.box.pos(); TINY.box.mask()
		},
		mask:function(){
			m.style.height=TINY.page.theight()+'px';
			m.style.width=''; m.style.width=TINY.page.twidth()+'px'
		},
		pos:function(){
			var t=(TINY.page.height()/2)-(p.offsetHeight/2); t=t<10?10:t;
			p.style.top=(t+TINY.page.top())+'px';
			p.style.left=(TINY.page.width()/2)-(p.offsetWidth/2)+'px'
		},
		alpha:function(e,d,a,s){
			clearInterval(e.ai);
			if(d==1){
				e.style.opacity=0; e.style.filter='alpha(opacity=0)';
				e.style.display='block'; this.pos()
			}
			e.ai=setInterval(function(){TINY.box.twalpha(e,a,d,s)},20)
		},
		twalpha:function(e,a,d,s){
			var o=Math.round(e.style.opacity*100);
			if(o==a){
				clearInterval(e.ai);
				if(d==-1){
					e.style.display='none';
					e==p?TINY.box.alpha(m,-1,0,2):b.innerHTML=p.style.backgroundImage=''
				}else{
					e==m?this.alpha(p,1,100,5):TINY.box.fill(ic,iu,iw,ih,ia)
				}
			}else{
				var n=o+Math.ceil(Math.abs(a-o)/s)*d;
				e.style.opacity=n/100; e.style.filter='alpha(opacity='+n+')'
			}
		},
		size:function(e,w,h,s){
			e=typeof e=='object'?e:T$(e); clearInterval(e.si);
			var ow=e.offsetWidth, oh=e.offsetHeight,
			wo=ow-parseInt(e.style.width), ho=oh-parseInt(e.style.height);
			var wd=ow-wo>w?-1:1, hd=(oh-ho>h)?-1:1;
			e.si=setInterval(function(){TINY.box.twsize(e,w,wo,wd,h,ho,hd,s)},20)
		},
		twsize:function(e,w,wo,wd,h,ho,hd,s){
			var ow=e.offsetWidth-wo, oh=e.offsetHeight-ho;
			if(ow==w&&oh==h){
				clearInterval(e.si); p.style.backgroundImage='none'; b.style.display='block'
			}else{
				if(ow!=w){e.style.width=ow+(Math.ceil(Math.abs(w-ow)/s)*wd)+'px'}
				if(oh!=h){e.style.height=oh+(Math.ceil(Math.abs(h-oh)/s)*hd)+'px'}
				this.pos()
			}
		}
	}
}();

TINY.page=function(){
	return{
		top:function(){return document.body.scrollTop||document.documentElement.scrollTop},
		width:function(){return self.innerWidth||document.documentElement.clientWidth},
		height:function(){return self.innerHeight||document.documentElement.clientHeight},
		theight:function(){
			var d=document, b=d.body, e=d.documentElement;
			return Math.max(Math.max(b.scrollHeight,e.scrollHeight),Math.max(b.clientHeight,e.clientHeight))
		},
		twidth:function(){
			var d=document, b=d.body, e=d.documentElement;
			return Math.max(Math.max(b.scrollWidth,e.scrollWidth),Math.max(b.clientWidth,e.clientWidth))
		}
	}
}();

and ncode-image-resizer.php Code:

<?php
/*
Plugin Name: nCode Image Resizer
Plugin URI: [Günlük Haftal?k Ayl?k](http://www.dmry.net/)
Description: This plugin enables you to automatically resize every user-posted image which is larger than given dimensions. Original plugin writen by <a href="http://www.ncode.nl/vbulletinplugins/" target="_blank" title="Jorrit Schippers">Jorrit Schippers  for vBulletin</a>.
Author: Hakan Demiray
Version: 1.3
Author URI: [Günlük Haftal?k Ayl?k](http://www.dmry.net/)
*/
add_action('init', 'ncode_init');
add_action('admin_menu', 'ncode_options_page');
add_action('activate_ncode-image-resizer/ncode-image-resizer.php','ncode_activate');
add_action('wp_head', 'ncode_wp_head');
add_filter('the_content', 'ncode_the_content',100);

function ncode_init() {
    load_plugin_textdomain('ncode', 'wp-content/plugins/ncode-image-resizer/languages' );
}

function ncode_activate() {
    add_option('ncode_db_surum', 1);
    add_option('ncode_secenekler', array('resizemode'=>'enlarge', 'maxwidth'=>400, 'maxheight'=>''));
}


function ncode_options_page() {
    add_options_page(__('nCode Settings','ncode'), __('nCode Settings','ncode'), 'administrator', basename(__FILE__), 'ncode_options');
}

function ncode_wp_head() {
    $ncode_secenekler = get_option('ncode_secenekler');
    $ncode_plugin_url = WP_CONTENT_URL.'/plugins/ncode-image-resizer/';
?>
<script type="text/javascript" src="<?php echo $ncode_plugin_url; ?>js/ncode_imageresizer.js?v=1.0.1"></script>
<?php if ($ncode_secenekler['resizemode']=='tinybox') { ?>
<script type="text/javascript" src="<?php echo $ncode_plugin_url; ?>js/tinybox.js?v=1.0"></script>
<?php } ?>
<style type="text/css">table.ncode_imageresizer_warning {background: #FFFFE0;color:#333333;border: 1px solid #E6DB55;cursor: pointer;}table.ncode_imageresizer_warning td {font-size: 10px;vertical-align: middle;text-decoration: none; text-align:left; font-family:Verdana, Geneva, sans-serif;}table.ncode_imageresizer_warning td.td1 {padding: 5px;}table.ncode_imageresizer_warning td.td1 {padding: 2px;}
<?php if ($ncode_secenekler['resizemode']=='tinybox') { ?>
#tinybox {position:absolute; display:none; padding:10px; background:#fff url(<?php echo $ncode_plugin_url; ?>images/preload.gif) no-repeat 50% 50%; border:10px solid #e3e3e3; z-index:2000}#tinymask {position:absolute; display:none; top:0; left:0; height:100%; width:100%; background:#000; z-index:1500}#tinycontent {background:#fff}
<?php } ?>
</style>
<script type="text/javascript">
NcodeImageResizer.MODE = '<?php echo $ncode_secenekler['resizemode'];?>';
NcodeImageResizer.MAXWIDTH = <?php if($ncode_secenekler['maxwidth']=='') echo "''"; else echo $ncode_secenekler['maxwidth'];?>;
NcodeImageResizer.MAXHEIGHT = <?php if($ncode_secenekler['maxheight']=='') echo "''"; else echo $ncode_secenekler['maxheight'];?>;
NcodeImageResizer.BBURL = '<?php echo $ncode_plugin_url; ?>images/uyari.gif';
var vbphrase=new Array;
vbphrase['ncode_imageresizer_warning_small'] = '<?php _e('Click this bar to view the full image.', 'ncode'); ?>';
vbphrase['ncode_imageresizer_warning_filesize'] = '<?php _e('This image has been resized. Click this bar to view the full image. The original image is sized %1$sx%2$spx and weights %3$sKB.', 'ncode'); ?>';
vbphrase['ncode_imageresizer_warning_no_filesize'] = '<?php _e('This image has been resized. Click this bar to view the full image. The original image is sized %1$sx%2$spx.', 'ncode'); ?>';
vbphrase['ncode_imageresizer_warning_fullsize'] = '<?php _e('Click this bar to view the small image.', 'ncode'); ?>';
</script>
<?php
}

function ncode_durum_katman($mesaj, $durum) {
    if($durum == 'guncellendi') $class = 'updated fade';
    elseif($durum == 'hata') $class = 'updated error';
    else $class = $type;

    echo '<div id="message" class="'.$class.'"><p>' . __($mesaj, 'ncode') . '</p></div>';
}

function ncode_the_content($content) {
    return preg_replace("/<img([^`|>]*)>/im", "<img onload=\\"NcodeImageResizer.createOn(this);\\"$1>", $content);
}

function ncode_options() {
    if ( function_exists('current_user_can') && !current_user_can('manage_options') ) die(__('Cheatin’ uh?', 'ncode'));
    if (! user_can_access_admin_page()) wp_die( __('You do not have sufficient permissions to access this page','ncode') );

    $array_resizemode = array('none'=>__('Keep original size', 'ncode'), 'enlarge'=>__('Enlarge in same window', 'ncode'), 'samewindow'=>__('Open in same window', 'ncode'), 'newwindow'=>__('Open in new window', 'ncode'), 'tinybox'=>__('Open in modal window', 'ncode'));

    if(isset($_REQUEST['submit']) and $_REQUEST['submit']) {
        $maxwidth = $_POST['maxwidth'];
        $maxheight = $_POST['maxheight'];
        $resizemode = $_POST['resizemode'];
        $varhata=false;
        if(!is_numeric($maxwidth) && !empty($maxwidth)) {
            ncode_durum_katman('Maximum width must be numeric', 'hata');
            $varhata = true;
        } else if(!is_numeric($maxheight) && !empty($maxheight)) {
            ncode_durum_katman('Maximum height must be numeric', 'hata');
            $varhata = true;
        }
        if($varhata==false) {
            $secenekler = compact('maxwidth','maxheight','resizemode');
            update_option('ncode_secenekler', $secenekler);
            ncode_durum_katman('Options updated', 'guncellendi');
        }

    }
    $ncode_secenekler = get_option('ncode_secenekler');
?>
<div class="wrap">
<div id="icon-options-general" class="icon32"><br /></div>
<h2><?php _e('nCode Settings', 'ncode'); ?></h2>

<form action="" method="post">
<table class="form-table">
<tr valign="top">
<th scope="row"><label for="resizemode"><?php _e('Images in posts', 'ncode'); ?></label></th>
<td>
<select name="resizemode" id="resizemode">
<?php
foreach($array_resizemode as $_value=>$_option) {
    echo "<option value='$_value'". ( ($ncode_secenekler['resizemode']==$_value) ? ' selected="selected"' : ''  ) .">$_option</option>";
}
?>
</select>

<span class="description"><?php _e('This blog automatically resizes images which are too large. Please choose here how you would like to view the enlarged images.', 'ncode'); ?></span></td>
</tr>
<tr valign="top">

<th scope="row"><label for="maxwidth"><?php _e('Maximum width', 'ncode'); ?></label></th>
<td><input name="maxwidth" type="text" id="maxwidth" value="<?php echo $ncode_secenekler['maxwidth']; ?>" class="small-text" />
<span class="description"><?php _e('Images taller than this width will be resized. Enter 0 to allow all widths, or leave the field empty to use the default value.', 'ncode'); ?></span>
</td>
</tr>
<tr valign="top">
<th scope="row"><label for="maxheight"><?php _e('Maximum height', 'ncode'); ?></label></th>
<td><input name="maxheight" type="text" id="maxheight" value="<?php echo $ncode_secenekler['maxheight']; ?>" class="small-text" />
<span class="description"><?php _e('Images taller than this height will be resized. Enter 0 to allow all heights, or leave the field empty to use the default value.', 'ncode'); ?></span></td>
</tr>
</table>
<p class="submit">
<input type="submit" name="submit" class="button-primary" value="<?php _e('Save Changes', 'ncode'); ?>" />
</p>

</form>
</div>
<?php
}

?>

Please help.
Thanks.

Nobody on this forum to help?

This forum disappointing me!

Have you contacted the plugin author and explained your problem?

Yes, but seems he don’t respond!

@focusoft;

>>> What I try to do and I can’t resolve is to have same function when I click directly the image.

Here is a possible solution that expands on hover and when clicked opens the image:

<!-- CSS -->
  .jb img {float:left; border:outset 4px #9f9;  width:400px /*; height:190px;*/}
  .jb img:hover {border: inset 4px #f99; width:600px /*; height:220px; */}

<!-- HTML -->
  <p class='jb'>
       <a href='http://blog.djvideofoto.ro/wp-content/uploads/2012/05/RobertoJewellery1.jpg'>
            <img src="http://blog.djvideofoto.ro/wp-content/uploads/2012/05/RobertoJewellery1.jpg"  title="Roberto Jewellery" alt="#" />
        </a>		
  </p>

I also noticed that quite a few of your images are enormous, require optimising and take a long time to load.
Reducing image dimensions would also reduce the filesize make your page load far quicker.