 | | |
|
ToddAndrae
User
Aug 29, 2003, 9:50 AM
Post #1 of 39
(15610 views)
Shortcut
|
|
Resize Window - fit to image
|
Can't Post
|
|
I haven't really looked at the one posted in the Javascript thread, but I felt like posting the one we have been using on our site for a little while now.
code placed in the head section of the page -
function imageWindow(imageURL, imageDescription){
var popImageWin = window.open('' , 'imgwin' , 'width=400, height=400, top=40, left=40, status=no, toolbar=no, menubar=no , location=no');
with(popImageWin.document){
write('<html><head><title>');
write(imageDescription);
write('</title>');
write('<style>body{margin: 0px;}</style></head>');
write('<body onLoad="self.focus();" onBlur="window.close();"><img id="pic" style="display: none" /><span style="width: 100%; text-align: center;">');
write(imageDescription);
write('</span></body></html>');
close();
}
var img = new Image();
img.onload = function() { sizeImgWin(popImageWin, img) };
img.src = imageURL;
}
function sizeImgWin(win, img){
var new_w = img.width;
var new_h = img.height;
var old_w = win.innerWidth || win.document.body.offsetWidth;
var old_h = win.innerHeight || win.document.body.offsetHeight;
if (!new_w) { new_w = old_w; }
if (!new_h) { new_h = old_h; }
new_w -= old_w;
new_h -= old_h;
new_h += 30;
win.resizeBy(new_w,new_h);
var pic = win.document.getElementById('pic');
pic.src = img.src;
pic.style.display = 'block';
}
individual links to the images -
<a href="http://www.kpdk.com/rm/listings/images/$file$" onclick="imageWindow(this.href, '$desc$'); return false;" onmouseover="window.status='$desc$'; return true" onmouseout="defaultStatus=' ';">
<img src="./images/$file$" width="150" alt="$desc$" style="display: block;" />
</a>
This will create a pop-up with the picture description as the title, it will also place the description beneath the picture and then resize the window to fit.
You can see it in action here. http://www.kpdk.com/rm/listings/l0006.html
|
|
| |
|
Benjamin
Staff
Aug 29, 2003, 12:52 PM
Post #2 of 39
(15592 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi Todd,
Thanks very much for posting! I actually prefer this script to our current one, since when you click off the popup it automatically closes the window - nice!
Do you happen to know who wrote it? I'd add it to the Useful Javascripts thread if I knew I wasn't treading on anyone's toes! :-)
Ben
interactivetools.com
|
|
| |
| | |
|
dedbob
User
Aug 30, 2003, 12:42 PM
Post #4 of 39
(15561 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Not to rain on anyone's parade, but this doesn't work on Mac OS9 with IE 5.1. Also doesn't work on Mac OSX IE 5.2.1. It pops up the window, but it doesn't resize correctly and forces you to scroll left and right to see the full photo. In addition, the close window doesn't function on a Mac either. I tried 3 different machines, and all 3 are a no go  .
I did however, add the close window functionality to the popup window resizer I'm using on my Corvette site (check my signature). I haven't added the description portion because I don't really want that part on my site.
If anyone wants it, let me know  .
Thanks,
Scott
Need ImageMagick? GD.pm? You need to GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
(This post was edited by dedbob on Aug 30, 2003, 12:51 PM)
|
|
| |
|
dedbob
User
Sep 2, 2003, 9:17 AM
Post #6 of 39
(15516 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Here you go... I tested a few of the pics and it seems that the window is always the same size. This one is of a large pic which causes you to scroll left/right and up/down. Window can't be resized with mouse either. Mac OSX with IE 5.2. OS9 is really difficult to get a screenshot, but it looks the exact same way as this one.
Hope this helps.
Thanks,
Scott
Need ImageMagick? GD.pm? You need to GetStacked!
Listings Manager friendly Cheap Web Hosting only $5.95 a month!
|
|
Attachments:
|
screen.jpg
(45.2 KB)
|
|
| |
|
ToddAndrae
User
Sep 3, 2003, 7:21 AM
Post #7 of 39
(15488 views)
Shortcut
|
|
Re: [dedbob] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
I made a few modifications to the script, pretty much just combined the two. If you could give it a look and see if it works I would appreciate it
http://www.kpdk.com/popup/
|
|
| |
|
Donna
Staff
/ Moderator
Sep 3, 2003, 1:36 PM
Post #8 of 39
(15463 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi Todd,
Thanks for your post. :)
I sent your link over to our Mac Guy, and he says this:
They work find in Camino 0.7 (Mozilla based), and they sort of work with Safari 1 and IE 5.2... Though with Safari the pop-up window ends up being bigger than it should, and in IE it's smaller than it should be (i.e. half as small as the image).
So it doesn't look like you've quite got the effect you're going for yet on a Mac, but you're getting there. :)
Donna
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
stevec
User
Sep 7, 2003, 2:44 PM
Post #9 of 39
(15422 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Todd,
Any chance you could modify that script to have the following functionality?:
If more than one picture exists with the listing, have a "next" and "previous" button so the viewers could tour all photos without clicking and closing and reopening over and over again. They would just click the arrow or "next" button.
This is somethig I've been hoping RM would add in. See an example at:
http://www.austinlandlord.com/property/for_rent.php?listingID=87&imageID=234&type=listing
Steve
|
|
| |
|
ToddAndrae
User
Sep 8, 2003, 4:20 AM
Post #10 of 39
(15406 views)
Shortcut
|
|
Re: [stevec] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
I was actually working on this at the time you added the reply, how strange is that...
This is the general idea right now...there is still a lot of work to be done to it. Should be done by the end of the week though
http://kpdk.com/popup/gallery.html
|
|
| |
|
stevec
User
Sep 8, 2003, 6:56 AM
Post #11 of 39
(15399 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Wow, that's awsome! My suggestion would be to make the navigation look like this:
<Previous 1 2 3 4 5 6 7 8 Next>
I suspect almost everyone viewing photos like this would click "Next" and so it ought to be the easiest most obvious selection.
How easy would this be to implement as an addon? Would it mess with upgrades or have to be reinstalled after every upgrade?
Steve
|
|
| |
|
ToddAndrae
User
Sep 8, 2003, 7:17 AM
Post #12 of 39
(15398 views)
Shortcut
|
|
Re: [stevec] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
well this script works with the template file itself, so you only have to modify that page.
The navigation I have planned right now would be:
|<First <<Previous Description 1/? Next>> Last>|
The Script simply creates an array and adds the image src and description as the images load:
<img src="..." alt="..." onLoad="addToArray(this.src, this.alt);">
When the new window opens it will check to see how many images are in the array. I should have a fully working model with navigation and all by the end of this week, so stay tuned to this thread. Hopefully whenever I get it posted I can get a few people on varrying OS and Browsers to test it for me and then I'll hand it over to Ben and the crew and let them go crazy with it
Todd Andrae
|
|
| |
|
ToddAndrae
User
Sep 8, 2003, 9:41 AM
Post #13 of 39
(15391 views)
Shortcut
|
|
Re: [stevec] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
http://www.kpdk.com/popup/gallery.html
I have a semi working model up now, I have to correct it for Mozilla(use innerHTML instead of innerText) and everything should be fine
If someone wants to give it a look on a mac I would appreciate it.
notes:
Right now the images are added to the array in the order that they are loaded, which means I can't control where they appear in the order of the gallery.
|
|
| |
|
Donna
Staff
/ Moderator
Sep 8, 2003, 1:27 PM
Post #14 of 39
(15379 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi Todd,
Nice job! That looks great. :)
Donna
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
ToddAndrae
User
Sep 8, 2003, 1:34 PM
Post #15 of 39
(15378 views)
Shortcut
|
|
Re: [Donna] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Thank you Donna, if you get a chance could you pass it along to your Mac guy and have him look at it.
I have it working in Opera Mozilla and IE...and Lynx(not that that is a big accomplishment...tee hee), just want to make sure it works in any browser possible.
|
|
| |
|
Donna
Staff
/ Moderator
Sep 8, 2003, 3:38 PM
Post #16 of 39
(15367 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi Todd!
Mike's not in today, so I popped over to his computer and was treated(?) to a little OSX... man, if using someone elses computer wasn't complicated enough... entirely new OS? Scary!
Anyhoo, I did manage to find Internet Explorer, Safari, Camino & Mozilla. Here are my findings:
IE: Size of window is slightly off. And, of all the weird problems... clicking "next" on picture 9 takes you back to picture 7. Huh. It also seems to think that there are 15 pictures.
Safari: Doesn't work at all. Pops up a page that says "Loading" with no images and goes no further. When I try to view the file (I get what appears to be a broken image) it seems to be trying to find it in the /popup/gallery/images directory, which of course only has the navigation buttons, not the actual house images.
Camino: Almost works -- size of window is slightly off, same as IE. It, at least, recognizes how many files are supposed to go there. :)
Mozilla: Oh so close! The only snag is that the bottom right corner of Mozilla covers up the "go to end" icon there -- everything else works perfect.
I hope this helps! :)
Donna
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
Si
User
Sep 9, 2003, 3:07 AM
Post #17 of 39
(15347 views)
Shortcut
|
|
Re: [Donna] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
This is looking really good and I will definitely be implementing it once it is ready to go. I have been looking for something like this for a while.
One quick question, will this work with the new thumbnail feature in RM? It just crossed my mind and I thought that it was worth an ask...
Great work...
Cheers
Si
http://www.turkish-homes.com
Turkish Homes
(This post was edited by Si on Sep 9, 2003, 6:09 AM)
|
|
| |
|
Si
User
Sep 9, 2003, 8:46 AM
Post #19 of 39
(15323 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi
I would really recommend using the thumbnail feature, it has reduced the size of my pages by about 40%
Here are two examples of named files from my site:
136_1_t.jpg - thumbnail
136_1.jpg - larger image naming convention - I think that this is the same as it was before.
This is the call that is made <img src="$listing_url$/images/$thumbnail$" width=$thumbnail_width$ border=1 alt="">
I hope that this is enough info for you. If not I am sure that Donna will be able to help
Cheers
Si
Turkish Homes
|
|
| |
|
ToddAndrae
User
Sep 9, 2003, 12:20 PM
Post #20 of 39
(15310 views)
Shortcut
|
|
Re: [Donna] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Okay I have the galleryArray function working, with the feature of removing the '_t' from thumbnails. I am still working on getting the bugs out as far as the window resizing goes.
The problem, as far as I can tell with Safari was that I wasn't using absolute links...and with IE thinking that there were 15 pictures...I am stumped on that one, really wish I had a Mac so I could figure out what was causing that.
I am going to completley rewrite the code for the image resizer, since I just used the one Dedbob was using, it seems to give me problems in Mozilla and Opera. In Mozilla it will open up at the right height but the width will be way too narrow.
Anyone who wants to test out what I have so far go to: http://www.kpdk.com/popup/gallery.html
It works in IE and sometime Mozilla
I think the window resizer is the only thing holding this back right now. So like I said by the end of the week it should be done
|
|
| |
|
Donna
Staff
/ Moderator
Sep 9, 2003, 12:34 PM
Post #21 of 39
(15306 views)
Shortcut
|
|
Re: [ToddAndrae] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
Hi Todd!
One thing I did notice in IE 6 on XP is that the list of images doesn't show up "in order"... by that, I mean I look at the thumbnails and see Backyard, Bedroom, Bedroom, Dining Room, etc... but clicking on them, in order, lists #4, #2, #1, #6, etc.
Minor detail, but I thought I'd mention. :)
Donna
Hire me!
Save time by getting our experts to help with your project. Template changes, advanced features, full integration, whatever you need. Whether you need one hour or fifty, get it done fast with Priority Consulting.
|
|
| |
|
Joey
User
Sep 29, 2003, 11:07 PM
Post #22 of 39
(15033 views)
Shortcut
|
|
Re: [Donna] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
By the way, this is something we have all ben waiting for , for about a year and a half, so KUDOS for getting it going!!!!
Joey Stubblefield
http://Used-CarLots.com
Powered By Auto Manager!
http://1000Cars.com
Powered By Auto Manager!
http://MeetingStreetMotors.com
Powered By Used-CarLots.com Via Auto Manager!
(This post was edited by Joey on Sep 29, 2003, 11:10 PM)
|
|
| |
| | |
|
ToddAndrae
User
Oct 1, 2003, 5:57 AM
Post #24 of 39
(15001 views)
Shortcut
|
|
Re: [leeshields] Resize Window - fit to image
[In reply to]
|
Can't Post
|
|
well, I am still trying to get the resize to work in other browsers(read: not IE). It seems in IE, it resizes fine, but going to Mozilla or another browsers it either goes slightly too small or slightly too big. I have been really busy at work so I haven't had a lot of time to mess with it, I will try and get a final version up by the end of the month. For now you can download the ZIP , I added comments so everyone can see what's going on and possibly help me figure out where I am going wrong.
http://www.kpdk.com/popup/popupGallery.zip
|
|
| |
|
1
