PDA

Click to See Complete Forum and Search --> : Gallery Viewer with Dynamic Sized Image

Lars B
02-10-2003, 08:20 PM
I am new to JS (1 week old!) and am trying to combine the following two methods:

http://javascript.internet.com/miscellaneous/gallery-viewer.html
http://javascript.internet.com/page-details/dynamic-sized-image.html

I imagine it would be quite simple, I'm just not there yet. I've brutally dismembered the code in my attempt. I'm looking forward to see how they should look when combined. This will greatly increase my JS learning rate.

side info: on my page I changed the mainpic and the thumbnails in the gallery viewer to two separate tables so that they don't stick together. Basically I want to be able to click on a thumbnail, have it pop up into a bigger window, which is proportionate to the size of the internetexplorer/netscape window. Thanks for your help

Lars
(my page i'm working on is http://www.bjerke-web.com/pictures.htm)
Lars B
02-11-2003, 06:31 AM
Well, I've seen a few views and no reply's as my request for assistance moves to the bottom of the pile. Could someone tell me if it is as easy as combing the two scripts, or would it turn into more trouble than it's worth? I really would like to get it working. Thanks for reading, keep up the new development guys n gals. -Lars


(I want to combine (also linked in previous post)):

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Jenny Blewitt (webmaster@webdesignsdirect.com) -->
<!-- Web Site: http://www.webdesignsdirect.com -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>
</HEAD>



WITH

<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Ed Churnside -->
<!-- Web Site: http://www.dragonquest.com/inddpl.htm -->

<!-- Additional documention available online at -->
<!-- http://www.dragonquest.com/dplsspic.htm -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
function showpic(src, w, h, alt, aln, pw, ph, bw, bh) {
if (src == null) return;
var iw, ih; // Set inner width and height
if (window.innerWidth == null) {
iw = document.body.clientWidth;
ih=document.body.clientHeight;
}
else {
iw = window.innerWidth;
ih = window.innerHeight;
}
if (w == null) w = iw;
if(h == null) h = ih;
if(alt == null) alt = "Picture";
if(aln == null) aln = "left";
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 24;
if(bh == null) bh = 24;
var sw = Math.round((iw - bw) * pw / 100);
var sh = Math.round((ih - bh) * ph / 100);
if ((w * sh) / (h * sw) < 1) sw = Math.round(w * sh / h);
else sh = Math.round(h * sw / w);
document.write('<img src="'+src+'" alt="'+alt+'" width="'+sw+'" height="'+sh+'" align="'+aln+'">');
}
// End -->
</script>
</HEAD>
pyro
02-11-2003, 08:24 AM
I modified the code so that it should do what you want....
Lars B
02-11-2003, 09:20 AM
You're awsome, thanks Pyro. You got the concept I was going for, I should be able to manipulate this code into exactly what I'm going for. Thanks again! Lars
pyro
02-11-2003, 09:26 AM
You're welcome. If you have any trouble with it, let me know.
Lars B
02-11-2003, 10:04 AM
Well I changed it around a bit, only problem I have is some of the pictures are a bit too big and make the user scroll the browser window. However the easiest fix for that may just to go into a photoeditor and resize them. Here's what my page looks like:
pyro
02-11-2003, 10:59 AM
Post a link, so I can see it...And, did you want something changed, or were you just posting your code?
Reno
02-11-2003, 12:01 PM
Pyro -- Would it be difficult to adjust this script so the user could define both the width and the height for each image, so the image would not stretch across the entire window? Everything else would stay exactly as you provided. I tried playing with it, to make that happen, but failed miserably, so am turning to the source for guidance...
pyro
02-11-2003, 12:33 PM
It is actually far easier to do it that way. Take a look at the attached code...
Lars B
02-11-2003, 12:37 PM
It is possible, I had it that way for a bit - but since my images are not all square in shape - It would stretch some to an awful looking state. check out the updated code below - but also before seriously changing your script look at the lines:

iw = document.body.clientWidth/2;
ih=document.body.clientHeight/2;

I added the /2 (divided by 2) which cuts the image to half it's size [which made it fit nicely on my webpage! without the other change] -lars
Reno
02-11-2003, 12:51 PM
Thanks Pyro -- that works perfectly. Nice script.

Lars -- the sizes of the pictures do not need to be the same. I tested Pyro's code with 3 different images, all of varying sizes, and each loaded exactly right as long as they are defined...
pyro
02-11-2003, 12:52 PM
You're welcome. :)

Originally posted by Lars B
It would stretch some to an awful looking stateNot if you use my code. You can specify both the width and the height, so it won't stretch it at all.
Lars B
02-11-2003, 01:08 PM
That is how my page used to be, if you click on the Gallery view link in my first posting, it's pretty much the same as that. My whole goal here, which you solved, was to make it so if someone makes their window smaller, they till see the whole picture (though smaller...or larger) without having to scroll. -lars;)
pyro
02-11-2003, 01:11 PM
I know, but Reno wanted it the other way, and that is what the second bit of code was about. :D

Cheers...