Popup image problem

[ulrich]

Hi,

I am working with a webshop site project. I have almost 200 images in the same "ProductImages" catalog. I would like to generate a popup window with the same picture and more informations once an image is clicked on. The popup window should be presented on the same page.

I use VB.Net and the code that brings all the images on my website is written inside a HTML page like:

<img src='ProductImages/<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>' border="0" vspace="10">

How can I solved this problem?

Many Thanks

[jscheuer1]

Sounds like you basically want a photo gallery. If the syntax you use works in an image tag, it should work in most photo gallery setups. There are many templates for photo galleries around the web and if you can't find one that popsup each image when clicked, there is a script here at dd that popsup new windows, I've used it in galleries for work I've done. Let me see if I can find it. Ah yes, here it is:

http://www.dynamicdrive.com/dynamicindex8/popwin.htm

you can make many sorts of popups with that and fill each with a page of your choice. To get the result you describe, a page will have to be created for each image you want popped up (gallery generating programs can help with that). Then when you click on an image and the window popsup, fill it with the page for that image. The only real hard part is finding and learning a suitable gallery generating program. One I've used that lets you write templates before generating the pages is Golin(freeware):

http://www.martinstoeckli.ch/golin/golin.html

If you can get the pictures on your hard drive first it might make things easier with Golin but, a little creative trickery should get it to make a gallery without the photos present, perhaps using stand ins. If you have a live broadband connection you might be able to get Golin to write direct from the web.

[ulrich]

Hei,

Thank you for your suggestion, but it is not exactly what I am trying to make. Suppose that you have seen a product that you want to buy on a shopping website, but the product is small with little info. if you click on that image product, you get a popup window with bigger picture "and more informations".
What I describe here resemble to http://www.afroshopping.com
but here, the popup window lacked of writen informations.

In my case,the code that brings the products image on my website is:

<img src='ProductImages/<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>' border="0" vspace="10">

PS: these are also stored in the database with "ImagePath" as you see.

How can I generate a small popup window by clicking an image?

Many thanks

[jscheuer1]

<img src='ProductImages/<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>' border="0" vspace="10" onClick="window.open('file.html','myWin','width=300, height=300, top=100, left=100, toolbar=0, menubar=0, location=0, status=0, scrollbars=1, resizable=1')">

Added later:
The above should, I think, work in your particular case with most browsers, however, the following is more correct (still tailored to your particular case):

<a href="file.html" onClick="window.open('file.html','myWin','width=300, height=300, top=100, left=100, toolbar=0, menubar=0, location=0, status=0, scrollbars=1, resizable=1');return false"<img src='ProductImages/<%# DataBinder.Eval(Container.DataItem, "ImagePath") %>' border="0" vspace="10"></a>

[jscheuer1]

I recieved an email from a viewer of this thread, and although I answered it, I would prefer to have questions like it addressed here, so others can benefit. To that end, I am pasting in the gist of that message and its reply:

the message:

I saw you helped someone out on the "Popup image problem" thread. I have the similar problem. I am making a website for someone and there are a lot of Thumbnails on the photo page. Instead of users clinking on the thumbnails and then having to go "back" and wait for all the thumbnails to load again, I thought that maybe having another window open when the user clicks on the thumbnail. I am using the page ( http://dynamicdrive.com/dynamicindex8/popwin.htm ) for the main code BUT the links are thumbnails and I am not sure what this code is for this. I have seen the code you put on the forum and uploaded the image but it did not work. Does that code have to be in the body of the page? and where is best to upload the images on the net for this? This is a new learning curve.

my reply:

>Instead of users clinking on the thumbnails and then having to go "back"
>and wait for all the thumbnails to load again

If this is the only thing you are concerned about, don't be. 99% of the
time user's browsers will cache the thumbnail page (often called the
thumbnail index) so that after the first load, it will reload very quickly,
instantly, in fact, as far as the human eye can tell.

> I have seen the code you put on the forum and uploaded the image but it
> did not work. Does that code have to be in the body of the page?

If you mean code like this (exampleA):

<a href="01_detail.htm" 
onClick="window.open('01_detail.htm','01_win','width=300, height=300, 
top=100, left=100, toolbar=0, menubar=0, location=0, status=0, scrollbars=1, 
resizable=1');return false"><img src="01_thumbnail.jpg"></a>

Yes, that would go in the body. The href="01_detail.htm" is
there for browsers that do not support JavaScript, it will switch to the
detail page for those browsers. The 01_win is simply a unique name for the
popup window. This sort of code is used without any other supporting script
on the page. If you are using:
http://dynamicdrive.com/dynamicindex8/popwin.htm
Don't use the above type of code, rather follow the instructions given for
http://dynamicdrive.com/dynamicindex8/popwin.htm.

>where is best to upload the images on the net for this

This question makes me wonder if you have a website or not, do you? If you
do, you upload the images to the website. Generally, people create a
directory called images on the website and put their images in there. When
referencing such an image in HTML, you then need to use the path, as in:
<img src="images/01_image.jpg">
You can put your images anywhere you want on your website, just make sure
that when you go to use them in an HTML page, you have your HTML code point
to where they are.

>BUT the links are thumbnails and I am not sure what this code is for this

If you are using, http://dynamicdrive.com/dynamicindex8/popwin.htm, it will
generate code (in addition to the supporting script for the head section)
something like this for inclusion in the body section:

<a href="http://www.google.com" 
onclick="NewWindow(this.href,'mywin','300','300','no','center');return 
false" onfocus="this.blur()">YourLinkText</a>

just put your thumbnail image tag in place of 'YourLinkText'. And put the
page you want displayed in the popup in place of 'http://www.google.com'.

Some Other Points -
1) If you have a page up on the web where you are trying to work this out,
in future, please supply a link to it so I can check your work.
2) Depending upon what you want in your pop-up, if you just want the image
(no added text), you might prefer to use:
http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm
3) Popping up a window using the window.open() method requires you to have
an HTML page, an image, something to put in that window. In my above
exampleA that is what 01_detail.htm is for.
4) In future, why not post in the forums so that others can benefit from the
information?

[ulrich]

Thank you very much. I tried the code, and the popup windows comes out when clicking each picture.

But, I don't know how to implement the variabel: 'myWin'.
I guest that it's is the variable which generates unique pictures and comments from my Image catalog to the popup window.

actually the popup window comes out empty from the file.html

PS: I have'nt put my website on the internet yet. I still building it on my local server IIS. I still have a lot to do before that.

Thanks thanks

[jscheuer1]

I don't know how to implement the variabel: 'myWin'

That is simply a name for the popup window. If it is the same for all popups from a page, what happens is each popup will go into the existing popup window if it hasn't been closed yet. If you want each popup to generate its own new window, use a unique name for each one.

actually the popup window comes out empty from the file.html

It will unless file.html exists. In this case 'file.html' is just a stand-in for the content you want displayed in your popup window.