Click to See Complete Forum and Search --> : How to create a custom pop up


MacDiiddy
04-26-2007, 11:45 PM
I have a bit of HTML knowledge and I have taken over my rugbys team website, The website comes with a HTML editor which makes it easy so i dont have to bother with codes as much, but now i want to make it so when you click on a picture a pop up comes up that is about 500x500 pixels has no tool bar or scroll bar, i have seached for codes and such and basiclly i have come to the deduce that the only way to get the pop up i envision is this true?

MacDiiddy
04-27-2007, 12:18 AM
I have tried to mix the javascript with my page but im having trouble

1. understanding the code
2. when i find a code that works, getting it to work on the exact picture i already have set in a frame, to elaborate, when i actually found a code that worked i couldnt figure out how to set it to the exact picture already set where i wanted it on the page, the page consist of pictures of all the players on the team, with their names by it http://www.michianarugby.org/players.html

4. I long deleted that code in my efforts to try other things to work and can not find it again

any help would be fantastic

Suhas Dhoke
04-27-2007, 01:50 AM
Hello MacDiiddy.

You wants, if anyone clicks on the image, the image will be open in a new window with whatever you size mentioned.. Right ?

If so, then here is code for the same.

<script>
function zoom() {
var winl = (screen.width - 475) / 2;
var wint = (screen.height - 325) / 2;
winprops = 'height=325,width=475,top='+wint+',left='+winl+',scrollbars=no,resizable'
win = window.open('your_image_path', 'your_title', winprops);
if (parseInt(navigator.appVersion) >= 4) {
win.window.focus();
}
}
</script>

<img src="your_image_path" width="40" height="40" style="cursor: pointer;" title="Click To Zoom" onclick="zoom();" />

MacDiiddy
04-27-2007, 08:04 AM
Not exactly I want it to open to a set sized window, which can will still have text and i can edit for each player

Major Payne
04-27-2007, 11:58 PM
See if this works for you:

Between HEAD tags:

<script type="text/javascript">
<!-- Begin
var win = null;
function newWindow(mypage,myname,w,h,features) {
var winl = (screen.width-w)/2;
var wint = (screen.height-h)/2;
if (winl < 0) winl = 0;
if (wint < 0) wint = 0;
var settings = 'height=' + h + ',';
settings += 'width=' + w + ',';
settings += 'top=' + wint + ',';
settings += 'left=' + winl + ',';
settings += features;
win = window.open(mypage,myname,settings);
win.window.focus();
}
// End -->
</script>

Between the BODY tags for each image:

a href="#null" onClick="newWindow('images/photos/pix1-41/pic001s.jpg','','600','400','resizable,scrollbars,status,toolbar')" title="Click to see original, opens in new window"><img src="images/thumbnails/thm_pic001s.jpg" border="1" height="150" width="200" align="middle" alt="Original file name : 100_0755.jpg" /><br />The Infamous Beach Party<br />Spring, '04</a>

Set thumbnail size to image size you are using for them, set the '600', '400' for the size of the popup window that will fit each original image. Set proper paths for thumbnails and original image. Set caption ( The Infamous Beach Party<br />Spring, '04 ) to whatever you want for each image. See SAEMG.com (http://www.saemg.com/photos.html) for this in action. Bad thing about the JS is a viewer has to have JS enabled.

Ron

MacDiiddy
04-28-2007, 12:14 AM
alright see that just blows up the picture in another window, what im trying to do is like, in that SAEMG.com example anytime you click on a person a new window will pop up and it will be a miny page that has like their picture and things next to it saying things about them and stats so forth and so on

Major Payne
04-28-2007, 12:38 AM
Well, I wasn't really blowing up any images when I did that site. What I did was make thumbnails of all images they wanted to use to one size. Then when the thumbnail was clicked, it loaded the original image. Many which they didn't want reduced in file size. I left the popup window the same size for all images rather than tailor them to each original's size.

I imagine there's a work around to have the text appear in the popup window along with your image. Maybe someone else can use the code above and get something going for you right away. It'll be awhile until I can work on seeing about getting it where you have your data and image appear in popup window.

Why not use it as is for now just to get you started?

Ron