...

View Full Version : image pop-up question?



angst
06-24-2004, 03:38 PM
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

Acid
06-24-2004, 04:20 PM
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:


<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:


#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:


<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.

;)

angst
06-24-2004, 05:18 PM
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

Willy Duitt
06-24-2004, 05:23 PM
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.....

angst
06-24-2004, 05:42 PM
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

Willy Duitt
06-24-2004, 05:59 PM
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

angst
06-24-2004, 06:17 PM
ok, i understand what you mean now,
thanks for all your help!

Ken :thumbsup:

corrupted
08-31-2004, 04:43 PM
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.

Willy Duitt
08-31-2004, 04:59 PM
Try searching (http://www.codingforums.com/search.php?) this forum using the keywords: popup image size

.....Willy

corrupted
09-01-2004, 10:38 AM
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.

glenngv
09-01-2004, 10:57 AM
http://www.codingforums.com/showthread.php?t=9836&highlight=popup+image+viewer



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum