Open new window 3

quaked2023 · Nov 23, 2004

Hi!

I'm trying display pictures like in this page

http://www.pcclub.com/product_system_detail.cfm?itemno=ENP75704#

(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

http://www.foofighters.com/blackbox/pictures/2004_08_28_sandiego/index.htm,

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

chessbot · Nov 23, 2004

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

quaked2023 · Nov 23, 2004

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

chessbot · Nov 23, 2004

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

quaked2023 · Nov 23, 2004

i get these errors:

1. win is undefined

2. Syntax Error

-The Only Privacy Left Is The Inside Of Your Head!- QUAKED2023

chessbot · Nov 23, 2004

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

quaked2023 · Nov 23, 2004

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

chessbot · Nov 23, 2004

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

quaked2023 · Nov 23, 2004

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

chessbot · Nov 24, 2004

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

quaked2023 · Nov 24, 2004

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

chessbot · Nov 25, 2004

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

quaked2023 · Nov 25, 2004

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

dagger2002 · Nov 25, 2004

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

http://www.coffeedepot.tv

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')">

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!

Open new window 3

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

chessbot

Programmer

quaked2023

Technical User

dagger2002

Programmer

Similar threads

Part and Inventory Search

Sponsor