SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pop Up Window Photo Viewer

    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.

  2. #2
    SitePoint Zealot coothead's Avatar
    Join Date
    Jan 2005
    Location
    Chertsey, London, England
    Posts
    164
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the welcome and the help
    I did'nt see no next or back picture buttons though. .

  4. #4
    SitePoint Zealot tristanm's Avatar
    Join Date
    Jan 2005
    Location
    Hampshire, UK
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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"

  5. #5
    SitePoint Member
    Join Date
    Feb 2005
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    SitePoint Zealot tristanm's Avatar
    Join Date
    Jan 2005
    Location
    Hampshire, UK
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •