Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts

    :: thumbnail to fullsize image js windows ::

    im looking for some kind of script that will i can add something like an onClick="popup(this)" which will automatically get the name of a thumbnail and then create the popup window from the full size one - for some reason any attempt i have tried seems to fail i basically dont wanna go in sticking every ID in a page cos im gonna have about 40+ thumbs on a page)

    thx peeps

    is it also possible to maybe automatically format the window it pops up in? maybe like creating html page on the fly rather than just having the image shown on its own? (cos i wanna remove the borders)
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    626
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Something like this?
    <html>
    <head>
    <title>Image Pop Up</title>
    <script language="JavaScript">
    img0=new Image() // preload images
    img0.src="thumb0.gif"
    img1=new Image()
    img1.src="thumb1.gif"
    img2=new Image()
    img2.src="thumb2.gif"
    image0=new Image() // preload images
    image0.src="large0.gif"
    image1=new Image()
    image1.src="large1.gif"
    image2=new Image()
    image2.src="large2.gif"
    var ImgWin=" "
    function imgwin(Imgn)
    {
    w=eval(Imgn+".width")
    if(w<100)
    {w=100}
    h=eval(Imgn+".height")
    if(h<100) // cannot open window less than 100 by 100 pixels
    {h=100}
    h=h+25
    picgif=eval(Imgn+".src")
    if(ImgWin.open)
    {ImgWin.close()}
    ImgWin=window.open("","winimg",config="width="+w+",height="+h,+"location=no,status=no,directories=no ,toolbar=no,scrollbars=no,menubar=no,resize=no,top=30,left=30");
    ImgWin.document.write("<html>")
    ImgWin.document.write("<head><title>Display Image</title></head>")
    ImgWin.document.write("<body onblur='self.focus()' marginheight='0' marginwidth='0' leftmargin='0' topmargin='0' bgcolor='lightyellow'>")
    ImgWin.document.write("<center><img src="+picgif+" border='0' hspace=0 vspace=0><br>")
    ImgWin.document.write("<font size=-1><a href='#' onClick='self.close()'>Close Me</a></font></center>")
    ImgWin.document.write("</body>")
    ImgWin.document.write("</html>")
    ImgWin.document.close()
    ImgWin.focus()
    }
    </script>
    </head>
    <body>
    <center>
    <br><br><br>
    <a href="#" onClick="imgwin('image0');return false;"><img src="thumb0.gif" name="img0" border="0"></a>
    <br>
    <a href="#" onClick="imgwin('image1');return false"><img src="thumb1.gif" name="img1" border="0"></a>
    <br>
    <a href="#" onClick="imgwin('image2');return false"><img src="thumb2.gif" name="img2" border="0"></a>
    <br>
    </body>
    </html>

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    will check it out l8rz - got a hectic schedule atm
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson

  • #4
    Regular Coder Skyzyx's Avatar
    Join Date
    Aug 2002
    Location
    Silicon Valley, CA
    Posts
    980
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here's one that beetle wrote that's pretty cool:
    Popup image viewer

    I'm doing some ongoing development to it, so I've reposted it here:
    http://www.skyzyx.com/scripts/imagepop.php
    Last edited by Skyzyx; 02-24-2004 at 06:10 PM.

    Creator of SimplePie and Tarzan AWS, co-founder of WarpShare, co-built the Y! Messenger website, usability-focused, and an INFJ personality.

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I built one that supports a text description under the thumbnail.
    Place in the head section
    Code:
    <script language="javascript">
    <!--
    // script by matt newton (matt.newton@scoutmail.org.uk
    //a is image location
    //b is image text
    var e
    var l
    e=screen.width
    l=screen.height
    function displayimage(a,b) {
    if(e!=''){
    var j=
    j=e-10
    PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,copyhistory=0,width=j,height=l");
    }else{
    PreView = window.open("", "Preview", " toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=0,copyhistory=0,width=600,height=400");
    }
    PreView.document.open();
    PreView.moveTo(0,0);
    PreView.document.write("<HTML><HEAD>");
    PreView.document.write("<TITLE>VIEW IMAGE</TITLE>");
    PreView.document.write("</HEAD><BODY BGCOLOR=FFFFFF TEXT=>");
    PreView.document.write("<FORM>");
    PreView.document.write("<IMG HSPACE=0 VSPACE=0 " + "SRC=" + a + ">");
    PreView.document.write("<P><CENTER>"+ b +"</CENTER></P>");
    PreView.document.write("<HR><CENTER><FORM><INPUT TYPE='button' VALUE='Close' " + "onClick='window.close()'></FORM></center>");
    PreView.document.write("</CENTER>");
    PreView.document.write("</BODY></HTML>");
    PreView.document.close();
        }
    // done hiding -->	
    </SCRIPT>
    and for each image use

    <a href="#" onClick="mypopuppic.jpg','my image text')"><img src="Thumbs/mythumbnail.jpg"></a>

    if you want no text to apper in the popup just change my image text to nothing so it reads:

    <a href="#" onClick="mypopuppic.jpg','')"><img src="Thumbs/mythumbnail.jpg"></a>


    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Scroots

    Better to use "javascript://" for the href, rather than "#", becuase "#" in a link will scroll to the top of the page. Very annoying.

    Even better to use

    <a href="mypopuppic.jpg" onClick="this.href,'my image text');return false;"><img src="Thumbs/mythumbnail.jpg"></a>
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    UK
    Posts
    1,137
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nice suggesation beetle, i will update my script.

    Ps. i made a slight typo in my script it shoulds be
    <a href="#" onClick="displayimage('pic.jpg','my image text')"><img border="0" src="pic.jpg" width="241" height="158"></a>

    so i could use
    <a href="javascript:displayimage('pic.jpg','my image text')"><img border="0" src="pic.jpg" width="241" height="158"></a>


    scroots
    Spammers next time you spam me consider the implications:
    (1) that you will be persuaded by me(in a legitimate mannor)
    (2)It is worthless to you, when i have finished

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    England =)
    Posts
    523
    Thanks
    26
    Thanked 0 Times in 0 Posts
    thx guys - the script works perfectly
    "They hired me for my motivational skills. Everyone at work says they have to work much harder when I`m around" Homer J Simpson


  •  

    Posting Permissions

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