Thumbnail Viewer adjusting

S

Santander

here is simple and compact image viewer script, I'm satisfied with it, but
would like to modify it a little: I want use only one image (use big image
as a thumbnail), resize it dynamically for thumbnail, so this did not
require to upload different sizes for the same image(big and small image).
Hope that experts can not only criticise, but also give worth and useful
advice :)

http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at:
http://www.dynamicdrive.com
// Last updated: July 7th, 2008- Fixed enlarged image not showing in IE
sometimes
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as
description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for
footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML
for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring:
'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity:
0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div
id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that
holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference
"loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")?
document.documentElement : document.body //create reference to common "body"
across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth :
window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var
docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHe
ight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight
//Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)?
scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical
position of div element: Either centered, or if element height larger than
viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element
horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"
},

showthumbBox:function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)
}
},


loadimage:function(link){ //Load image function that gets attached to each
link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on
the page already
this.closeit() //Hide it first (not doing so causes triggers some
positioning bug in Firefox
var imageHTML='<img src="'+link.getAttribute("href")+'"
style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the
link as description?
imageHTML+='<br />'+link.getAttribute("title")
this.centerDiv(this.thumbLoading) //Center and display "loading" div while
we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown
image's HTML (while still hidden)
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference
shown image itself
if (this.featureImage.complete)
thumbnailviewer.showthumbBox()
else{
this.featureImage.onload=function(){ //When target image has completely
loaded
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only.
Address IE image cache not firing onload bug:
panoramio.com/blog/onload-event/
this.featureImage.src=link.getAttribute("href")
this.featureImage.onerror=function(){ //If an error has occurred while
loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div,
game over
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per
the passed in value setting (0 to 1 and in between)
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla
syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity
syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"
},

cleanup:function(){ //Clean up routine on page unload
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks.onclick=null
this.thumbBox=null
},

dotask:function(target, functionref, tasktype){ //assign a function to
execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
if (target.addEventListener)
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and
attaching appropriate function to links with rel="thumbnail"
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP
if (pagelinks.getAttribute("rel") &&
pagelinks.getAttribute("rel")=="thumbnail"){ //Begin if statement
pagelinks.onclick=function(){
thumbnailviewer.stopanimation() //Stop any currently running fade animation
on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks //store reference to
target link
} //end if statement
} //END FOR LOOP
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if
(thumbnailviewer.thumbBox.style.visibility=="visible")
thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail
viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load")
//Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()},
"unload")
 
D

David Mark

Santander said:
here is simple and compact image viewer script, I'm satisfied with it, but
would like to modify it a little: I want use only one image (use big image
as a thumbnail), resize it dynamically for thumbnail, so this did not
require to upload different sizes for the same image(big and small image).
Hope that experts can not only criticise, but also give worth and useful
advice :)

Best advice is to forget it. You can't write or judge scripts, so
this is an exercise in futility.

*Never* use scripts from that site.
// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at:
http://www.dynamicdrive.com
// Last updated: July 7th, 2008- Fixed enlarged image not showing in IE
sometimes

Yeah, right.
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as
description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for
footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML
for "loading" div
XHTML?


/////////////No need to edit beyond here/////////////////////////

Oh shut up.
scrollbarwidth: 16,

So this lunatic has decided that all scrollbars are 16 pixels high and
wide.
opacitystring:
'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity:
0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div
id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that
holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference
"loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")?
Short-sighted.

document.documentElement : document.body //create reference to common "body"
across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page

This should be good for a laugh.
var ie=document.all && !window.opera

Sure, anything that features document.all and lacks a global opera
property (or variable) is IE.
var dom=document.getElementById

So "dom" is either a reference to gEBI or undefined.
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset

Why do obviously incapable people insist on writing browser scripts
(and uploading them to Dynamic Drive?)
var docwidth=(ie)? this.standardbody.clientWidth :
window.innerWidth-this.scrollbarwidth

See above.

[repetitive nonsense snipped]
showthumbBox:function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)

Implied global. Eval is evil.
}
},


loadimage:function(link){ //Load image function that gets attached to each
link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on
the page already
this.closeit() //Hide it first (not doing so causes triggers some
positioning bug in Firefox

Yes, I'm sure that the "positioning bug" is FF's fault.
var imageHTML='<img src="'+link.getAttribute("href")+'"

Using getAttribute to retrieve paths is a common red flag (and an
indication that the script can be dismissed out of hand.) You
virtually never need to use get/setAttribute in an HTML DOM.
style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the
link as description?

Must have heard from some other neophyte that getAttribute is more
"standard" than properties.
imageHTML+='<br />'+link.getAttribute("title")
Again.

this.centerDiv(this.thumbLoading) //Center and display "loading" div while
we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown
image's HTML (while still hidden)

The innerHTML property is best avoided. Certainly it is unneeded
here.
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference
shown image itself
if (this.featureImage.complete)
thumbnailviewer.showthumbBox()
else{
this.featureImage.onload=function(){ //When target image has completely
loaded
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only.

LOL. What about Opera?
Address IE image cache not firing onload bug:
panoramio.com/blog/onload-event/

That can hardly be considered a bug.
this.featureImage.src=link.getAttribute("href")

See above.
this.featureImage.onerror=function(){ //If an error has occurred while
loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div,
game over

What are we gonna do now, man?!
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per
the passed in value setting (0 to 1 and in between)

I bet it does.
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax

Don't test host object properties by type conversion (they are known
to explode.)
if (typeof targetobject.filters[0].opacity=="number") //IE6
IE6?!

targetobject.filters[0].opacity=value*100
else //IE 5.5

What of IE7?
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla
syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity
syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation

That is going to be one ugly fade animation.
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1

Animations are supposed to be based on time (not steps.)
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
Unnecessary.

clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"

Apparently never heard of the display style. And why not -200000000?
},

cleanup:function(){ //Clean up routine on page unload

Why? Did they make a mess?
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks.onclick=null
this.thumbBox=null


None of this is needed unless the script introduces memory leaks.
Using the unload event to "clean up" self-induced problems is
ridiculous and breaks fast history navigation.
},

dotask:function(target, functionref, tasktype){ //assign a function to
execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype

Poor inference. What does the window object have to do with what
follows?
if (target.addEventListener)

Use typeof to test host object properties. See above.
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
Again.

target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and
attaching appropriate function to links with rel="thumbnail"

Pitifully inefficient. Use delegation.
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP

Inefficient condition.
if (pagelinks.getAttribute("rel") &&


Again with getAttribute. Look ma, I'm future-proof!
pagelinks.getAttribute("rel")=="thumbnail"){ //Begin if statement
Again.

pagelinks.onclick=function(){


Here comes the leak.
thumbnailviewer.stopanimation() //Stop any currently running fade animation
on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks //store reference to
target link
} //end if statement
} //END FOR LOOP


pagelinks = null; // Break circular reference(s)

Assuming this is the only leak, the unload listener can be jettisoned
and navigation will proceed normally.
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if
(thumbnailviewer.thumbBox.style.visibility=="visible")
thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail
viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load")
//Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()},
"unload")

Throw it back.
 
S

Santander

just curious, have you ever created any useful javascripts, Community
Recognized and used by millions users, from large companies to home users?
Dynamicdrive.com scripts used by large companies for years (Amazon, eBay,
CNN, etc, etc..), and for millions and millions of home users.

---------


David Mark said:
here is simple and compact image viewer script, I'm satisfied with it, but
would like to modify it a little: I want use only one image (use big image
as a thumbnail), resize it dynamically for thumbnail, so this did not
require to upload different sizes for the same image(big and small image).
Hope that experts can not only criticise, but also give worth and useful
advice :)

Best advice is to forget it. You can't write or judge scripts, so
this is an exercise in futility.

*Never* use scripts from that site.
// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at:
http://www.dynamicdrive.com
// Last updated: July 7th, 2008- Fixed enlarged image not showing in IE
sometimes

Yeah, right.
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as
description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for
footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML
for "loading" div
XHTML?


/////////////No need to edit beyond here/////////////////////////

Oh shut up.
scrollbarwidth: 16,

So this lunatic has decided that all scrollbars are 16 pixels high and
wide.
opacitystring:
'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity:
0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div
id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that
holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference
"loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")?
Short-sighted.

document.documentElement : document.body //create reference to common "body"
across doctypes
},


centerDiv:function(divobj){ //Centers a div element on the page

This should be good for a laugh.
var ie=document.all && !window.opera

Sure, anything that features document.all and lacks a global opera
property (or variable) is IE.
var dom=document.getElementById

So "dom" is either a reference to gEBI or undefined.
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset

Why do obviously incapable people insist on writing browser scripts
(and uploading them to Dynamic Drive?)
var docwidth=(ie)? this.standardbody.clientWidth :
window.innerWidth-this.scrollbarwidth

See above.

[repetitive nonsense snipped]
showthumbBox:function(){ //Show ThumbBox div
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div
this.centerDiv(this.thumbBox)
if (this.enableAnimation){ //If fading animation enabled
this.currentopacity=0.1 //Starting opacity value
this.opacitytimer=setInterval("thumbnailviewer.opacityanimation()", 20)

Implied global. Eval is evil.
}
},


loadimage:function(link){ //Load image function that gets attached to each
link on the page with rel="thumbnail"
if (this.thumbBox.style.visibility=="visible") //if thumbox is visible on
the page already
this.closeit() //Hide it first (not doing so causes triggers some
positioning bug in Firefox

Yes, I'm sure that the "positioning bug" is FF's fault.
var imageHTML='<img src="'+link.getAttribute("href")+'"

Using getAttribute to retrieve paths is a common red flag (and an
indication that the script can be dismissed out of hand.) You
virtually never need to use get/setAttribute in an HTML DOM.
style="'+this.opacitystring+'" />' //Construct HTML for shown image
if (this.enableTitle && link.getAttribute("title")) //Use title attr of the
link as description?

Must have heard from some other neophyte that getAttribute is more
"standard" than properties.
imageHTML+='<br />'+link.getAttribute("title")
Again.

this.centerDiv(this.thumbLoading) //Center and display "loading" div while
we set up the image to be shown
this.thumbImage.innerHTML=imageHTML //Populate thumbImage div with shown
image's HTML (while still hidden)

The innerHTML property is best avoided. Certainly it is unneeded
here.
this.featureImage=this.thumbImage.getElementsByTagName("img")[0] //Reference
shown image itself
if (this.featureImage.complete)
thumbnailviewer.showthumbBox()
else{
this.featureImage.onload=function(){ //When target image has completely
loaded
thumbnailviewer.showthumbBox() //Display "thumbbox" div to the world!
}
}
if (document.all && !window.createPopup) //Target IE5.0 browsers only.

LOL. What about Opera?
Address IE image cache not firing onload bug:
panoramio.com/blog/onload-event/

That can hardly be considered a bug.
this.featureImage.src=link.getAttribute("href")

See above.
this.featureImage.onerror=function(){ //If an error has occurred while
loading the image to show
thumbnailviewer.thumbLoading.style.visibility="hidden" //Hide "loading" div,
game over

What are we gonna do now, man?!
}
},

setimgopacity:function(value){ //Sets the opacity of "thumbimage" div per
the passed in value setting (0 to 1 and in between)

I bet it does.
var targetobject=this.featureImage
if (targetobject.filters && targetobject.filters[0]){ //IE syntax

Don't test host object properties by type conversion (they are known
to explode.)
if (typeof targetobject.filters[0].opacity=="number") //IE6
IE6?!

targetobject.filters[0].opacity=value*100
else //IE 5.5

What of IE7?
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla
syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity
syntax
targetobject.style.opacity=value
else //Non of the above, stop opacity animation

That is going to be one ugly fade animation.
this.stopanimation()
},

opacityanimation:function(){ //Gradually increase opacity function
this.setimgopacity(this.currentopacity)
this.currentopacity+=0.1

Animations are supposed to be based on time (not steps.)
if (this.currentopacity>1)
this.stopanimation()
},

stopanimation:function(){
if (typeof this.opacitytimer!="undefined")
Unnecessary.

clearInterval(this.opacitytimer)
},


closeit:function(){ //Close "thumbbox" div function
this.stopanimation()
this.thumbBox.style.visibility="hidden"
this.thumbImage.innerHTML=""
this.thumbBox.style.left="-2000px"
this.thumbBox.style.top="-2000px"

Apparently never heard of the display style. And why not -200000000?
},

cleanup:function(){ //Clean up routine on page unload

Why? Did they make a mess?
this.thumbLoading=null
if (this.featureImage) this.featureImage.onload=null
this.featureImage=null
this.thumbImage=null
for (var i=0; i<this.targetlinks.length; i++)
this.targetlinks.onclick=null
this.thumbBox=null


None of this is needed unless the script introduces memory leaks.
Using the unload event to "clean up" self-induced problems is
ridiculous and breaks fast history navigation.
},

dotask:function(target, functionref, tasktype){ //assign a function to
execute to an event handler (ie: onunload)
var tasktype=(window.addEventListener)? tasktype : "on"+tasktype

Poor inference. What does the window object have to do with what
follows?
if (target.addEventListener)

Use typeof to test host object properties. See above.
target.addEventListener(tasktype, functionref, false)
else if (target.attachEvent)
Again.

target.attachEvent(tasktype, functionref)
},

init:function(){ //Initialize thumbnail viewer script by scanning page and
attaching appropriate function to links with rel="thumbnail"

Pitifully inefficient. Use delegation.
if (!this.enableAnimation)
this.opacitystring=""
var pagelinks=document.getElementsByTagName("a")
for (var i=0; i<pagelinks.length; i++){ //BEGIN FOR LOOP

Inefficient condition.
if (pagelinks.getAttribute("rel") &&


Again with getAttribute. Look ma, I'm future-proof!
pagelinks.getAttribute("rel")=="thumbnail"){ //Begin if statement
Again.

pagelinks.onclick=function(){


Here comes the leak.
thumbnailviewer.stopanimation() //Stop any currently running fade animation
on "thumbbox" div before proceeding
thumbnailviewer.loadimage(this) //Load image
return false
}
this.targetlinks[this.targetlinks.length]=pagelinks //store reference to
target link
} //end if statement
} //END FOR LOOP


pagelinks = null; // Break circular reference(s)

Assuming this is the only leak, the unload listener can be jettisoned
and navigation will proceed normally.
//Reposition "thumbbox" div when page is resized
this.dotask(window, function(){if
(thumbnailviewer.thumbBox.style.visibility=="visible")
thumbnailviewer.centerDiv(thumbnailviewer.thumbBox)}, "resize")


} //END init() function

}

thumbnailviewer.createthumbBox() //Output HTML for the image thumbnail
viewer
thumbnailviewer.dotask(window, function(){thumbnailviewer.init()}, "load")
//Initialize script on page load
thumbnailviewer.dotask(window, function(){thumbnailviewer.cleanup()},
"unload")

Throw it back.
 
D

David Mark

just curious, have you ever created any useful javascripts, Community

Just curious, have you ever replied to a post properly? And yes, I
have created some useful "javascripts."
Recognized and used by millions users, from large companies to home users?

Yes, but what does that have to do with your predicament?
Dynamicdrive.com scripts used by large companies for years (Amazon, eBay,
CNN, etc, etc..), and for millions and millions of home users.

Amazon is a horrible site and what can you say about eBay? Perhaps
you should poll their users. And if CNN uses Dynamic Drive scripts,
then they have problems too. So what? If all of your friends jumped
off a bridge, would you follow suit?

[snip]
 
G

Gregor Kofler

Santander meinte:
here is simple and compact image viewer script, I'm satisfied with it

Coo! Another super-crap script.

var ie = document.all && !window.opera
if(ie) ...

'nuff said.

Perhaps you could discuss your issues with "Kenny". Preferably on some
Google group.

Gregor
 
D

David Mark

Santander meinte:


Coo! Another super-crap script.

var ie = document.all && !window.opera
if(ie) ...

'nuff said.

Perhaps you could discuss your issues with "Kenny". Preferably on some
Google group.

Maybe create a newsgroup like
alt.programmer.wannabe.really.really.really.i.do.
 
G

Gregor Kofler

Santander meinte:
just curious, have you ever created any useful javascripts, Community
Recognized and used by millions users, from large companies to home users?
Dynamicdrive.com scripts used by large companies for years (Amazon, eBay,
CNN, etc, etc..), and for millions and millions of home users.

And? IE(6) is the most popular browser - must be terrific.

Yes, David has his library online and you can download it, does no
"image zoom" out of the box, though. However, why would you like to know
what he has delivered so far - you can't judge code quality. Period.

And as far as "big companies" go - why should they be more aware of JS
code quality? I was just involved with a "big company solution",
facilitating Spry, prototype.js, IIRC jQuery and perhaps a few more
oh-so-super libraries. Unfortunately the application is bleeding memory
on IE without end (if the browser stays open, IE is in the gigabytes
after a couple of hours and closing the browser is not acceptable for
the client). Even if it ain't the libraries fault (though I doubt that)
- you still must know JS to avoid those pitfalls. The "problem": Once
you *know* JS there's no reason for using those libraries.

[Topposted FQ snipped]

Gregor
 
G

Gregor Kofler

David Mark meinte:
Maybe create a newsgroup like
alt.programmer.wannabe.really.really.really.i.do.

Nah, must have "qooxdoo"(?) somewhere in it. And "super".
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,013
Latest member
KatriceSwa

Latest Threads

Top