ASP thumb to large image

[Basr]

I have an ASP page that presents the results of a query. The page gives from
every found record normal data but also an image. This is a thumbnail. It is
my purpose that a bigger image will be showed as soon as you click on the
thumbnail. I do not know how I have to do this. Can someone help?

Here is the code that shows the results from the query:

--------------
Set rsItems = Conn.Execute(strQuery)
if counter > perPagina then rsItems.move(startrecord)
for x = 1 to perPagina
if rsItems.eof then exit for
Response.Write "<B>Image:&nbsp;</B>" & rsItems(0) & "<BR>"
Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "'Border=2>" & "<P>"
Response.Write "<B>Material:&nbsp;</B>" & rsItems(2) & "&nbsp;&nbsp;"
Response.Write "<B>Color:&nbsp;</B>" & rsItems(3) & "<BR>"
rsItems.movenext
next
------------------

I would be nice if the large image will be showed in an other page

I am a beginner in ASP so if you can help me please keep it simpel :-)

Thanks in advance
Marcel

[McKirahan]

"Basr" <mokbck@hetnet.nl> wrote in message
news:c28a2j$1l3$1@reader11.wxs.nl...

> I have an ASP page that presents the results of a query. The page gives

from

> every found record normal data but also an image. This is a thumbnail. It

is

> my purpose that a bigger image will be showed as soon as you click on the
> thumbnail. I do not know how I have to do this. Can someone help?
>
> Here is the code that shows the results from the query:
>
> --------------
> Set rsItems = Conn.Execute(strQuery)
> if counter > perPagina then rsItems.move(startrecord)
> for x = 1 to perPagina
> if rsItems.eof then exit for
> Response.Write "<B>Image:&nbsp;</B>" & rsItems(0) & "<BR>"
> Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "'Border=2>" &

"<P>"

> Response.Write "<B>Material:&nbsp;</B>" & rsItems(2) & "&nbsp;&nbsp;"
> Response.Write "<B>Color:&nbsp;</B>" & rsItems(3) & "<BR>"
> rsItems.movenext
> next
> ------------------
>
> I would be nice if the large image will be showed in an other page
>
> I am a beginner in ASP so if you can help me please keep it simpel :-)
>
> Thanks in advance
> Marcel

This will get you started:

Change
Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "'Border=2>" &
"<P>"
To
Response.Write "&nbsp;&nbsp;<A HREF='" & rsItems(1) & "'
TARGET='_blank'><IMG SCR='" & rsItems(1) & "'Border=2></A>" & "<P>"

Of course if you have images of two different sizes then the HREF referene
will change.

If you have only a large image you could assign a small "WIDTH=" to the
"<IMG" tag...

[Basr]

Thank you very much for your help! I tried the code and it works very well.
Is it very diffcult to show the bigger image in a new page? It would be nice
if the image could be presented in a page in the companie's website-layout.

Till now I use a special form in the resultspage. Visiters can enter the
imagecode in the field and then by pushing the button go to a new page with
the bigger image. I thought this is not convenient enough and a clickable
image would be better. Moreover validating the input caused problems. An
error occurred when a non-numeric character was entered. It was too dificult
for me to validate the input so that empty fields and wrong input was
answered in a correct way.
A clickable image that offers a new page with the bigger image would solve
all the problems.
Bye
Marcel


"McKirahan" <News@McKirahan.com> schreef in bericht
news:lTO1c.478555$na.1148441@attbi_s04...

> "Basr" <mokbck@hetnet.nl> wrote in message
> news:c28a2j$1l3$1@reader11.wxs.nl...

> > I have an ASP page that presents the results of a query. The page gives

> from

> > every found record normal data but also an image. This is a thumbnail.

It

> is

> > my purpose that a bigger image will be showed as soon as you click on

the

> > thumbnail. I do not know how I have to do this. Can someone help?
> >
> > Here is the code that shows the results from the query:
> >
> > --------------
> > Set rsItems = Conn.Execute(strQuery)
> > if counter > perPagina then rsItems.move(startrecord)
> > for x = 1 to perPagina
> > if rsItems.eof then exit for
> > Response.Write "<B>Image:&nbsp;</B>" & rsItems(0) & "<BR>"
> > Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "'Border=2>" &

> "<P>"

> > Response.Write "<B>Material:&nbsp;</B>" & rsItems(2) & "&nbsp;&nbsp;"
> > Response.Write "<B>Color:&nbsp;</B>" & rsItems(3) & "<BR>"
> > rsItems.movenext
> > next
> > ------------------
> >
> > I would be nice if the large image will be showed in an other page
> >
> > I am a beginner in ASP so if you can help me please keep it simpel :-)
> >
> > Thanks in advance
> > Marcel

>
> This will get you started:
>
> Change
> Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "'Border=2>" &
> "<P>"
> To
> Response.Write "&nbsp;&nbsp;<A HREF='" & rsItems(1) & "'
> TARGET='_blank'><IMG SCR='" & rsItems(1) & "'Border=2></A>" & "<P>"
>
> Of course if you have images of two different sizes then the HREF referene
> will change.
>
> If you have only a large image you could assign a small "WIDTH=" to the
> "<IMG" tag...
>
>

[McKirahan]

"Basr" <mokbck@hetnet.nl> wrote in message
news:c29n03$23r$1@reader10.wxs.nl...

> Thank you very much for your help! I tried the code and it works very

well.

> Is it very diffcult to show the bigger image in a new page? It would be

nice

> if the image could be presented in a page in the companie's

website-layout.

>
> Till now I use a special form in the resultspage. Visiters can enter the
> imagecode in the field and then by pushing the button go to a new page

with

> the bigger image. I thought this is not convenient enough and a clickable
> image would be better. Moreover validating the input caused problems. An
> error occurred when a non-numeric character was entered. It was too

dificult

> for me to validate the input so that empty fields and wrong input was
> answered in a correct way.
> A clickable image that offers a new page with the bigger image would solve
> all the problems.
> Bye
> Marcel

1) Define "func" and change your "<img>" tag line to; (watch for
word-wrap):

Dim func
func = "yourpage('" & Chr(34) & rsItems(1) & Chr(34) & "')"
Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "' onclick='" & func
& "'>" & "<P>"

I used your "rsItems(1)" as the name of the larger image but that will
probably change.


2) Then add this to your page (just above the "</head>" tag):

<script type="text/javascript">
function yourpage(img) {
window.open("yourpage.htm?"+img,"","");
}
</script>

Read about "window.open" at:
[url]http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/wi[/url]
ndow.html#1202731


3) Next create a page "in the companie's website-layout" and include the
"<script>" section from the page below.

<html>
<head>
<title>yourpage.htm</title>
</head>
<body>
<center>
<script type="text/javascript">
var img = location.search;
img = img.substr(1,img.length);
var tag = "<img src='" + img + "' border='0' alt='?'>";
document.write(tag);
</script>
</center>
</body>
</html>

Basically, you pass in the filename of the larger image which "yourpage.htm"
displays.


You can test "yourpage.htm" standalone; just save it in a folder with an
image (say "image.gif") then call it via
http://{your_domain}/{your_folder}/yourpage.htm?image.gif.

[Basr]

"McKirahan" <News@McKirahan.com> schreef in bericht
news:FH22c.184901$uV3.782360@attbi_s51...

> "Basr" <mokbck@hetnet.nl> wrote in message
> news:c29n03$23r$1@reader10.wxs.nl...

> > Thank you very much for your help! I tried the code and it works very

------
------

>
> 1) Define "func" and change your "<img>" tag line to; (watch for
> word-wrap):
>
> Dim func
> func = "yourpage('" & Chr(34) & rsItems(1) & Chr(34) & "')"
> Response.Write "&nbsp;&nbsp;<IMG SCR='" & rsItems(1) & "' onclick='" &

func

> & "'>" & "<P>"
>
> I used your "rsItems(1)" as the name of the larger image but that will
> probably change.
>
>
> 2) Then add this to your page (just above the "</head>" tag):
>
> <script type="text/javascript">
> function yourpage(img) {
> window.open("yourpage.htm?"+img,"","");
> }
> </script>
>
> Read about "window.open" at:
>

[url]http://devedge.netscape.com/library/manuals/2000/javascript/1.3/reference/wi[/url]

> ndow.html#1202731
>
>
> 3) Next create a page "in the companie's website-layout" and include

the

> "<script>" section from the page below.
>
> <html>
> <head>
> <title>yourpage.htm</title>
> </head>
> <body>
> <center>
> <script type="text/javascript">
> var img = location.search;
> img = img.substr(1,img.length);
> var tag = "<img src='" + img + "' border='0' alt='?'>";
> document.write(tag);
> </script>
> </center>
> </body>
> </html>
>
> Basically, you pass in the filename of the larger image which

"yourpage.htm"

> displays.
>
>
> You can test "yourpage.htm" standalone; just save it in a folder with an
> image (say "image.gif") then call it via
> http://{your_domain}/{your_folder}/yourpage.htm?image.gif.
>
> ---------------

Thanks again for your detailed response.
I tried the code but this time it did not work. I think I did something
wrong with defining the "func".
When I load the result page I get an errormessage.
Would you give it a glance?


The Resultpage

<HEAD
--
<script type="text/javascript">
function detailtest(img) {
window.open("detailtest.asp"+img,"","");
}
</script>
</HEAD>



Response.Write "<B>Image:&nbsp;</B>" & rsItems(0) & "<BR>"

'Response.Write "&nbsp;&nbsp;<IMG SRC='" & rsItems(1) & "'BORDER=2>" &
"<P>"

'Response.Write "&nbsp;&nbsp;<A HREF='"&rsItems(13)&"'
TARGET='_blank'><IMG SRC='"& rsItems(1)& "'Border=0></A>"&"<P>" ( no
wordwrap)



Dim func

func="detailtest('"& Chr(34) & rsItems(9)& Chr(34)&"')"

Response.Write "&nbsp;&nbsp;<IMG SRC='" & rsItems(1)& "' onclick='" & func
& "'>" & "<P>" ( no wordwrap )

Response.Write "<B>Material:&nbsp;</B>" & rsItems(2) & "&nbsp;&nbsp;"
Response.Write "<B>Color:&nbsp;</B>" & rsItems(3) & "<BR>"
rsItems.movenext
next


-------

The Detailtest.asp page:



<html>

> <head>
> <title>Detailtest.asp</title>
> </head>
> <body>
> <center>
> <script type="text/javascript">
> var img = location.search;
> img = img.substr(1,img.length);
> var tag = "<img src='" + img + "' border='0' alt='Nice image'>";
> document.write(tag);
> </script>
> </center>
> </body>
> </html>

[McKirahan]

"Basr" <mokbck@hetnet.nl> wrote in message
news:c2as2p$qe1$1@reader11.wxs.nl...

> Thanks again for your detailed response.
> I tried the code but this time it did not work. I think I did something
> wrong with defining the "func".
> When I load the result page I get an errormessage.
> Would you give it a glance?

Change
func="detailtest('"& Chr(34) & rsItems(9)& Chr(34)&"')"
to
func="detailtest("& Chr(34) & rsItems(9)& Chr(34)&")"

I shouldn't have had the apostrophes in there.

[Basr]

"McKirahan" <News@McKirahan.com> schreef in bericht
news:VJb2c.185451$jk2.672633@attbi_s53...

> "Basr" <mokbck@hetnet.nl> wrote in message
> news:c2as2p$qe1$1@reader11.wxs.nl...

> > Thanks again for your detailed response.
> > I tried the code but this time it did not work. I think I did something
> > wrong with defining the "func".
> > When I load the result page I get an errormessage.
> > Would you give it a glance?

>
>
> Change
> func="detailtest('"& Chr(34) & rsItems(9)& Chr(34)&"')"
> to
> func="detailtest("& Chr(34) & rsItems(9)& Chr(34)&")"
>
> I shouldn't have had the apostrophes in there.
>

------------------

I goes a lot better now.
The resultpage can be loaded without an error message
The presented images are 'clickable' but when I click, the detailtestpage
cannot been found.

the adresbox reads the following:
localhost/detailtest.aspproducts/prod587.jpg


products/prod587.jpg is the text in the database that refers to the
place where the image is.

In the <script type="text/javascript"> part I changed the line

window.open("detailtest.asp"+img, "","");

into

window.open("detailtest.asp/"+img,"","");

but this did not solve the problem

Do you have any idea what causes the problem?

[McKirahan]

"Basr" <mokbck@hetnet.nl> wrote in message
news:c2c3gm$mmc$1@reader10.wxs.nl...

>
> "McKirahan" <News@McKirahan.com> schreef in bericht
> news:VJb2c.185451$jk2.672633@attbi_s53...

> > "Basr" <mokbck@hetnet.nl> wrote in message
> > news:c2as2p$qe1$1@reader11.wxs.nl...

> > > Thanks again for your detailed response.
> > > I tried the code but this time it did not work. I think I did

something

> > > wrong with defining the "func".
> > > When I load the result page I get an errormessage.
> > > Would you give it a glance?

> >
> >
> > Change
> > func="detailtest('"& Chr(34) & rsItems(9)& Chr(34)&"')"
> > to
> > func="detailtest("& Chr(34) & rsItems(9)& Chr(34)&")"
> >
> > I shouldn't have had the apostrophes in there.
> >

> ------------------
>
> I goes a lot better now.
> The resultpage can be loaded without an error message
> The presented images are 'clickable' but when I click, the detailtestpage
> cannot been found.
>
> the adresbox reads the following:
> localhost/detailtest.aspproducts/prod587.jpg
>
>
> products/prod587.jpg is the text in the database that refers to the
> place where the image is.
>
> In the <script type="text/javascript"> part I changed the line
>
> window.open("detailtest.asp"+img, "","");
>
> into
>
> window.open("detailtest.asp/"+img,"","");
>
> but this did not solve the problem
>
> Do you have any idea what causes the problem?

You removed the "?" from the "window.open" -- try:

window.open("detailtest.asp?"+img, "","");

It should read:

localhost/detailtest.asp?products/prod587.jpg

The question mark indicates the start of a QueryString.

[Basr]

> You removed the "?" from the "window.open" -- try:
>
> window.open("detailtest.asp?"+img, "","");
>
> It should read:
>
> localhost/detailtest.asp?products/prod587.jpg
>
> The question mark indicates the start of a QueryString.
>
>

-------
That's right. I thougt the ? was for the htmL wich sometimes is used and
sometimes not!
Stupid from me.

The change has improved the whole operation but still there is something
wrong.
After the correction, the detailtest is loaded in a new window. On the place
where the picture should be, there's only a small icon with the red X
visible.

The adres reads now:
localhost/detailtest.asp?products/prod587.jpg

I checked if the image realy was on the place where it should be, and it is.
I give the total code:





RESULTSPAGE.ASP

--------------------------



<script type="text/javascript">

function detailtest(img) {

window.open("detailtest.asp?"+img,"","");

}

</script>





Dim func

func="detailtest("& Chr(34)& rsItems(9)& Chr(34)&")"

Response.Write "&nbsp;&nbsp;<IMG SRC='"& rsItems(1)& "'onclick='"& func
&"'>" & "<P>"







DETAILTEST.ASP

------------------------



<center>

<script type="text/javascript">

var img =location.search;

img = img.substr(1,img.lenght);

var tag = "<img src='" + img + "'border='0' alt='Large image'>";

document.write(tag);

</script>

</center>


Thanks
Marcel

[McKirahan]

"Basr" <mokbck@hetnet.nl> wrote in message
news:c2etpo$d3s$1@reader10.wxs.nl...

>

> > You removed the "?" from the "window.open" -- try:
> >
> > window.open("detailtest.asp?"+img, "","");
> >
> > It should read:
> >
> > localhost/detailtest.asp?products/prod587.jpg
> >
> > The question mark indicates the start of a QueryString.
> >
> >

> -------
> That's right. I thougt the ? was for the htmL wich sometimes is used and
> sometimes not!
> Stupid from me.
>
> The change has improved the whole operation but still there is something
> wrong.
> After the correction, the detailtest is loaded in a new window. On the

place

> where the picture should be, there's only a small icon with the red X
> visible.
>
> The adres reads now:
> localhost/detailtest.asp?products/prod587.jpg
>
> I checked if the image realy was on the place where it should be, and it

is.

> I give the total code:

[snip]


Is you page located at
c:\inetpub\wwwroot\detailtest.asp ?
Is you image located at
c:\inetpub\wwwroot\products\prod587.jpg ?


Try the following:

1) Right click on the image placeholder (the red X)
2) click "Properties,
3) the full path to the image is after "Address: (URL)".
(is it "http://localhost/products/prod587.jpg"?)
4) Use your mouse to highlight the URL,
5) press Ctrl+C to "cut" it,
6) close the dialog by clicking Cancel,
7) highlight the Address line of your browser,
8) press Ctrl+V to "paste" it there,
9) press Enter to view the image.

If you don't see the image this way then the path or image name is
incorrect.

Let me know.