Snitz Forums 2000
Snitz Forums 2000
Home | Profile | Register | Active Topics | Members | Search | FAQ
Username:
Password:
Save Password
Forgot your Password?

 All Forums
 Snitz Forums 2000 MOD-Group
 MOD Add-On Forum (W/Code)
 New auto-resizing images version (1.2)
 New Topic  Topic Locked
 Printer Friendly
Next Page
Author Previous Topic Topic Next Topic
Page: of 5

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  11:23:24  Show Profile
I have updated work mule's auto-resizing mod and added several of new features and bug fixes.

    New Features
  • Improved installation documentation

  • Simplified the installation process

  • Added ability to resize based on a fixed size or a fraction of the visitors screen size.

  • Simplified the alignment of the "Close Pop-up" text

  • Changed pop-up window positioning and added left and top alignment config

  • Added code so that pop-ups now work with Netscape 6+

  • Added new "forum code" tag that allows users to bypass the auto-resize function (like for signatures).

  • Fixed bug where images fail to resize when the page is refreshed

  • Added configurable option to show original pic in new window (Thanks to DavidRhodes)


Download code w/instructions:
http://www.codezulu.com/downloads/snitz_image_resize_1.2.zip

Pop-Up Within Original Window Demo:
http://www.codezulu.com/forum/topic.asp?TOPIC_ID=1111

Pop-Up In New Window Demo:
http://www.uk-mkivs.net/forum/topic.asp?TOPIC_ID=16672

Previous version:
http://forum.snitz.com/forum/topic.asp?TOPIC_ID=45210

Edited by - Umlungu on 03 October 2003 10:38:53

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  11:50:33  Show Profile
quote:
~ Fixed bug where images fail to resize when the page is
refreshed


Nice one
How have you done the resizing? You've removed the onLoad event and have a js function called walkImages() but I can't see where this function is called from.
Found it, people may have problems with conflicting onLoad events using this.

Just a suggestion, it would be nice if rather than resizing into a layer, there was an option to popup a new window with the image in (maybe a modal-dialog?)

The UK MkIVs Forum

Edited by - DavidRhodes on 26 September 2003 11:52:57
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  11:57:10  Show Profile
quote:
Originally posted by DavidRhodes
Found it, people may have problems with conflicting onLoad events using this.
As far as I know, Snitz doesn't use the document.onload event handler (at least in the topic.asp file). If some other mod does, then perhaps we can address it but the default Snitz install and all the mods I use dont use that event.

The problem with the onload event handler for images is that browsers will cache the image and not "reload" it, thus not firing the event. Event handlers are really funny that way, especially with images. The onclick EH for images doesn't work in NS4 which is why NS4 isn't supported at this time. I could fix it with a known work-around, but I'm lazy and might get to that in a later release.

quote:
Originally posted by DavidRhodes
Just a suggestion, it would be nice if rather than resizing into a layer, there was an option to popup a new window with the image in (maybe a modal-dialog?)

Adding this wouldn't be hard at all, and I'll work it into my next release.

Edited by - Umlungu on 26 September 2003 12:04:49
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  12:19:57  Show Profile
I'll try it on mine, I have a DHTML menu so I think the onLoad events will conflict

The UK MkIVs Forum
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  16:18:34  Show Profile
It works perfectly on my site, cheers
I might change it to modal-dialog over the weekend unless you plan to do it

The UK MkIVs Forum
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  16:32:25  Show Profile
Go for it! I think it would be a nice addition.
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  17:05:50  Show Profile
Umlungu,
Just had a quick go at doing the modal dialog window (code below) can't figure out how to get the original image height and width, if it's possible! The only way I can think of doing it is by creating a new page, passing the image link in the querystring and resizing the page onLoad?

above
var fixedWidth     = 400;  // Resize the image if it is wider than this many 
                           // pixels. Only used when resizeType = 1.

add
var enlargeType = 1 // 0 = Opens in the same window
			// 1 = Opens in a new window


replace enlargeimg function with
function enlargeimg(which,e){
    if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
	if (which.width < fixedWidth) {return false;}
	if (enlargeType == 0) {
		if (ie||ns6){
			crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
			if (crossobj.style.visibility=="hidden"){
				crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
				crossobj.style.top  = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
			    alignRE = /^left$/i
				crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
				crossobj.style.visibility="visible"
			}
			else
				crossobj.style.visibility="hidden"
				return false
		}
		else if (document.layers){
			if (document.showimage.visibility=="hide"){
				document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
				document.showimage.document.close()
				document.showimage.left=e.x
				document.showimage.top=e.y
				document.showimage.visibility="show"
			}
			else
				document.showimage.visibility="hide"
				return false
		}
		else
		return true
	}
	else if (enlargeType == 1) {
		if (document.all&&window.print) //if ie5
			eval('window.showModelessDialog(which.src,"","help:0;resizable:1;dialogWidth:'+which.width+'px;dialogHeight:'+which.height+'px")')
		else
			eval('window.open(which.src,"","width='+which.width+'px,height='+which.height+'px,resizable=1,scrollbars=1")')
	}
}

The UK MkIVs Forum
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  17:27:24  Show Profile
You might try something like this:

function enlargeimg(which,e){
    if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
	if (which.width < fixedWidth) {return false;}
	if (enlargeType == 0) {
		if (ie||ns6){
			crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
			if (crossobj.style.visibility=="hidden"){
				crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
				crossobj.style.top  = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
			    alignRE = /^left$/i
				crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
				crossobj.style.visibility="visible"
			}
			else
				crossobj.style.visibility="hidden"
				return false
		}
		else if (document.layers){
			if (document.showimage.visibility=="hide"){
				document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
				document.showimage.document.close()
				document.showimage.left=e.x
				document.showimage.top=e.y
				document.showimage.visibility="show"
			}
			else
				document.showimage.visibility="hide"
				return false
		}
		else
		return true
	}
	else if (enlargeType == 1) {
		var tmpImg = new Image();
		tmpImg.src = which.src;
		if (document.all&&window.print)
			eval('window.showModelessDialog(which.src,"","help:0;resizable:1;dialogWidth:'+tmpImg.width+'px;dialogHeight:'+tmpImg.height+'px")')
		else
			eval('window.open(which.src,"","width='+tmpImg.width+'px,height='+tmpImg.height+'px,resizable=1,scrollbars=1")')
	}
}

Edited by - Umlungu on 26 September 2003 17:41:47
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  17:47:19  Show Profile
nearly!, only tested in IE, widths and heights may need adjusting for non-IE browsers (demo: http://www.uk-mkivs.net/forum/topic.asp?TOPIC_ID=16672)

function enlargeimg(which,e){
    if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
	if (which.width < fixedWidth) {return false;}
	if (enlargeType == 0) {
		if (ie||ns6){
			crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
			if (crossobj.style.visibility=="hidden"){
				crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
				crossobj.style.top  = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
			    alignRE = /^left$/i
				crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
				crossobj.style.visibility="visible"
			}
			else
				crossobj.style.visibility="hidden"
				return false
		}
		else if (document.layers){
			if (document.showimage.visibility=="hide"){
				document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
				document.showimage.document.close()
				document.showimage.left=e.x
				document.showimage.top=e.y
				document.showimage.visibility="show"
			}
			else
				document.showimage.visibility="hide"
				return false
		}
		else
		return true
	}
	else if (enlargeType == 1) {
		var tmpImg = new Image();
		tmpImg.src = which.src;
		var width = tmpImg.width + 6;
		var height = tmpImg.height + 45;
		if (document.all&&window.print) //if ie5			
			eval('window.showModelessDialog(tmpImg.src,"","help:0;resizable:0;dialogWidth:'+width+'px;dialogHeight:'+height+'px")')
		else{
			eval('window.open(tmpImg.src,"","width='+width+'px,height='+height+'px,resizable=1,scrollbars=1")')
		}
	}
}

The UK MkIVs Forum
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  18:26:12  Show Profile
I have a different solution to the new window option as well. Along the lines of your earlier suggestion, I created a page which will resize the window to the image's HxW. Its kinda cool looking too. Plus this version we dont have to create a temporary image to get the proper HxW.

Its been tested and works well in both IE and Netscape 7

function enlargeimg(which,e){
    if (resizeType == 0) fixedWidth = parseInt(screen.width/dynamicDivisor);
	if (which.width < fixedWidth) {return false;}
	if (enlargeType == 0) {
		if (ie||ns6){
			crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
			if (crossobj.style.visibility=="hidden"){
				crossobj.style.left = (ns6? pageXOffset : document.body.scrollLeft) + leftSpacing
				crossobj.style.top  = (ns6? pageYOffset : document.body.scrollTop) + topSpacing
			    alignRE = /^left$/i
				crossobj.innerHTML= (alignRE.test(alignClose))? '<div class=tvhead align=left id=drag> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> <span class=tvclose onClick=closepreview()>Close</span> </div><img src="'+which.src+'">' : '<div class=tvhead align=right id=drag> <span class=tvclose onClick=closepreview()>Close</span> <span class=tvclosex onClick=closepreview() style=cursor:pointer> X </span> </div><img src="'+which.src+'">';
				crossobj.style.visibility="visible"
			}
			else
				crossobj.style.visibility="hidden"
				return false
		}
		else if (document.layers){
			if (document.showimage.visibility=="hide"){
				document.showimage.document.write('<a href="#" onMouseover="drag_dropns(showimage)"><img src="'+which.src+'" border=0></a>')
				document.showimage.document.close()
				document.showimage.left=e.x
				document.showimage.top=e.y
				document.showimage.visibility="show"
			}
			else
				document.showimage.visibility="hide"
				return false
		}
		else
		return true
	}
	else if (enlargeType == 1) {
			eval('window.open("showpic.asp?pic=' + which.src + '","","width='+which.width+'px,height='+which.height+'px,resizable=1,scrollbars=0")')
	}
}


showpic.asp
<html>
<head>
	<title>Pic: <%= request.querystring("pic") %></title>
	<script language="javascript">
    /*****
    * [resizewin.js] v2.1
    * 2001-08-05
    * Author: Anarchos
    * E-mail: anarchos3@hotmail.com
    * URL: http://anarchos.xs.mw/
    ***/
    
    function resizeWin(maxX,maxY,speed,delay,win){
    	this.obj = "resizeWin" + (resizeWin.count++);
    	eval(this.obj + "=this");
    	if (!win)     this.win = self;    else this.win = eval(win);
    	if (!maxX)    this.maxX = 400;    else this.maxX = maxX;
    	if (!maxY)    this.maxY = 300;    else this.maxY = maxY;
    	if (!speed)   this.speed = 1/2;   else this.speed = 1/speed;
    	if (!delay)   this.delay = 0;    else this.delay = delay;
    	this.doResize = (document.all || document.getElementById);
    	this.stayCentered = false;
    	
    	this.initWin = 	function(){
    		if (this.doResize){
    			this.resizeMe();
    			}
    		else {
    			this.win.resizeTo(this.maxX + 10, this.maxY - 20);
    			}
    		}
    
    	this.resizeMe = function(){
    		this.win.focus();
    		this.updateMe();
    		}
    	
    	this.resizeTo = function(x,y){
    		this.maxX = x;
    		this.maxY = y;
    		this.resizeMe();
    		}
    		
    	this.stayCentered = function(){
    		this.stayCentered = true;
    		}
    
    	this.updateMe = function(){
    		this.resizing = true;
    		var x = Math.ceil((this.maxX - this.getX()) * this.speed);
    		var y = Math.ceil((this.maxY - this.getY()) * this.speed);
    		if (x == 0 && this.getX() != this.maxX) {
    			if (this.getX() > this.maxX) x = -1;
    			else  x = 1;
    			}
    		if (y == 0 && this.getY() != this.maxY){
    			if (this.getY() > this.maxY) y = -1;
    			else y = 1;
    			}
    		if (x == 0 && y == 0) {
    			this.resizing = false;
        		}
    		else {
    			this.win.top.resizeBy(parseInt(x),parseInt(y));
    			if (this.stayCentered == true) this.win.moveTo((screen.width - this.getX()) / 2,(screen.height - this.getY()) / 2);
    			setTimeout(this.obj + '.updateMe()',this.delay)
    			}
    		}
    		
    	this.write =  function(text){
    		if (document.all && this.win.document.all["coords"]) this.win.document.all["coords"].innerHTML = text;
    		else if (document.getElementById && this.win.document.getElementById("coords")) this.win.document.getElementById("coords").innerHTML = text;
    		}
    		
    	this.getX =  function(){
    		if (document.all) return (this.win.top.document.body.clientWidth + 10)
    		else if (document.getElementById)
    			return this.win.top.outerWidth;
    		else return this.win.top.outerWidth - 12;
    	}
    	
    	this.getY = function(){
    		if (document.all) return (this.win.top.document.body.clientHeight + 29)
    		else if (document.getElementById)
    			return this.win.top.outerHeight;
    		else return this.win.top.outerHeight - 31; 
    	}
    	
    	this.onResize =  function(){
    		if (this.doResize){
    			if (!this.resizing) this.resizeMe();
    			}
    		}
    
    	return this;
    }
    resizeWin.count = 0;
	</script> 
</head>
<body bgcolor=#cccccc onLoad="booyah.initWin()" onResize="booyah.onResize()" marginwidth="0" marginheight="0" leftmargin="0" rightmargin="0" topmargin="0" bottommargin="0">
<img name=img src="<%= request.querystring("pic") %>" border=0>
<script>
if (document.images){
    if (document.all&&window.print)
    	booyah = new resizeWin(document["img"].width+12,document["img"].height+31);
    else
    	booyah = new resizeWin(document["img"].width+8,document["img"].height+36);
	booyah.stayCentered();
}
</script> 
</body>
</html>
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  18:36:42  Show Profile
Yep, works well (see same demo link in my above post), kind of like the modal dialog version for IE (less open windows) but I suppose this is best for browser compatibility

The UK MkIVs Forum
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  18:41:03  Show Profile
Sweet! I will add it into the package and reupload as version 1.2.

BTW - Please tell me thats not your VW.

Edited by - Umlungu on 26 September 2003 18:48:49
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  19:02:46  Show Profile
No, not mine, just used that because it was the first on I found with pics.

The UK MkIVs Forum
Go to Top of Page

DavidRhodes
Senior Member

United Kingdom
1222 Posts

Posted - 26 September 2003 :  19:24:07  Show Profile
You may be interested in this for a further enhancement to this mod, basically it uses ASP.NET to generate a thumbnail image then clicking will show the full image, i've been planning on a mod like this [img w:h][/img w:h] to create thumnal images, would be nice to incorporate as one mod

http://www.uk-mkivs.net/forum/uk_gallery.asp?Folder=cgtimm2003
code sourced from: http://www.codeproject.com/aspnet/thumbtools.asp

The UK MkIVs Forum
Go to Top of Page

MadHatter
Starting Member

2 Posts

Posted - 26 September 2003 :  19:33:17  Show Profile
doesn't work with smart explorer (an IE mod browser) because it tries to maximize the window and really freaks out.

--nice job again bro(yea it's me).
Go to Top of Page

Umlungu
Starting Member

11 Posts

Posted - 26 September 2003 :  23:45:52  Show Profile
Thanks for the tip. I will check it out.

Mad, I will also look into Smart Explorer too. Does it freak out with both the new window and the DHTML window?
Go to Top of Page
Page: of 5 Previous Topic Topic Next Topic  
Next Page
 New Topic  Topic Locked
 Printer Friendly
Jump To:
Snitz Forums 2000 © 2000-2021 Snitz™ Communications Go To Top Of Page
This page was generated in 0.22 seconds. Powered By: Snitz Forums 2000 Version 3.4.07