Send image from one page to display in another page

Hi,
I have an html catalogue page with a list of images. Each image has a roll over pop up. I would like to send the user to another page when they click a hyperlinked ‘more images’ text. I think this can be done with javascript using the getelementbyid(image)src, but i am unsure of the syntax. Also I want to display a much larger image on the other page. If anyone could help me how to do this i would be very very happy.

You should not be using javascript for this as people with JS turned off can’t see it, and neither can search engines.
Do you know any server side languages?

Hi Markdidj
I have dabbled with mysql and php but not recently. I acknowledge your advice but I would still like to know if it can be done with js and if you know how would you please help me?
regards

This is just standard HTML. You don’t need any scripting for that. :slight_smile:

The problem is getting the list of images at the new page. How do you know what images to display? As ralph.m mentioned you can use HTML, but you’d have to build each page by hand and manually add the images.

You might be able to use window.open(), and then push the list of images to the new window.

Ah yes, sorry I don’t use window.open() as I try to create things that work without javascript. It can be done though.

http://www.javascript-coder.com/window-popup/javascript-window-open.phtml shows how to add a h1 to a popup window so you could open a popup and insert the images in the same way this page inserts a h1

Thanks again Mark, I don’t want to send a list of images, just one. The images are located on one page, I want the user to click on an image, any image, and then just that image is then displayed on another page in larger detail. I don’t really want to have a separate page to display each larger image. I think each image would have to be hyper linked with it’s source? does that make sense?

Hi Ralph, OK. It would be appreciated if you could post the standard html hyper link to the largerpic page which would display the image clicked in larger detail on the largerpic page.
regards

Something like this would do the job:


<ul>
  <li><a href="/images/large1.jpg"><img src="/images/small1.jpg" alt=""></a></li>
  <li><a href="/images/large2.jpg"><img src="/images/small2.jpg" alt=""></a></li>
  <li><a href="/images/large3.jpg"><img src="/images/small3.jpg" alt=""></a></li>
</ul>

So, you have a list of thumbnail images (e.g. small1.jpg) wrapped in links to the large version. Clicking the link will result in the large version appearing in the browser window. You don’t have to set up a page for it—although, if you don’t, each browser will choose how it displays the image. In Firefox, for example, the image will appear in the center of the screen with a dark background. Simple, but effective. :slight_smile:

Thanks Ralph, I see what your doing there, but I would like something as shown in the link below. When a user clicks on an image see where it takes you. That is what I want (or something like it ;))
regards

OK. Well, you can do that with a standard content management system (CMS). You have a template for the thumbnails, and a template for showing the enlarged image on a new page. This is easy to do with a CMS like ExpressionEngine. It’s PHP-based, but you don’t have to know any PHP to set it up. :slight_smile:

That sounds great! can you point me to how I can get started. I know some PHP (enough to understand it I hope) Shall I just google ExpressionEngine? I shall anyway but wondered if you have any personal recommendations :wink: thanks again.

There are many other CMSes, and I’m sure others will recommend their favorites, but ExpressionEngine is a pretty cool one, though it’s nto free. a similar free one is [URL=“http://modx.com/”]MODx, although I can’t vouch for how easy it might be to set up something like you’ve described in that CMS. It’s very easy with EE.

There are extensive docs for EE (as well as books, if you want them) that will get you started.

Many thanks