/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] a script called "showpic" how can i modify it to…

Copy linkTweet thisAlerts:
Jul 22.2006

Hi!

On this page, ([URL=http://javascript.internet.com/page-details/dynamic-sized-image.html]http://javascript.internet.com/page-details/dynamic-sized-image.html[/URL]) i saw this script and i want to use with images on resizable popup windows. This script will proportionally resize a graphic to fit within the current window when a page is loaded/resized. I just added a reload onresize to skip manually reloading the page. The problem is, that i can use it for only one image and it’s dimensions.

[URL=http://www.mazingerzpr.net/jshelp/showpic.html]click here to se it working[/URL], resize the window and see!
[URL=http://www.mazingerzpr.net/jshelp/showpic-code.htm]Here’s the code of my [I]showpic.html[/I][/URL]:

[B]<html>
<HEAD>
<title>ShowPic</title>
<SCRIPT LANGUAGE=”JavaScript”>
<!– 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 = “middle”;
if(pw == null) pw = 100;
if(ph == null) ph = 100;
if(bw == null) bw = 0;
if(bh == null) bh = 0;
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>
<BODY onResize=”history.go(0);” topmargin=”0″ leftmargin=”0″ rightmargin=”0″ bottommargin=”0″ marginwidth=”0″ marginheight=”0″>

<script language=”javascript”>
showpic(“0001.JPG”,480,640,” Image “, “middle”);
</script>

</body>

</html>[/B]

Is there a way to change this script to open any image in stead of only one?

[URL=http://www.mazingerzpr.net/jshelp/]This link explains this, with some images, and examples[/URL]

I have a page (image-opener.html) i’m using to open any image, at any size. Just have to set the image url after the “?”, and image’s W and H values on the link. Like this:

[URL=http://www.mazingerzpr.net/jshelp/image-opener.html?0003.JPG&427&641]image-opener.html?0003.JPG&427&641[/URL]

[URL=http://www.mazingerzpr.net/jshelp/image-opener-code.htm]code for [I]image-opener.html[/I][/URL]:

[B]<html>
<HEAD>
<title>image-opener</title>
</head>

</HEAD>
<body topmargin=0 leftmargin=0 bgcolor=black rightmargin=”0″ bottommargin=”0″ marginwidth=”0″ marginheight=”0″ scroll=”auto”>

<SCRIPT LANGUAGE=”JavaScript”>
<!–
this.window.focus();

querystring = this.location.search.substring(1,this.location.search.length);
pairs = new Array();
pairs = querystring.split(‘&’);

var quote = ‘”‘;
document.write(‘<img src=’ + ‘”‘ + pairs[0] + ‘”‘ + ‘ WIDTH=’ + pairs[1] + ‘ HEIGHT=’ + pairs[2] + ‘ ><BR>’);
// –>
</SCRIPT>

</html>[/B]

I’m very new to JS and have no idea how to make it work the way i want.
I was thinking on changing this line:
[B]showpic(“0001.JPG”,480,640,” Image “, “middle”);[/B]
to this
[B]showpic(‘+'”‘+pairs[0]+'”‘+’,’+pairs[1]+’,’+pairs[2]+’,”Image”, “middle”);[/B]
but it didn’t!!

Any ideas!

THANKS IN ADVANCE!!!

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@gil_davisJul 22.2006 — It all depends on how you call it. If you use an anchor (like maybe around a thumbnail) you can do this:
&lt;a href="0001.jpg" onclick="showpic(this.href,480,640,' Image ','middle');return false"&gt;&lt;img src="..."&gt;&lt;/a&gt;
Clicking on the link will open the picture in the href, and if the user does not have js enabled, it just opens the picture in the same window.
Copy linkTweet thisAlerts:
@DUKE-01authorJul 23.2006 — hummm... ? ? didn't work. with js enabled or not, it just opened the picture, [B][URL=http://www.mazingerzpr.net/jshelp/002.htm]SEE HERE[/URL][/B].. added later the script to the "head" of the html where the thumbnails are, and clicking on the link will now open the picture in the href, but in the same window, not a popup, with dimensions according with the window size, [B][URL=http://www.mazingerzpr.net/jshelp/003.htm]SEE HERE[/URL][/B] ... but if i resize the window, the picture keeps the same dimensions.
Copy linkTweet thisAlerts:
@gil_davisJul 23.2006 — Sorry, I didn't pay much attention to what the script actually does when I suggested how to make it open any picture. The script isn't set up to open a new window. It would take quite a bit of rework to change the script to open the pic in a new window.

If you want something that opens a pop-up that is already finished and working, you can try my page at http://gil.davis.home.att.net/openit_example.htm . It sizes the new window to the picture, but doesn't resize if you drag the edges. However, if the image is larger than the screen, it will make it as big as it can get.
Copy linkTweet thisAlerts:
@DUKE-01authorJul 26.2006 — ... The script isn't set up to open a new window...[/QUOTE]

I know, but [I][B][URL=http://www.mazingerzpr.net/jshelp/]open this link here[/URL] [/B][/I], see how the image-opener.html with a string, opens images 2 and 3 on a new window:

[B]url_of_image-opener.html[/B]?[B]image_url[/B]&[B]image_W[/B]&[B]image_H[/B]

always called the links like you said...;

image 2:

<A HREF="javascript:void(0)" onClick="window.open('image-opener.html?0002.JPG&960&1280','','width=960,height=1280,toolbar=0,scrollbars=no,resizable=yes')">

image 3:

<A HREF="javascript:void(0)" onClick="window.open('image-opener.html?0003.JPG&427&641','','width=427,height=641,toolbar=0,scrollbars=no,resizable=yes')">

...but i know the images won't resize if i drag the edges and that is just what i want.


I have a really BIG number of pictures i want to post with this feature, and i'm trying to avoid making a page for every single image.

The solution must be there, but where?? ? ?
Copy linkTweet thisAlerts:
@gil_davisJul 26.2006 — See attached.

[upl-file uuid=31ef8559-44b7-4aa3-9760-bd55ce961bb8 size=1kB]image-opener.html.txt[/upl-file]
Copy linkTweet thisAlerts:
@DUKE-01authorJul 26.2006 — YESSS!!! it works!!! ? ?

I'm very very greatfull for your help.

The rework wasn't that hard after all huh? he he.

[URL=http://www.mazingerzpr.net/jshelp/]go here, and open the opener[/URL] and check it's code, added a very well-deserved credit!

Thanks!!! ?
×

Success!

Help @DUKE-01 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...