Pop Up Window Photo Viewer

**ggoerl** · Feb 20, 2005 00:04

Something like this.. .http://www.driveskateboarding.com/images/
click any picture a popup window will showup and you can either go back or next through them and close the window.

**coothead** · Feb 20, 2005 00:55

Hi there ggoerl,

and a warm welcome to these forums

Have a look at this simple working example...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>variable popups</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<base href="http://coothead.homestead.com/files/"/>

<style type="text/css">
/*<![CDATA[*/

body {
     background:#003;
 }
div {
     width:60px;
     border:solid 1px #000;
     background:#eef;
}
 div img {
     width:50px;
     height:50px;
     border:solid 1px #000;
     margin:3px;
}

/*//]]>*/
</style>

<script type="text/javascript">
 //<![CDATA[

var mywindow;

function popUp(w,h,image) {
 if(mywindow) {
    mywindow.close()
 }
  w=w+26; /* this is img width plus margin and border values*/
  h=h+26; /* this is img height plus margin and border values*/

  var l=(screen.width-w)/2;
  var t=(screen.height-h)/2;
  var features="left="+l+",top="+t+",width="+w+",height="+h;
  
        mywindow=window.open('','',features);
        mywindow.document.write('<html><title>'+image+'<\/title><body style="margin:0px;padding:0px;background:#000">');
        mywindow.document.write ('<img src='+image+ ' style="margin:10px;border:double 3px #f00" >')
        mywindow.document.write ('<\/body><\/html>');
        mywindow.document.close();
        mywindow.focus();
 }

//]]>
</script>

</head>
<body>

<div>
<a href="javascript:void(popUp(400,432,'dog.jpg'))"><img src="dog.jpg"  alt=""/></a>
<a href="javascript:void(popUp(360,280,'banana.jpg'))"><img src="banana.jpg"  alt=""/></a>
<a href="javascript:void(popUp(200,200,'aaa.jpg'))"><img src="aaa.jpg"   alt=""/></a>
<a href="javascript:void(popUp(445,238,'ten_quid.jpg'))"><img src="ten_quid.jpg"  alt=""/></a>
<a href="javascript:void(popUp(360,280,'apple.jpg'))"><img src="apple.jpg"  alt=""/></a>
</div>

</body>
</html>

**ggoerl** · Feb 20, 2005 01:14

Thanks for the welcome and the help

I did'nt see no next or back picture buttons though. .

**tristanm** · Feb 20, 2005 09:42

This is something I wrote a while ago which should do what you want from the sounds of things. Its not very elegant, but it did the job at the time.

Check out the variables at the bottom and make the required changes for your particular site. Add an onclick event handler to your links (leave the href as a standard link for accessibility).

Code:

<a href="images/myimage.jpg" onclick="showslide(0); return;"><img src="images/mythubmnail.jpg"></a>

Note that the actual argument passed to showslide should be the array index of the image your linking to as it appears in the 'pics' array.

Let me know if you need help with anything.

Code:

function showslide(arridx)
{
	
	// prepare window content
	var content = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">\n';
	content += '<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">\n';
	content += '<head>\n\t<title>Take a tour</title>\n\t<link rel="stylesheet" type="text/css" media="screen" href="'+ stylesheet + '" />\n</head>\n<body>\n<table>';
	
	content += '\n\t<tr>\n\t\t<td id="prev">';

	// if this isn't the first picture, display a 'previous' link
	if (arridx != 0)
		content += '<a href="javascript: window.opener.showslide(' + (arridx - 1) + ')">prev</a>';	
	else
		content += '&nbsp;';

	// close button	
	content += '</td>\n\t\t<td id="close"><a href="javascript: self.close()">close</a></td>';
	
	content += '\n\t\t<td id="next">';	

	// if this isn't the last picture, display a 'next' link
	if (arridx != pics.length-1)
		content += '<a href="javascript: window.opener.showslide(' + (arridx + 1) + ')">next</a>';
	else
		content += '&nbsp;';
	
	// display an image count
	content += '</td>\n\t</tr>\n\t<tr>\n\t\t<td id="count" colspan="3">Image ' + (arridx+1) + ' of ' + pics.length + '</td>\n\t</tr>';		

	// the image itself
	content += '\n\t<tr>\n\t\t<td id="image" colspan="3"><img src="' + path + pics[arridx] + ext + '" alt="' + desc[arridx] + '"/></td>\n\t</tr>';

	// description
	content += '\n\t<tr>\n\t\t<td id="description" colspan="3">' + desc[arridx] + '</td>\n\t</tr>';
	
	content += '\n</table>\n</body>\n</html>';
	
	// if the window already exists
	if (tourwin)
	{
		// give the window focus
		tourwin.focus();
	}
	// else the window doesn't exist so create one
	else
	{
		var xpos = 0;
		var ypos = 0;

		if (screen)
		{
      	xpos = (screen.availWidth - width) / 2;
	   	ypos = (screen.availHeight - height) / 2;
   	}

		var winprops = 'width=' + width + ',height=' + height + ',screenX=' + xpos + ',screenY=' + ypos + ',left=' + xpos + ',top=' + ypos + ',resizable,status,scrollbars';
		var tourwin = window.open("", "tour", winprops);
		tourwin.focus();
	}
	
	tourwin.document.write(content);
	tourwin.document.close();
}

// image names excluding path and file extension
var pics = new Array("1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17","18","19","20");

// image descriptions.
var desc = new Array("Site reception and shop","Some of our touring pitches","...more touring pitches","children's play area",
"the 'courtyard bar'","the 'hayloft' lounge bar","Rosetta House","new static field development","static caravan area","bungalow, available to hire",
"Peebles high street","opposite end of Peebles high street","looking down on Peebles","River Tweed passing under Tweed Bridge",
"the viaduct bridge in Peebles","Neidpath Castle, Peebles","the first hole, Peebles golf course","the 19th hole, Peebles golf club",
"Peebles swimming pool","Peebles Leisure Centre");

// width and height of the window.  
// these will need to be adjusted to suit the size of the images you are using.
var width = "400";
var height = "300";

// any path information for the images.
// in this example, all images are contained in a subfolder called 'images'
var path = "images/";

// the image extensions.
// you probably don't need to change this
var ext = ".jpg";

// the name of the stylesheet to be used
var stylesheet = "style/tour.css"

**ggoerl** · Feb 20, 2005 11:49

yea, I need a bit of help where do I corporate that 1st code and the onclick event handler into the 2nd script you have there. Some of that stuff I don't need in the 2nd script like the description and probably the size of the images, cause I want the images to show their actual size.

**tristanm** · Feb 21, 2005 09:16

Originally Posted by ggoerl

yea, I need a bit of help where do I corporate that 1st code and the onclick event handler into the 2nd script you have there. Some of that stuff I don't need in the 2nd script like the description and probably the size of the images, cause I want the images to show their actual size.

To make this work, all you need to do is put the function showslide(), that's the 2nd script as you described it, in to a script tag in the head of your document. Then, modify your existing thumbnail links based on the example I gave you.

Just leave the descriptions blank if you don't want any. As regards the image size, the script doesn't have any effect on the size of the displayed image, only the containing window. Basically, this script assumes that all of your images are about the same size, and you merely set the dimensions of the window to ensure that the largest picture in your collection will fit in the window.

If you're still stuck, post your existing code or a link to your website and I'll try and give you a specific example.

User Tag List

Thread: Pop Up Window Photo Viewer

Thread Tools

Display

Pop Up Window Photo Viewer

Bookmarks

Bookmarks

Posting Permissions