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 11 of 11
  1. #1
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts

    image pop-up question?

    Hello,
    I'm wondering if it's possible to be able to click on an image and have it pop up in a window that is the right size for the image, i've seen asp components that do this, but i'm unable to run any components, so thought that maybe javascript could do it?

    if so, how some one please show me an example of how to do this?
    as I'm not very familar with javascript.


    thanks in advance for your time!
    Ken

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Posts
    194
    Thanks
    5
    Thanked 0 Times in 0 Posts
    This is one that i use on my website, doesn't open a seperate browser window for the popup, but rather creates a popup using dragable divs.

    Add this code into your HEAD section:
    Code:
    <script type="text/javascript">
    var ie=document.all
    var ns6=document.getElementById&&!document.all
    
    function ietruebody(){
    return (document.compatMode && document.compatMode!="BackCompat" && !window.opera)? document.documentElement : document.body
    }
    
    function enlarge(which, e, position, imgwidth, imgheight){
    if (ie||ns6){
    crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage
    if (position=="center"){
    pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)
    horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2
    vertpos=ns6? pgyoffset+window.innerHeight/2-imgheight/2 : pgyoffset+ietruebody().clientHeight/2-imgheight/2
    if (window.opera && window.innerHeight)
    vertpos=pgyoffset+window.innerHeight/2-imgheight/2
    vertpos=Math.max(pgyoffset, vertpos)
    }
    else{
    var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX
    var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY
    }
    crossobj.style.left=horzpos+"px"
    crossobj.style.top=vertpos+"px"
    
    crossobj.innerHTML='<div align="right" id="dragbar"><img src="images/close.gif" onClick="closepreview()" style="cursor:hand" border="0"></div><div align="center" id="imageview"><img src="'+which+'"></div>'
    crossobj.style.visibility="visible"
    return false
    }
    else
    return true
    }
    
    function closepreview(){
    crossobj.style.visibility="hidden"
    }
    
    function drag_drop(e){
    if (ie&&dragapproved){
    crossobj.style.left=tempx+event.clientX-offsetx+"px"
    crossobj.style.top=tempy+event.clientY-offsety+"px"
    }
    else if (ns6&&dragapproved){
    crossobj.style.left=tempx+e.clientX-offsetx+"px"
    crossobj.style.top=tempy+e.clientY-offsety+"px"
    }
    return false
    }
    
    function initializedrag(e){
    if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){
    offsetx=ie? event.clientX : e.clientX
    offsety=ie? event.clientY : e.clientY
    
    tempx=parseInt(crossobj.style.left)
    tempy=parseInt(crossobj.style.top)
    
    dragapproved=true
    document.onmousemove=drag_drop
    }
    }
    
    document.onmousedown=initializedrag
    document.onmouseup=new Function("dragapproved=false")
    </script>
    Open (or create) a style.css file and add this code into it:
    Code:
    #showimage {
    position: absolute;
    visibility: hidden;
    background-color: #000000;}
    
    #dragbar {
    border: 1px solid #2854F8;
    background-color: #222222;
    min-width: 128px;}
    
    #imageview {
    border-top: 0px;
    border-left: 1px solid #2854F8;
    border-right: 1px solid #2854F8;
    border-bottom: 1px solid #2854F8;
    background-color: #000000;
    padding: 10px;
    vertical-align: center;}
    Change the colours to whatever you want, those are just the colours for the style of my website. Now you just need the file close.gif for the close button of the popup, you can use the one from my website which can be found here:

    http://www.derelictstudios.net/acid/images/close.gif

    To open the image popup window simply create a hyperlink like this:
    Code:
    <a href="images/yourimage.jpg" target="_blank" onClick="return enlarge('images/yourimage.jpg',event,'center',width,height)">your text or image for link</a>
    Naturally replace yourimage with the name of the image you want to open, replace width with the width of the image to open in pixels, and replace height with the height of the image to open in pixels.

    In the event that the users browser doesn't support JavaScript then the image will simply open in a separate window.

    Last edited by Acid; 06-24-2004 at 03:37 PM.

  • #3
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    Naturally replace yourimage with the name of the image you want to open, replace width with the width of the image to open in pixels, and replace height with the height of the image to open in pixels.
    but thats the problem, i need the size to be dynamic, I wont the size of every image.

    can this still be done?

    thanks again for your time!
    Ken

  • #4
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by angst
    but thats the problem, i need the size to be dynamic, I wont the size of every image.

    can this still be done?

    thanks again for your time!
    Ken

    Reread Acid's post....
    What you are asking for is all there within the anchor.....

  • #5
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok,
    sorry, but i guess i don't understand this part:

    "replace width with the width of the image to open in pixels, and replace height with the height of the image to open in pixels."

    I'm not sure what he wants me to replace then,?

    Sorry if i'm just not seeing it.
    Thanks again.
    Ken

  • #6
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'll highlight it in red for you.
    (BTW: I changed the image pointer within the script call since there is no need to repeat what is already present in the href)

    <a href="images/yourimage.jpg" target="_blank" onClick="return enlarge(this.href,event,'center',100,100)">your text or image for link</a>
    FWIW: If does not exactly fit your needs and you would rather have the script auto detect the image size. Try searching this forum. This question has been asked and answered numerous times.

    .....Willy

  • #7
    Senior Coder angst's Avatar
    Join Date
    Apr 2004
    Location
    Toronto, Ontario
    Posts
    2,114
    Thanks
    15
    Thanked 122 Times in 122 Posts
    ok, i understand what you mean now,
    thanks for all your help!

    Ken

  • #8
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    hmm i cant find anything on the auto detection of image size for pop-ups!!!

    i'm using the singapore PHP image gallery on my site http://detatched.net/manifest/images/

    and i can get the popups to open in a fixed window, but i really want to have a script to automatically determine the dimensions of the image and generate the apppropriate pop-up window size accordingly.

  • #9
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Try searching this forum using the keywords: popup image size

    .....Willy

  • #10
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    guess i was just using the wrong words

    also, i have a script, quite simple.

    <a href="<?php echo $sg->imageURL() ?>" target="_blank" onclick="window.open('<?php echo $sg->imageURL() ?>','','toolbar=0,width=<?php echo $sg->imageWidth() ?>-20,height=<?php echo $sg->imageheight() ?>-20');return false;"><?php echo $sg->imageThumbnailImage() ?></a>

    its from the singapore php gallery script, it opens up linked thumbnails in a new pop-up window and sized according to the image dimensions. but i cant find any code to apply to this code to make the pop-up open in the centre of the screen.

    any suggestions?
    thanks.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts


  •  

    Posting Permissions

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