27 2543
For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.
For whatever reason, you are serving that page as text/plain rather than text/html. This is a server problem, not a Firefox one.
did I write the page incorrectly? I dont quite understand, it displays perfectly in IE
It doesn't matter how you wrote the page or that it works in IE. Your server is serving it as text/plain, at least to Firefox browsers it is. Some servers can be set up to serve different browsers differently. Most likely there is a setting somewhere causing this, unless your pages are dynamically created and you are doing this yourself.
No these particular pages were not created dynamically. It gets stranger, A freind looked at them on his desktop pc with moz FF and they rendered as intended, but as text/plain on his laptop.
Well, that doesn't make much sense. I don't recall if it's possible or easy to change what Firefox identifies itself as to the server. Opera, for example, can id itself as Opera or IE or other browsers. In any case, only the server determines how the page is served.
I am using the following script to auto-resize and make clickable thumbnails
of large Images. Im using a custom window to display the enlarged images by using A place_holder image which is switched to the images src.
This works perfectly In IE but I have just discovered, It refuses To work in Firefox. I have absolutely no idea why, but im thinking firefox dosent like something about the code? No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.
I used this page as the display page http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!
can somebody who knows how to code well get this working in firefox aswell? -
<body onload=function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value; >
-
-
<script>
-
function ResizeThem() {
-
maxheight=250;
-
maxwidth= 250;
-
imgs=document.getElementsByTagName("img");
-
for (p=0; p<imgs.length; p++) {
-
if (imgs[p].getAttribute("alt")=="user posted image") {
-
w=parseInt(imgs[p].width);
-
h=parseInt(imgs[p].height);
-
if (parseInt(imgs[p].width)>maxwidth) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
-
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
-
imgs[p].width=maxwidth;
-
}
-
if (parseInt(imgs[p].height)>maxheight) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
-
imgs[p].height=maxheight;
-
}
-
}
-
}
-
}
-
ResizeThem();
-
</script>
-
-
-
<input type="hidden" id="imgurl">
Display page src -
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
-
<html>
-
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
-
<meta name="description" content="Image Viewer">
-
<meta name="keywords"
-
content="Reptiles">
-
<meta name="GENERATOR" content="Microsoft FrontPage 3.0">
-
-
<title> Image Viewer</title>
-
<STYLE>
-
-
-
body {background-image:url(http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg);
-
-
scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ; scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF; scrollbar-shadow-color:white;}
-
-
</STYLE>
-
</head>
-
-
<body oncontextmenu="return false">
-
<script language="JavaScript1.2">window.onload = function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value;}
-
</script>
-
<center><img src="http://i14.photobucket.com/albums/a345/Instar/please_do_not_hotlink.gif" id="place_holder"></center>
-
-
-
-
</body>
-
</html>
-
-
It refuses To work in Firefox.
Meaning what exactly? What does or does not happen? Is there an error? What debugging have you done? Have you stepped though it with Firebug?
No matter What doctype I use, The display page gets rendered as text/plain instead of text/html.
Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.
I used this page as the display page http://h1.ripway.com/Inny/newviewx.html and it rendered correctly but the enlarged image did not appear in it!!
I see the same picture of a snake in IE6.0 and FF 2.0
It looks like one of the problems is this line. I am not sure what is being tried here, but this is not legal according to any of the DOM references I could find. -
window.opener.document.getElementById("imgurl").value;
-
I am assuming that all you should need is this. -
document.getElementById("imgurl").value;
-
Exactly as I said, In firefox Its rendering as plain text, I think its a server Issue,
since external pages dont do it, however I cannot swap the image with the place holder accross domains.
Id like to try a new Approach, If you could assist, Im sure This is much more Doable. Instead Of opening the enlarged image in a new Page, I want to alter the code to expand the Image in the same page instead.
see example here http://www.webreference.com/programming/javascript/gr/column8/ImageView.htm
The js Of the example -
function ImageExpander(oThumb, sImgSrc)
-
{
-
// store thumbnail image and overwrite its onclick handler.
-
this.oThumb = oThumb;
-
this.oThumb.expander = this;
-
this.oThumb.onclick = function() { this.expander.expand(); }
-
-
// record original size
-
this.smallWidth = oThumb.offsetWidth;
-
this.smallHeight = oThumb.offsetHeight;
-
-
this.bExpand = true;
-
this.bTicks = false;
-
-
// self organized list
-
if ( !window.aImageExpanders )
-
{
-
window.aImageExpanders = new Array();
-
}
-
window.aImageExpanders.push(this);
-
-
// create the full sized image.
-
this.oImg = new Image();
-
this.oImg.expander = this;
-
this.oImg.onload = function(){this.expander.onload();}
-
this.oImg.src = sImgSrc;
-
}
-
-
ImageExpander.prototype.onload = function()
-
{
-
this.oDiv = document.createElement("div");
-
document.body.appendChild(this.oDiv);
-
this.oDiv.appendChild(this.oImg);
-
this.oDiv.style.position = "absolute";
-
this.oDiv.expander = this;
-
this.oDiv.onclick = function() {this.expander.toggle();};
-
this.oImg.title = "Click to reduce.";
-
this.bigWidth = this.oImg.width;
-
this.bigHeight = this.oImg.height;
-
-
if ( this.bExpand )
-
{
-
this.expand();
-
}
-
else
-
{
-
this.oDiv.style.visibility = "hidden";
-
this.oImg.style.visibility = "hidden";
-
}
-
}
-
ImageExpander.prototype.toggle = function()
-
{
-
this.bExpand = !this.bExpand;
-
if ( this.bExpand )
-
{
-
for ( var i in window.aImageExpanders )
-
if ( window.aImageExpanders[i] !== this )
-
window.aImageExpanders[i].reduce();
-
}
-
}
-
ImageExpander.prototype.expand = function()
-
{
-
// set direction of expansion.
-
this.bExpand = true;
-
-
// set all other images to reduce
-
for ( var i in window.aImageExpanders )
-
if ( window.aImageExpanders[i] !== this )
-
window.aImageExpanders[i].reduce();
-
-
// if not loaded, don't continue just yet
-
if ( !this.oDiv ) return;
-
-
// hide the thumbnail
-
this.oThumb.style.visibility = "hidden";
-
-
// calculate initial dimensions
-
this.x = this.oThumb.offsetLeft;
-
this.y = this.oThumb.offsetTop;
-
this.w = this.oThumb.clientWidth;
-
this.h = this.oThumb.clientHeight;
-
-
this.oDiv.style.left = this.x + "px";
-
this.oDiv.style.top = this.y + "px";
-
this.oImg.style.width = this.w + "px";
-
this.oImg.style.height = this.h + "px";
-
this.oDiv.style.visibility = "visible";
-
this.oImg.style.visibility = "visible";
-
-
// start the animation engine.
-
if ( !this.bTicks )
-
{
-
this.bTicks = true;
-
var pThis = this;
-
window.setTimeout(function(){pThis.tick();},25);
-
}
-
}
-
ImageExpander.prototype.reduce = function()
-
{
-
// set direction of expansion.
-
this.bExpand = false;
-
}
-
ImageExpander.prototype.tick = function()
-
{
-
// calculate screen dimensions
-
var cw = document.body.clientWidth;
-
var ch = document.body.clientHeight;
-
var cx = document.body.scrollLeft + cw / 2;
-
var cy = document.body.scrollTop + ch / 2;
-
-
// calculate target
-
var tw,th,tx,ty;
-
if ( this.bExpand )
-
{
-
tw = this.bigWidth;
-
th = this.bigHeight;
-
if ( tw > cw )
-
{
-
th *= cw / tw;
-
tw = cw;
-
}
-
if ( th > ch )
-
{
-
tw *= ch / th;
-
th = ch;
-
}
-
tx = cx - tw / 2;
-
ty = cy - th / 2;
-
}
-
else
-
{
-
tw = this.smallWidth;
-
th = this.smallHeight;
-
tx = this.oThumb.offsetLeft;
-
ty = this.oThumb.offsetTop;
-
}
-
// move 5% closer to target
-
var nHit = 0;
-
var fMove = function(n,tn)
-
{
-
var dn = tn - n;
-
if ( Math.abs(dn) < 3 )
-
{
-
nHit++;
-
return tn;
-
}
-
else
-
{
-
return n + dn / 10;
-
}
-
}
-
this.x = fMove(this.x, tx);
-
this.y = fMove(this.y, ty);
-
this.w = fMove(this.w, tw);
-
this.h = fMove(this.h, th);
-
-
this.oDiv.style.left = this.x + "px";
-
this.oDiv.style.top = this.y + "px";
-
this.oImg.style.width = this.w + "px";
-
this.oImg.style.height = this.h + "px";
-
-
// if reducing and size/position is a match, stop the tick
-
if ( !this.bExpand && (nHit == 4) )
-
{
-
this.oImg.style.visibility = "hidden";
-
this.oDiv.style.visibility = "hidden";
-
this.oThumb.style.visibility = "visible";
-
-
this.bTicks = false;
-
}
-
-
if ( this.bTicks )
-
{
-
var pThis = this;
-
window.setTimeout(function(){pThis.tick();},25);
-
}
-
}
-
And You would write your thumbnail like so -
<a href="spike.jpg" onclick="this.href = 'javascript:void(0);';">
-
<img src="spike_thumb.jpg" title="click to expand." style="float:right;" onclick="new ImageExpander(this, 'spike.jpg');">
-
</a>
Can I alter The code Below to expand in this way onclick after it resizes the images? -
<script type='text/javascript'>
-
<!--
-
function ResizeThem(){
-
maxheight=250;
-
maxwidth= 250;
-
imgs=document.getElementsByTagName("img");
-
for (p=0; p<imgs.length; p++) {
-
if (imgs[p].getAttribute("alt")=="user posted image") {
-
w=parseInt(imgs[p].width);
-
h=parseInt(imgs[p].height);
-
if (parseInt(imgs[p].width)>maxwidth) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
-
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
-
imgs[p].width=maxwidth;}
-
if (parseInt(imgs[p].height)>maxheight) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].onclick=new
-
Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
-
imgs[p].height=maxheight;}}}}
-
ResizeThem()
-
//-->
-
</script>
-
-
I have tried for several hours but just cannot get it to work, I know I have to replace this line both times in the script but I dont know how to write it correctly. - imgs[p].onclick=new
-
Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
Here is the corrected HTML from the first post.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="description" content="Image Viewer">
<meta name="keywords"
content="Reptiles">
<title> Image Viewer</title>
<style type="text/css">
body {background-image:url(http://i14.photobucket.com/albums/a345/Instar/greenbgfade17oi.jpg);
scrollbar-3d-light-color:#FFFFFF;scrollbar-arrow-color:#00CC33; scrollbar-base-color:#99FF66 ;
scrollbar-dark-shadow-color:#009900 ; scrollbar-face-color:66CC00 ; scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:white;}
</style>
</head>
<body oncontextmenu="return false">
<script type="text/javascript">window.onload = function(){document.getElementById("place_holder") .src = window.opener.document.getElementById("imgurl").va lue;}
</script>
<center><img src="http://i14.photobucket.com/albums/a345/Instar/please_do_not_hotlink.gif" id="place_holder"></center>
</body>
</html>[/html]
"oncontextmenu" is a HTML5 event and I don't know who supports that yet, if anyone, since HTML5 is still in draft stage.
All that scrollbar styling only works in IE and is non-standard.
Your doctype is incorrect.
There is no such thing as "language=
You should replace <center> with CSS styling.
Exactly as I said, In firefox Its rendering as plain text
That does not answer the question. What SPECIFICALLY is happening or not happening? You did not answer any of the questions I asked. Please answer these questions. Again meaning what? Are you seeing text in the page, instead of the HTML content? If so that would explain why your JavaScript is not running. When I checked the sample like the page with Firefox 2.0.0.13 it is rendering as text/html for me.
Id like to try a new Approach, If you could assist
How can I assist you when you continue to refuse to state the problem, and will not answer any of the questions asked?
I want to alter the code to expand the Image in the same page instead.
One thing to consider here would be depending on the size of the image this could make it very grainy looking.
I have tried for several hours but just cannot get it to work,
Meaning what? Just saying it does not work does not tell us anything. What is or is not happening? Are there errors happening, if so what do they say?
Sorry We seem to have a miscommunication issue.
Yes Im seeing plain text under firefox, just the page source, of the display page. Does that make it clearer? I beleive this is an issue with how my server
is configured for displaying attached files (html) in various browsers.
I think this because the display page renders as it should (text/html) under firefox, if I host it on an external server, however the code will not function because I get access denied error accross domains. (the code loads the src image to a placeholder and replaces the placeholder with the src img in the display page, but not firefox) The display page must be on the same domain. I have abandoned the original idea because I do not have access to my server.
see here with firefox (i see the page src) http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?
About the second Idea, (expanding in the page) they will not be grainy, because they are only expanding to full size, not larger than the image actually is. Only reduced images will be effected, e.g a small 100x100px will not expand to 400x400, it wont be effected at all.
The second Idea Will Avoid the problem explained above, I just dont know how to assign the 'Expander' attribute to the reduced image instead of opening it in a new page.
fwiw, your server is misconfigured and serving the page as text/plain.
see here with firefox (i see the page src) http://inny.ipbfree.com/index.php?ac...e=post&id=1815
Do you understand now?
Yes. As already stated the server is setting the MIME type of that page to "text/plain". The server needs to be corrected to that pages are being servered as text/html. This needs to be done before any other issues can be fixed, since none of your JavaScript will be run if the page is being rendered as plain text.
I just dont know how to assign the 'Expander' attribute
The first problem here would be that there is not an "Expander" attribute in mozilla's DOM reference. So you can create that attribute, but it will not do anything. If you want to adjust the images dimensions, it is is just a matter of changing the width and height attributes of the image element.
reduced image instead of opening it in a new page
You have not made the syntax correction I suggested above. As long as you are still calling window.opener it is going to open a new window in IE only. Pop-up blocking will stop this call in Firefox.
Ok, now were up to date. Lets forget the expander code ok.
back to original issue.
I dont have access to my server, hence im going to use a page on another domain instead. How can I parse the img url as the query string to the new page
so I can do that.
I dont know how to configure the new page, or reconfigure the code on my server.
Incidently the new page DID popup just fine in firefox, but as I said, due my server config it rendered as text/plain.
I am going to say it's a PHP not being configured/setup correctly on the server.
It's not sending the content correctly, have a look at the byte stream: -
HTTP/1.1 200 OK
-
Date: Mon, 21 Apr 2008 17:50:32 GMT
-
Server: Apache/2.0.52 (CentOS)
-
Set-Cookie: ForumSetCookie=herproom; expires=Tue, 21-Apr-2009 17:50:32 GMT
-
Content-Disposition: inline; filename="bestyet.html"
-
Content-Length: 25899
-
Connection: close
-
Content-Type: text/plain; charset=UTF-8
-
The content type is tagged as text/plain, and for some reason it tries to use a Content-Disposition, which is used to trigger the "would you like to download or open this file" type boxes for the browser.
The byte stream is also the same regardless of me using FF or IE.
Yes exactly, Thanks. I dont have access to my server to reconfigure it though, so I want to send the enlarged image to a page on another server. Thats what I need help with. document.opener wont work accross domains.
Bump! does anyone know how to do this?
You want to force a new window to open and go to a certain webpage on a different server? Seems like a popup blocker would reject that, but you could try.
I want to send the url of a enlarged image to a new window on another server and display it there.
You want to force a new window to open and go to a certain webpage on a different server? Seems like a popup blocker would reject that, but you could try.
So open a new window and give the url for the remote server in it?
I want to rewrite the code to display an enlarged image (from clickable thumbnail on my site) in a window on another site! (the url in the code below will be to a page on another site, different domain/server. - <body onload=function(){document.getElementById("place_holder").src = window.opener.document.getElementById("imgurl").value; >
-
-
<script>
-
function ResizeThem() {
-
maxheight=250;
-
maxwidth= 250;
-
imgs=document.getElementsByTagName("img");
-
for (p=0; p<imgs.length; p++) {
-
if (imgs[p].getAttribute("alt")=="user posted image") {
-
w=parseInt(imgs[p].width);
-
h=parseInt(imgs[p].height);
-
if (parseInt(imgs[p].width)>maxwidth) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].setAttribute('alt','Reduced Image - Click to see full size');
-
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1') ;iw.focus()");
-
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
-
imgs[p].width=maxwidth;
-
}
-
if (parseInt(imgs[p].height)>maxheight) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].onclick=new Function("document.getElementById('imgurl').value = this.src; iw=window.open('http://inny.ipbfree.com/index.php?act=Attach&type=post&id=1342','ImageViewer','resizable=1,scrollbars=1') ;iw.focus()");
-
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
-
imgs[p].height=maxheight;
-
}
-
}
-
}
-
}
-
ResizeThem();
-
</script>
-
-
-
<input type="hidden" id="imgurl">
-
can I re-do the above code to open the enlarged image in a floating layer div instead?
I want to rewrite the code to display an enlarged image (from clickable thumbnail on my site) in a window on another site! (the url in the code below will be to a page on another site, different domain/server.
As Plater, just change the URL to the new domain, but you won't be able to access elements on the page, or use window.opener to refer back to the parent window.
can I re-do the above code to open the enlarged image in a floating layer div instead?
Yes, you can. Look for "lightbox" or one of its clones.
Yes but I dont want to have to set a specific attribute for each image manually,
I want my code to reduce the dimensions, and then instead of opening in a new window, it could assign the newly reduced image whatever attribute triggers the lightbox function, but i dont know to rewrite the code to do that. I need a functional example please.
For instance: I could Use This js.. -
/*
-
See http://www.howtocreate.co.uk/perfectPopups.html and http://www.howtocreate.co.uk/jslibs/termsOfUse.html
-
for details and terms of use.
-
To call this script, use something like (the number is a delay before it closes or 0 for no timed closing -
-
the true/false says if the window should close when they switch to another window):
-
<script type="text/javascript"><!--
-
//you can style this, but don't try to text-align it to the right, it will break the resizing effect
-
//keep it narrow, if it is wider than the image, the window will wrap to this width
-
//the makeright class tells the script to automatically align it to the right
-
var extraHTML = '<br><a href="javascript:window.close()" style="text-decoration:none;color:#777;background-color:#bbb;font-weight:bold;border-left:2px solid #000;" class="makeright">Close<\/a>';
-
//--></script>
-
<a href="me.jpg" onclick="return popImageExtra(this.href,'Site author',true,3000,extraHTML);">link</a>
-
*/
-
-
//really not important (the first two should be small for Opera's sake)
-
PositionX = 10;
-
PositionY = 10;
-
defaultWidth = 600;
-
defaultHeight = 400;
-
-
//don't touch (except to modify the window contents)
-
function popImageExtra(imageURL,imageTitle,AutoClose,oTimeClose,extraHTML){
-
var imgWin = window.open('','_blank','scrollbars=yes,resizable=1,width='+defaultWidth+',height='+defaultHeight+',left='+PositionX+',top='+PositionY);
-
if( !imgWin ) { return true; } //popup blockers should not cause errors
-
imgWin.document.write('<html><head><title>'+imageTitle+'<\/title><script type="text\/javascript">\n'+
-
'function getRefToDivMod( divID, oDoc ) {\n'+
-
'if( !oDoc ) { oDoc = document; }\n'+
-
'if( document.layers ) {\n'+
-
'if( oDoc.layers[divID] ) { return oDoc.layers[divID]; } else {\n'+
-
'for( var x = 0, y; !y && x < oDoc.layers.length; x++ ) {\n'+
-
'y = getRefToDivNest(divID,oDoc.layers[x].document); }\n'+
-
'return y; } }\n'+
-
'if( document.getElementById ) { return oDoc.getElementById(divID); }\n'+
-
'if( document.all ) { return oDoc.all[divID]; }\n'+
-
'return document[divID];\n'+
-
'}\n'+
-
'function resizeWinTo() {\n'+
-
'if( !document.images.length ) { document.images[0] = document.layers[0].images[0]; }'+
-
'if( !document.images[0].height || window.doneAlready ) { return; }\n'+ //in case images are disabled
-
'var oH = getRefToDivMod( \'myID\' ); if( !oH ) { return false; }\n'+
-
'var oW = oH.clip ? oH.clip.width : oH.offsetWidth;\n'+
-
'var oH = oH.clip ? oH.clip.height : oH.offsetHeight; if( !oH ) { return false; }\n'+
-
'if( !oH || window.doneAlready ) { return; }\n'+ //in case images are disabled
-
'window.doneAlready = true;\n'+ //for Safari and Opera
-
-
'var mH = screen.availHeight-200, mW = screen.availWidth-200;\n'+
-
'if( oH > mH || oW > mW ) {\n'+
-
-
'document.images[0].fullH = oH;\n'+
-
'document.images[0].fullW = oW;\n'+
-
-
'var hDif = oH - document.images[0].height;\n'+
-
'var wDif = oW - document.images[0].width;\n'+
-
'mH = mH - hDif; mW = mW - wDif;\n'+
-
'mH = mH \/ document.images[0].height;\n'+
-
'mW = mW \/ document.images[0].width;\n'+
-
'var zoomFactor = ( mH < mW ) ? mH : mW;\n'+
-
'oH = Math.floor( document.images[0].height * zoomFactor );\n'+
-
'oW = Math.floor( document.images[0].width * zoomFactor );\n'+
-
-
'document.images[0].style.cursor = \'crosshair\';\n'+
-
'document.images[0].title = \'Click to resize image\';\n'+
-
'document.images[0].oldHeight = document.images[0].height;\n'+
-
'document.images[0].oldWidth = document.images[0].width;\n'+
-
'document.images[0].newHeight = oH;\n'+
-
'document.images[0].newWidth = oW;\n'+
-
'document.images[0].onclick = function () { '+
-
'if( this.oldHeight == this.height ) { '+
-
'this.height = this.newHeight; this.width = this.newWidth; '+
-
'setTimeout(\'window.resizeTo(\'+this.oW+\',\'+this.oH+\'); '+
-
'if( !window.opera ) { '+
-
'window.moveTo(\'+Math.round((this.scW-this.oW)/2)+\','+
-
'\'+Math.round((this.scH-this.oH)/2)+\'); }\',1);\n'+
-
'} else { this.height = this.oldHeight; this.width = this.oldWidth; '+
-
'window.moveTo(0,0); window.resizeTo(this.scW,this.scH); '+
-
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
-
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
-
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
-
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
-
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
-
'if( this.fullH < myH ) { var rs = this.fullH - myH; window.resizeBy(0,rs); '+
-
'if( !window.opera ) { window.moveBy(0,Math.round(rs/-2)); } }'+
-
'if( this.fullW < myW ) { var rs = this.fullW - myW; window.resizeBy(rs,0); '+
-
'if( !window.opera ) { window.moveBy(Math.round(rs/-2),0); } }'+
-
'} };\n'+
-
-
'document.images[0].height = oH;\n'+
-
'document.images[0].width = oW;\n'+
-
'oH += hDif; oW += wDif;\n'+
-
'}\n'+
-
-
'if(document.getElementsByTagName) {\n'+
-
'for( var l = document.getElementsByTagName(\'a\'), x = 0; l[x]; x++ ) {\n'+
-
'if(l[x].className==\'makeright\'&&!l[x].style.position){\n'+
-
'l[x].style.position=\'relative\';\n'+
-
'l[x].style.left=(document.images[0].width-(l[x].offsetWidth+l[x].offsetLeft))+\'px\';\n'+
-
'}}}\n'+
-
'var x = window; x.resizeTo( oW + 200, oH + 200 );\n'+
-
'var myW = 0, myH = 0, d = x.document.documentElement, b = x.document.body;\n'+
-
'if( x.innerWidth ) { myW = x.innerWidth; myH = x.innerHeight; }\n'+
-
'else if( d && d.clientWidth ) { myW = d.clientWidth; myH = d.clientHeight; }\n'+
-
'else if( b && b.clientWidth ) { myW = b.clientWidth; myH = b.clientHeight; }\n'+
-
'if( window.opera && !document.childNodes ) { myW += 16; }\n'+
-
'x.resizeTo( oW = oW + ( ( oW + 200 ) - myW ), oH = oH + ( (oH + 200 ) - myH ) );\n'+
-
'var scW = screen.availWidth ? screen.availWidth : screen.width;\n'+
-
'var scH = screen.availHeight ? screen.availHeight : screen.height;\n'+
-
-
'document.images[0].oH = oH;\n'+
-
'document.images[0].oW = oW;\n'+
-
'document.images[0].scH = scH;\n'+
-
'document.images[0].scW = scW;\n'+
-
-
'if( !window.opera ) { x.moveTo(Math.round((scW-oW)/2),Math.round((scH-oH)/2)); }\n'+
-
(oTimeClose?('window.setTimeout(\'window.close()\','+oTimeClose+');\n'):'')+
-
'}\n'+
-
'<\/script>'+
-
'<\/head><body onload="resizeWinTo();"'+(AutoClose?' onblur="self.close();"':'')+'>'+
-
(document.layers?('<layer left="0" top="0" id="myID">'):('<div style="position:absolute;left:0px;top:0px;display:table;" id="myID">'))+
-
'<img src="'+imageURL+'" alt="Loading image ..." title="" onload="resizeWinTo();">'+
-
(extraHTML?extraHTML:'')+(document.layers?'<\/layer>':'<\/div>')+'<\/body><\/html>');
-
imgWin.document.close();
-
if( imgWin.focus ) { imgWin.focus(); }
-
return false;
-
}
-
But how do I get My code(below) to :
1. reduce the image dimensions
2. trigger the code above (or similar lightbox code that requires thumbs to be e.g rel='lightbox')?
Even something like this would be good http://www.c6software.com/Products/P...#Prerequisites -
<script type='text/javascript'>
-
<!--
-
function ResizeThem(){
-
maxheight=250;
-
maxwidth= 250;
-
imgs=document.getElementsByTagName("img");
-
for (p=0; p<imgs.length; p++) {
-
if (imgs[p].getAttribute("alt")=="user posted image") {
-
w=parseInt(imgs[p].width);
-
h=parseInt(imgs[p].height);
-
if (parseInt(imgs[p].width)>maxwidth) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].setAttribute('title','Reduced Image - Click to see full size');
-
imgs[p].onclick=new Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].height=(maxwidth/imgs[p].width)*imgs[p].height;
-
imgs[p].width=maxwidth;}
-
if (parseInt(imgs[p].height)>maxheight) {
-
imgs[p].style.cursor="pointer";
-
imgs[p].onclick=new
-
Function("iw=window.open(this.src,'ImageViewer','resizable=1,scrollbars=1');iw.focus()");
-
imgs[p].width=(maxheight/imgs[p].height)*imgs[p].width;
-
imgs[p].height=maxheight;}}}}
-
ResizeThem()
-
//-->
-
</script>
-
-
But how do I get My code(below) to :
1. reduce the image dimensions
2. trigger the code above (or similar lightbox code that requires thumbs to be e.g rel='lightbox')?
1. Just set the width or height to a fixed size.
2. Change the onclick, or for lightbox, set the rel attribute. If you don't want to change the code, try using an alternative/clone that doesn't require setting attributes.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: rnd |
last post by:
Hi all!
could you kindly help me to solve a compatibility problem that involves
Internet Explorer and NN/Mozilla.
I created a html page that contains a form (its name is "Modulo") and some...
|
by: Bart |
last post by:
Hallo,
I'm have a problem with the following script:
function wr(s)
{
//Just got tired of writing document.write,
//so I created a shorthand version
document.write(s);
|
by: Gary Mayor |
last post by:
Hi,
I'm trying to make it so when I click a image it prints out the image
again and a load of other stuff. So far i've got this far.
<html>
<head>
<script language="JavaScript" type="">...
|
by: David Smith |
last post by:
I have the following snippet which will not render the control on the page:
foreach(DataRow dr in ds.Tables.Rows)
{
System.Web.UI.HtmlControls.HtmlTableRow r = new...
|
by: kev |
last post by:
Hello,
I posted a question a while ago on tabbed pages, how to set it to
invisible when the text box is empty.It was answered by Rick and the
code ran perfectly. However, i tried using the same...
|
by: saurabhpant |
last post by:
Hi friends,
I am working on a blog application.In this application we use an iframe for writing the text I am using the javascript for storing the value of iframe in a temporary variable.The code is...
|
by: gunnuk |
last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta...
|
by: bnashenas1984 |
last post by:
Hi everyone
I have a HTML page which has some dynamic parts. The problem is that this page works fine in IE but not in MOZILLA ( doesn't work att all in mozilla )
here is an example:...
|
by: tegdim |
last post by:
Hello,
I'm working on a machine learning project that I have lots of HTML news stories to work with. I made an online tool that lets me look at these pages via mozilla and hand label them by...
|
by: DolphinDB |
last post by:
Tired of spending countless mintues downsampling your data? Look no further!
In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
|
by: ryjfgjl |
last post by:
ExcelToDatabase: batch import excel into database automatically...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, we are pleased to welcome back...
|
by: jfyes |
last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
|
by: PapaRatzi |
last post by:
Hello,
I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
|
by: Shællîpôpï 09 |
last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
|
by: af34tf |
last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
|
by: Faith0G |
last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
| |