Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Open new window 3

Status
Not open for further replies.

quaked2023

Technical User
Jan 22, 2004
105
MX
Hi!

I'm trying display pictures like in this page (and i'm not promoting this product or webpage i'ts just a good example), a want to open a new window with a specific size and with just the titlebar. Also i was wondering how can i put an arrow to go on to the next picture or go back to the previous picture like in this page do i have to make the link to every picture one by one or is there a way to do it automatically

hope you can help, thanks in advance

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
Code:
<html>
<head>
<title>Pictures!</title>
<script type="text/javascript">
<!--

var imgs = new Array("pic1.gif","pic2.jpg","pic3.png");
// Change to your image coordinates

function showImage(index)
{
  if (index >= imgs.length) return;
  if (win) win.close();
  var win = window.open("","imgwin","width=100,height=100");
  // change to your width and height

  with (win.document)
  {
    writeln("<html>");
    writeln("<head>");
    writeln("<title>" + imgs[index] + "</title>");
    writeln("</head>");
    writeln("<body>");
    writeln("<img src=\"" + imgs[index] + "\">");
    if (index > 0)
    {
      writeln("<div style=\"float: left;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index-1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    if (index < imgs.length-1)
    {
      writeln("<div style=\"float: right;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index+1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    writeln("</body>");
    writeln("</html>");
  }
}

// -->
</script>
</head>
<body>
<a href="#" onclick="showImage(1);">First image</a><br>
<a href="#" onclick="showImage(2);">Second image</a><br>
<a href="#" onclick="showImage(3);">Third image</a><br>
</body>
</html>
Is that what you meant?

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
hey chessbot!

thanks for helping me again, you helped me in thread253-93576, here are 3 questions for you and yes that's kind of what i want, but with this code if i press the next or previous link, the image that's already in the window stays there and the next or previous images apears down that image, so here are my 3 questions

1 . Any idea o how can i press next and only display 1 picture?
2. I have 2 image sizes one is 640 x 480 and the other is 480 x 640, how can i resize the new window acording to the image size?
3. Like i asked you on thread253-93576 how can i open the image in a frame?

Thank you so much!

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
1. Change
Code:
var win = window.open("","imgwin","width=100,height=100");
to
code]
win = window.open("","imgwin","width=100,height=100");
[/code]
It makes it global instead of for that function only.

2. Change
Code:
writeln("<body>");
to
Code:
writeln("<body onload=\"var i = document.getElementsByTagName('img')[0];window.resizeTo(i.style.width, i.style.height);>");

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
i get these errors:

1. win is undefined

2. Syntax Error

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
All right. New script:
Code:
<script type="text/javascript">
<!--

var imgs = new Array("pic1.gif","pic2.jpg","pic3.png");
// Change to your image coordinates

[red]var win = null;[/red]

function showImage(index)
{
  if (index >= imgs.length) return;
  if (win) win.close();

[red]  var i = new Image(imgs[index]);
  var w = i.width, h = i.height;

  win = window.open("","imgwin","width=" + w + ",height=" + h);[/red]
  with (win.document)
  {
    writeln("<html>");
    writeln("<head>");
    writeln("<title>" + imgs[index] + "</title>");
    writeln("</head>");
    [red]writeln("<body>");[/red]
    writeln("<img src=\"" + imgs[index] + "\">");
    if (index > 0)
    {
      writeln("<div style=\"float: left;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index-1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    if (index < imgs.length-1)
    {
      writeln("<div style=\"float: right;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index+1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    writeln("</body>");
    writeln("</html>");
  }
}

// -->
</script>

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
sorry man i get another error in the line win = window.open("","imgwin","width=" + w + ",height=" + h); it says type mismatch

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
Try changing
Code:
  var i = new Image(imgs[index]);
  var w = i.width, h = i.height;
to
Code:
  var i = new Image();
  i.src = imgs[index];
  var w = i.width, h = i.height;

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
OK no errors, but the window width is too big like doble the size of the picture, any ideas?... you know i'm going to put you in my web page credits

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
This works fine for me (in FireFox)
Code:
<html>
<head>
<title>Pictures!</title>
<script type="text/javascript">
<!--

var imgs = new Array("pic1.bmp","pic2.bmp","pic3.bmp");
// Change to your image coordinates

var win = null;

function showImage(index)
{
  if (index >= imgs.length) return;
  if (win != null) win.close();

  var i = new Image();
  i.src = imgs[index];
  var w = i.width, h = i.height;

  win = window.open("","imgwin","width=" + w + ",height=" + (h+30) + ",scrolling=no,left=100,top=100");
  with (win.document)
  {
    writeln("<html>");
    writeln("<head>");
    writeln("<title>" + imgs[index] + "</title>");
    writeln("</head>");
    writeln("<body style=\"margin: 0;\">");
    writeln("<img src=\"" + imgs[index] + "\">");
    if (index > 0)
    {
      writeln("<div style=\"float: left;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index-1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    if (index < imgs.length-1)
    {
      writeln("<div style=\"float: right;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index+1);
      write(");\">&gt;</a>");
      writeln("</div>");
    }
    writeln("</body>");
    writeln("</html>");
  }
}

// -->
</script></head>
<body>
<a href="#" onclick="showImage(0);">First image</a><br>
<a href="#" onclick="showImage(1);">Second image</a><br>
<a href="#" onclick="showImage(2);">Third image</a><br>
</body>
</html>
I only tried it with bitmaps so there might be something different with other formats.

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Hey Chessbot, sorry to bother you again.... the code works there's just one little problem when i press the next or back link it sends me to the original page... thaks for your patience

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
Yeah, I got that on IE too now that I tested it. This works though:
Code:
<html>
<head>
<title>Pictures!</title>
<script type="text/javascript">
<!--

var imgs = new Array("img1.jpg","img2.gif","img3.png","img4.bmp");
// Change to your image coordinates

var win = null;

function showImage(index)
{
  if (index >= imgs.length) return;
  if (win != null)
    win.document.clear();

  var i = new Image();
  i.src = imgs[index];
  if (i.width)
    var w = i.width, h = i.height;
  else
    var w = 0, h = 0;
  i = null;

  if (win)
    win.resizeTo(w+50, h+65);
  else
    win = window.open("about:blank","imgwin","width=" + (w+50) + ",height=" + (h+30) + ",scrolling=no,left=100,top=100");

  with (win.document)
  {
    open();
    writeln("<html>");
    writeln("<head>");
    writeln("<title>" + imgs[index] + "</title>");
    writeln("</head>");
    writeln("<body style=\"margin: 0;\">");
    writeln("<img src=\"" + imgs[index] + "\">");
    if (index > 0)
    {
      writeln("<div style=\"float: left;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index-1);
      write(");\">&lt;</a>");
      writeln("</div>");
    }
    if (index < imgs.length-1)
    {
      writeln("<div style=\"float: right;\">");
      write("<a href=\"#\" onclick=\"opener.showImage(");
      write(index+1);
      write(");\">&gt;</a>");
      writeln("</div>");
    }
    writeln("</body>");
    writeln("</html>");
    close();
  }
}

// -->
</script></head>
<body>
<a href="#" onclick="showImage(0);">First image</a><br>
<a href="#" onclick="showImage(1);">Second image</a><br>
<a href="#" onclick="showImage(2);">Third image</a><br>
<a href="#" onclick="showImage(3);">Fourth image</a><br>
<a href="[URL unfurl="true"]http://www.google.com/">Google</a><br>[/URL]
</body>
</html>

--Chessbot

"Violence is the last refuge of the incompetent." -- Asimov, Foundation
 
Thanks for the code, and by the way you helped me in thread253-935763 sorry for the wrong link

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023
 
Here is the function i used for a site i did where we displayed pictures in a window with a specific.

I am not promoting the site but if you would like to see this script in action it is here
Code:
function popup(pagename){
                picture = window.open("","picturewin","width=700,height=498,scrollbars=0,resizable=0,status=0");
                picture.location.href = pagename;
}

And this is the code I used for the link

Code:
<a href="javascript:popup('imagename')">
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top