Is this possible?

Question

FisherGraphics 0 Newbie Poster

15 Years Ago

I just started researching this and am not sure if it is possible so I do not have any code yet but thought I'd see what you all thought.

I have several images that I want to link from different pages but I also want to have the ability to zoom in and out on the images. My initial thought was to build HTML pages for each image with the zoom function added to each page but thought there would be an easier way so here is my question:

Can I create a page with the zoom function and an empty DIV and have the links from other pages open a new window and load the image into the div? I have something similar using iFrames but am wanting to avoid frames if possible.

Thanks for any suggestions and/or help!

Keith

javascript

5 Contributors
24 Replies
169 Views
4 Days Discussion Span
Latest Post 15 Years Ago Latest Post by FisherGraphics

essential 84 Posting Shark

15 Years Ago

I'm not sure if this is what you really need:

<html>
<head>
<title>Test Page</title>
<script type="text/javascript">
<!--
function changeIt( imageName, objName ) {
   document.getElementById( objName ).innerHTML = '<img src="' + imageName + '" alt="image0" />';
   window.open( imageName, target="_blank", "width=300,height=300");
}
//-->
</script>
</head>
<body>
<a href="javascript:void(0);" onclick="changeIt('image1.gif', 'content');">one</a>
</body>
</html>

hope it helps...

essential 84 Posting Shark

15 Years Ago

It means the object doesn't exist, which is the content. Some version of IE do not fully understand the getElementById method--so it's better if we will use the document.all.element to get specific element's in IE browser.
I will provide you another example, when i get home.

essential 84 Posting Shark

15 Years Ago

Here is the sample.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Split text demo</title>
<script type="text/javascript">
<!--
var changeIt, img;

changeIt = function( imageName, objName ) {
img = '<img src="' + imageName + '" alt="image1">';
   if ( objName ) { // I'l provide a longer line's, so that you can see how they really work.
      try {
   document.getElementById( objName ).innerHTML = img; 
      } catch( e ) {
   document.all[objName].outerHTML = img; 
// Replacing the whole structure of the div element into an <img>
// IE browsers prefer using outerHTML than innerHTML, but you can still use the innerHTML if you prefer to using this method.
      }
   } window.open( imageName, imageName, target="_blank", "width=300,height=300");
};
// -->
</script>
</head>
<body>
<div id="content"></div>
<br><a href="javascript:void(changeIt('image1.gif', 'content')());">Click Me!</a>
</body>
</html>

essential 84 Posting Shark

15 Years Ago

There's nothing to worry about, i am here to help.
In this demo, we will skip the long coding of the page, we will just apply direct output into the opened window, so that you can easily perform editing on the script.
Here's the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<HTML lang="en">
<HEAD>
<META http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<TITLE>TEST PAGE</TITLE>
<SCRIPT type="text/javascript">
<!--
var changeIt, img, win, htmlDOC;
changeIt = function( imageName, objName ) {
img = '<IMG src="' + imageName + '" alt="image1">\n';
htmlDOC = "<HTML>\n";
htmlDOC += "<HEAD>\n";
htmlDOC += "<TITLE> Test Page </TITLE>\n";
htmlDOC += "</HEAD>\n";
htmlDOC += '<BODY BGCOLOR="#365d95">\n';
htmlDOC += '<DIV STYLE="background-color: #eee; padding: 1em; height: 50px; border: 2px solid #405060; width : 95%; text-align:center; margin : 0 auto;">';
htmlDOC += img;
htmlDOC += "</DIV>\n";
htmlDOC += "</BODY>\n</HTML>";
   if ( objName ) {
      try {
      document.getElementById( objName ).innerHTML = img;
      } catch( e ) {
      document.all[ objName ].innerHTML = img;
      }
   } win = window.open(" ", "New Window", target="_blank");
   (( document.writeIn ) ? 
win.document.writeIn( htmlDOC ) : document.write( htmlDOC ));
};
// -->
</SCRIPT>
</HEAD>
<BODY>
<DIV ID="content"></DIV>
<DIV><A href="javascript:void( changeIt('image1.gif', 'content')());">Open New Window</A></DIV>
</BODY>
</HTML>

Hope everything helps and Good to you, FisherGraphics...

Airshow 416 WiFi Lounge Lizard

15 Years Ago

I'm not completely sure I understand but this is my interpretation:

Two windows; MainWin and PopupWin.
MainWin contains a number of links, which when clicked cause an image to be displayed in PopupWin.
PopupWin is opened if not already open, otherwise it is reused.

If this is the case, then you need to script both windows to allow MainWin and PopupWin to talk to eachother, in particular to pass across the URL of the image to be displayed.

There is a number of ways in which this can be achieved. This is one:

MainWin

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Split text demo</title>
<script>
var wPopup = null;
var imageURL = null;

function queryWin(w){ return !(w==null||w.closed||typeof w=="undefined"); }
function focusWin(w){ if(w.blur)w.focus(); }
function openPopup(pageURL){
	pageURL = (!pageURL) ? '' : pageURL;
	if(pageURL == '') { return false; }
	if(queryWin(wPopup)) { return true; }
	else {
		var ff = "width=650,height=550,left=150,top=10,scrollbars=no,resizable";//Adjust aqccording to what you want
		wPopup = window.open(pageURL, "wPopup", ff);
		return true;
	}
}
function show(pageURL, imgURL){
	pageURL = (!pageURL) ? '' : pageURL;
	imageURL = (!imgURL) ? '' : imgURL;
	if(pageURL == '' || imgURL == '') { return false; }
	global_imgURL = imgURL;
	if( openPopup(pageURL) ){
		if( wPopup.loaded ){ updatePopup(imgURL); }
		focusWin(wPopup);
	}
	return false;
}
function updatePopup(imgURL){
	imgURL = (!imgURL) ? imageURL : imgURL;
	if(!imgURL) { return false; }
	try { wPopup.update(imgURL); }
	catch(e) { ; }
}
</script>

</head>

<body>

<ul>
	<li><a href="" onclick="return show('popup_win.html', 'images/img1.jpg')">Image 1</a></li>
	<li><a href="" onclick="return show('popup_win.html', 'images/img2.jpg')">Image 2</a></li>
	<li><a href="" onclick="return show('popup_win.html', 'images/img3.jpg')">Image 3</a></li>
</ul>

</body>
</html>

PopupWin

<DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Untitled</title>
<style type="text/css">
#content img { border:0; }
</style>

<script>
var loaded = false;

function queryWin(w){ return !(w==null||w.closed||typeof w=="undefined"); }
function update(imgURL){
	imgURL = (!imgURL) ? global_imgURL : imgURL;
	if(!imgURL) { return false; }
	var img = (document.getElementById) ? document.getElementById('popupImg') : document.all['popupImg'];
	if(img) {
		img.src = imgURL;
		img.title = imgURL;
		return true;
	}
	else {
		alert('Can\'t load img.');
		return false;
	}
}
onload = function(){
	loaded = true;
	if( queryWin(opener) ) { opener.updatePopup(); }
}
</script>
</head>

<body>

<div id="content">
	<img id="popupImg" src="" />
</div>

</body>
</html>

I have also included a feature which causes PopupWin to be given focus whenever a link is clicked in MainWin. Otherwise PopupWin would only get focus when it is first opened (as per thousands of popup windows in cyberspace - why doesn't everyone do this?).

Of course, this only addresses the population of PopupWin with the required image. Zoom is another matter.

Hope this helps

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

anish.anick 0 Light Poster · Answer 1 · 2009-05-01T21:01:41+00:00

Sure, You can create a page with zoom function and an empty DIV to load the image.

Anish

FisherGraphics 0 Newbie Poster · Answer 2 · 2009-05-01T22:15:28+00:00

I've started working on this and I can get it to work when the link is on the same page, but when I am trying to get it to open a new window, the image is not loading. Here is what I have so far...

The script which is on the image window:

<script type="text/javascript">
function changeIt(imageName,objName)
{
var obj = document.getElementById(objName);
var imgTag = "<img src='"+imageName+"' border='0' />";
obj.innerHTML = imgTag;
return;
}


</script>

The link:

<a id="one" href="imagewindow.html" target="_blank" onClick="changeIt('image1.gif','content');">one</a>

I am still pretty new at all of this and am probably overlooking something so please let me know what I am doing wrong. It seems like it should be easy.

Thanks for any help you might have.

Keith

FisherGraphics 0 Newbie Poster · Answer 3 · 2009-05-02T00:05:11+00:00

Essential,

Thanks for the help. I think we are on the right track but whenever I click on the link I get this error message:

document.getElementById( ... ) is null or not an object

It never moves or opens a new window, just get the dangerous yellow triangle down in the corner of IE.

Any ideas?

Thanks again!

FisherGraphics 0 Newbie Poster · Answer 4 · 2009-05-02T09:06:20+00:00

I just got to check back in and will not be able to try this till tomorrow but I really appreciate your help!

Thanks a million!

Keith

FisherGraphics 0 Newbie Poster · Answer 5 · 2009-05-04T20:37:25+00:00

This almost has it. I really appreciate your help so far.

There is one thing that I was wanting to do that this is not doing and I apologize if I wasn't clear before. When the image is loaded into a new page, I need it to populate a div on a specific target page rather than a blank new window.

I've tried adjusting the scripts provided above but the closest I've come so far is populating the div on page 1 and opening my target page in a new window but not getting the image carried over. Here is a short version of what I've got so far.

Page 1:

<script type="text/javascript">
var changeIt, img;
  changeIt = function( imageName, objName ) 
  { img = '<img src="' + imageName + '">';
  window.open( 'targetpage.html', target="_blank" );
  document.getElementById( objName ).innerHTML = img;
  };
</script>

</head>
<body>

<div id="content"></div>
<br>
<a href="javascript:void(changeIt('image.gif', 'content')());">Click Me!</a>
</body>
</html>

Target Page:

<script type="text/javascript">
var changeIt, img;
  changeIt = function( imageName, objName ) 
  { img = '<img src="' + imageName + '">';
  document.getElementById( objName ).innerHTML = img;
  };
</script>

</head>

<body>

<div id="content"></div>
<br>
<img src="targetpage_image.jpg" width="150" height="330" />

</body>
</html>

Thanks again! Sorry to keep bothering you but I am a little new at this still.

Keith

FisherGraphics 0 Newbie Poster · Answer 6 · 2009-05-04T23:02:39+00:00

You guys are great!

Airshow - that was exactly what I was looking for and I wish I could have explained it that well.

Essential - Thank you as well for all your help!

Keith

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2009-05-04T23:36:28+00:00

Forgot to say - tested in IE6 (under Win2000), IE7 (under WinXP Pro), IE8 (under Win7), Firefox 3.0.10 (under Win2000), and Opera 9.01 (under Win2000) (which is lightning quick).

Enjoy

Airshow

FisherGraphics 0 Newbie Poster · Answer 8 · 2009-05-04T23:55:56+00:00

Thanks again! I was testing now as well and they work great!

You saved me a lot of time.

<")))><

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 9 · 2009-05-05T00:03:37+00:00

> if(w.blur)w.focus();

This checks the `blur' property of the window object and not if the window is having focus or not. Anyways, this isn't required, you can directly invoke the focus() function.

> pageURL = (!pageURL) ? '' : pageURL;
> imageURL = (!imgURL) ? '' : imgURL;
> if(pageURL == '' || imgURL == '') { return false; }

Or simply: if(!pageURL || !imgURL) return false ;

> var img = (document.getElementById) ?
> document.getElementById('popupImg') :
> document.all;

Or you can use the `images' collection of the document object which is supported by almost all browsers out there.

FisherGraphics 0 Newbie Poster · Answer 10 · 2009-05-05T00:24:50+00:00

Thanks SOS. I was looking into that as well and you clarified that nicely.

One other quick question. If I need to add a caption for each image, could that be done in the function show(pageURL, imgURL) by adding another var?

For example, function show(pageURL, imgURL, caption) then use document.write (caption) where it is to be added? Or, would I need to further define the variable?

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 11 · 2009-05-05T02:18:28+00:00

FisherGraphics,

There was some obscure reason for using if(w.blur)w.focus(); which I really can't recall (IE on the Mac probably). I have been using it slavishly for the last 10 years - probably unnecessarily for the last 9 years I concede.

Do not simplify pageURL = (!pageURL) ? '' : pageURL; etc. as suggested. Note that the line imageURL = (!imgURL) ? '' : imgURL; sets the global variable imageURL . This is key to the main window asynchronous communication with the popup window when the latter is first opened.

Suggest not using image collection as you need to know the index of the image in question. Modify HTML - add a graphical page header for example - code breaks. Use DOM methods these days.

To add captions, yes indeed start by passing another parameter to show(). You will also need to:

Declare var imageCaption as a global variable at the top of the main window script, as per imageURL (for completness).
In show(), pass the caption through as an argument to updatePopup().
In updatePopup() pass caption through as an argument to wPopup.update();
Add something like <div id="caption"></div> to the HTML in the popup page (and style it appropriately in CSS).
In the popup window amend update() to accept caption as a second parameter and add code to populate the caption div with the passed value. You have to use a DOM method, not document.write(), which would overwrite the whole of the popup page! The DOM code will be something like (not tested):

captionDiv = (document.getElementById) ? (document.getElementById('caption')) : document.all['caption'];
captionDiv.innerHTML = imgCaption;

Recommend observing cautions all through with caption values, as per handling of image url values.

Should see you on your way.

Airshow

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 12 · 2009-05-05T10:19:32+00:00

> Suggest not using image collection as you need to know the index
> of the image in question.

No you don't; please don't spread FUD.

var myImg = document.images['your_img_id'];
//OR
var myImg = document.images['your_img_name'];

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 13 · 2009-05-05T17:15:05+00:00

SOS is correct, however use of the images collection is discouraged:
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-90379117

Airshow

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 14 · 2009-05-05T17:27:06+00:00

Just to set the context straight here:

it is recommended not to use this attribute to find the images in the document

Since in this particular case the ID of the image is known, there is no harm in using the `images' collection though getElementById also works.

Using the images collection is logically better since entire scan of the DOM tree isn't required. This *might* make a difference in cases where the entire document has close to thousand elements but only a few images.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 15 · 2009-05-05T17:37:47+00:00

Airshow 416 WiFi Lounge Lizard

15 Years Ago

:)

FisherGraphics 0 Newbie Poster · Answer 16 · 2009-05-05T18:24:51+00:00

FisherGraphics 0 Newbie Poster

15 Years Ago

WOW! I still got a lot to learn. :(

FisherGraphics 0 Newbie Poster · Answer 17 · 2009-05-05T18:30:03+00:00

var myImg = document.images['your_img_id'];
//OR
var myImg = document.images['your_img_name'];

SOS,

Would you use this to assign the var then write it as Airshow mentioned with the innerHTML? Am I understanding that correctly or am I way off base?

~s.o.s~ 2,560 Failure as a human Team Colleague Featured Poster · Answer 18 · 2009-05-05T18:55:14+00:00

As long as you are using IMG tags to render images, you can use the document.images collection rather than the usual document.getElementById function to grab image references. Regarding the innerHTML snippet, since the element with ID 'caption' is a DIV, you can't use the document.images collection.

BTW, try to experiment more; play around with the suggestions offered rather than being afraid to try them out. Trust me, you'll learn a lot more this way.

FisherGraphics 0 Newbie Poster · Answer 19 · 2009-05-05T19:13:42+00:00

Oh, I get what you are saying now. Thanks for clearing things up for me.

I am still trying things out to see what is going to work best and I really appreciate all you guys helping me out.

Keith