www.webdeveloper.com
Results 1 to 7 of 7

Thread: Thumbnail leading to a larger pic in a seperate pop up window

  1. #1
    Join Date
    Apr 2003
    Location
    Hampton Bays, NY
    Posts
    7

    Thumbnail leading to a larger pic in a seperate pop up window

    Hi Everybody

    How do I do this ??? ...

    Smaller pic which when clicked on opens up a seperate pop up window with that same pic in it but much larger , I wanna be able to control the size of the pop up window that opens .... ( I want the pop up window to be the size of the larger pic thats in it ) .


    Thanks
    Last edited by Webbie2003; 04-01-2003 at 06:47 AM.

  2. #2
    Join Date
    Dec 2002
    Location
    High on life
    Posts
    10,104
    Try this code. It should be close to what you are looking for:

    Code:
    <html>
    <head>
    <title>Untitled</title>
    
    <script language="javascript" type="text/javascript">
    
    function openpic(img,title,width,height)
    {
    	picwin = window.open('','','width='+width+',height='+height+'')
    	picwin.document.write(
    	'<html>',
    	'<head>',
    	'<title>'+title+'</title>',
    	'</head>',
    	'<body bgcolor="darkblue">',
    	'<img src="'+img+'">',
    	'</body>',
    	'</html>' //no comma after last line
    	);
    }
    
    </script>
    
    </head>
    
    <body>
    <a href="yourlarge.gif" onClick="openpic(this.href,'Page Title','325','325'); return false;"><img src="yoursmall.gif" border="0"></a>
    </body>
    </html>

    Personal website http://www.ryanbrill.com/
    Business website: http://www.infinitywebdesign.com/
    TypeSpace http://www.typespace.org/

    I reject your reality and substitute it with my own!

  3. #3
    Join Date
    Apr 2003
    Location
    Cebu, Philippines
    Posts
    6
    how about a thumbnail pic when clicked opens a separate pop up window (another url)?

  4. #4
    Join Date
    Mar 2003
    Location
    France
    Posts
    70
    I think that's what you're looking for (I used it a lot on my site, it works well)

    To have bigger image in popup from a thumb:

    Put this between <HEAD> and </HEAD> only once!

    <SCRIPT LANGUAGE="JavaScript"><!--
    /*
    To be put only once in the header of the page
    */
    function afficheVignette(cheminVignette,cheminMaxi)
    {
    document.write('<A HREF="javascript:afficheMaxi(\''+cheminMaxi+'\')"><IMG SRC="'+cheminVignette+'" HSPACE=0 VSPACE=0 BORDER=0 ALT="clich here to enlarge"></A>');
    }
    function afficheMaxi(chemin)
    {
    i1 = new Image;
    i1.src = chemin;
    html = '<HTML><HEAD><TITLE>Image</TITLE></HEAD><BODY LEFTMARGIN=0 MARGINWIDTH=0 TOPMARGIN=0 MARGINHEIGHT=0><CENTER><IMG SRC="'+chemin+'" BORDER=0 NAME=imageTest onLoad="window.resizeTo(document.imageTest.width+14,document.imageTest.height+32)"></CENTER></BODY></HTML>';
    popupImage = window.open('','_blank','toolbar=0,location=0,directories=0,menuBar=0,scrollbars=0,resizable=1');
    popupImage.document.open();
    popupImage.document.write(html);
    popupImage.document.close()
    };
    // -->
    </SCRIPT>

    To be put between the <BODY> and </BODY> of your page where the pic should go

    <SCRIPT LANGUAGE="JavaScript">
    afficheVignette("XXXXTHUMBXXXX.gif","XXXXXIMAGEXXXX.gif");
    </SCRIPT>

    In this script part of it is french... (but I'm french) "Vignette" means "thumb"!

    Normally, the only things you need to change are the names of the pics (I put them in caps with lots of XXXXX around )
    Last edited by nash; 04-02-2003 at 07:22 AM.

  5. #5
    Join Date
    Apr 2003
    Location
    Hampton Bays, NY
    Posts
    7
    Thanks ... Pyro , Nash & Optimus_Primo

    Webbie

  6. #6
    Join Date
    Apr 2003
    Location
    Cebu, Philippines
    Posts
    6
    hello guys...i want ur ideas on this script... it works well on IE but NOT on Netscape? tell me whats wrong with my script?

    <head>
    <meta http-equiv="Content-Language" content="en-us">
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <meta name="GENERATOR" content="Microsoft FrontPage 4.0">
    <meta name="ProgId" content="FrontPage.Editor.Document">
    <title>Popup Window Image Preview</title>
    <script language="javascript">
    <!-- hide from old browsers
    function selectWin(source,h1,w1){
    newWin = window.open(source,"","height=" + h1 + ",width=" + w1 + ",top=10,left=0,scrollbars=yes");

    }
    // stop hiding -->
    </script>
    </head>

    <body>

    <p><a href="javascript:selectWin('c:/my documents/my webs/tables_collection.htm',400,750)"><img border="2" src="Table_1.gif" width="42" height="44"></a></p>

    <p>&nbsp;</p>

    </body>

    </html>

  7. #7
    Join Date
    Apr 2003
    Location
    Maryland
    Posts
    21

    What do you use for building your page?

    I use MS front Page... haven't gotten to the big leagues yet.

    If you use MSFP try this... insert your picture into the place you want it on your page. Click on the picture and click CTRL+T... it'll auomatically make a thumbnail. Then go into hyperlink settings - Target Settings - New Window. Ths is how I do it since I am HTML writing illiterate. I am just figuring out how to plug things into the HTML script to change things. No formal schooling obviously.
    "Assault weapons have gotten a lot of bad press
    lately but they're manufactured for a reason;
    to take out today's modern super-animals,
    such as the flying squirrel and the electric eel."
    - Lenny
    The Simpsons

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles