asked on

Enlarge images

Hello,

I have created an e-commerce site that sells cloths.I used php for the developemnt of the website.
The site has two type of images, a small one and a bigger.The administrator uploads the images using the php function
imagecopyresampled and their name are stored in the database which later I use them to dislay the items.

What I have to do now ,is the user to be able when clicks on the image to enlarge it.something like this website
http://www.gap.com/browse/product.do?cid=7193&pid=302788&scid=302788072

Can I use javascript to do that without adding more another field inmy database?

Thanks,
Xenia

0h4crying0utloud

sure you can just adjust the css height and width of the image or in the tag. You probably want to use a large image that is shrunk for your preview. For example, lets say you have an image 300x300 test.gif

This will shrink your image:
<img src="test.gif" width=50 height=50>

This will enlarge it:
<img src="test.gif" width=300 height=300>

Just make sure the "aspect ratio" is kept and it should look fine. You can have adobe calculate that if you have it.

0h4crying0utloud

In css, you would use width:50px; & height:50px

Jens Fiederer

If you do NOT mention the height, the height will automatically have the correct aspect ratio (or, if you do NOT specify the width, the aspect ratio will be maintained).

0h4crying0utloud

Cool!

nschafer

If you are trying to use a smaller size image for the thumbnail (I'm not sure what the imagecopyresampled function does but I'll assume ti generates an image at a different resolution). You could store your append "_thumb" or something like that to the end of the thumbnail image name (before the extension). You would still only keep one file name in your database, but then you could display the filename_thumb.gif file in your main page and display filename.gif when they click on it.

If I am mistaken about the resampling, then just ignore this post.

Neal.

xenoula

ASKER

0h4crying0utloud and jensfiederer with the way you suggest ,if I resize the image the resolution of the image will not be of good quality is that right?The images that the administrator uploads is 107x154 so if i resize to 300x300 the image will not be displayed clear.

nschafer the imagecopyresampled function I am using is that when the admin uploads the image, it copyies the image in the folder images with the name large_name of the image.jpg with dimensions 107x154 (ex. large_image.jpg)and also resize the image to 40x36 and save it as small_name of the image.jpg(ex. small_image.jpg).In the database is stored as the name of the image and if I want to use it I use img src=large_<? echo $imagename; ?>and take the name of the image.So I am not really sure what you suggest to do in order to enlarge the images.

Thanks,
Xenia

0h4crying0utloud

My suggestion was to start with the large image and only scale down. I thought you were storing the image in the db... if only the name then you could easily get away with just swapping the name.

The following is an example of a pure js solution but a server program might be better:

<img src="small_<? echo $imagename; ?>" onclick="viewLarge('<? echo $imagename; ?>')">

<script>
function viewLarge(itemName) {
var new_window = open("","displayWindow","width=300,height=200,left=10,top=10");
new_window.document.write("<html><title>JavaScript New Window</title><body>");
new_window.document.write("<img src='large_" + itemName + ".gif'>");
new_window.document.write("</body></html>");
new_window.document.close();
}
</script>

Jens Fiederer

Really just wanted to comment that no calculations are required to maintain aspect ratio for CSS. 0h4 is doing fine handling your question, and scaling down is much better than enlarging. Like he said, a server program would be better (if you scale down a large jpg on the client with CSS, ALL of the image still has to be TRANSMITTED to the client, it just gets displayed smaller...if you TRANSMIT a smaller image you save lots of bandwidth).

xenoula

ASKER

Finally I used the same function imagecopyresampled function and now I have in the Server an image with the name enlarge_the name of the image.jpg(ex. enlarge_image.jpg).

Now what I want is the user to be able when click on the image to appera the enlarge image.

I tryied your code 0h4crying0utloud with a modification in the javascript ,as I erase the gif extenstion
but when I run it doesn't display the enlarge image.

<img src="small_<? echo $imagename; ?>" onclick="viewLarge('<? echo $imagename; ?>')">

<script>
function viewLarge(itemName) {
var new_window = open("","displayWindow","width=300,height=200,left=10,top=10");
new_window.document.write("<html><title>JavaScript New Window</title><body>");
new_window.document.write("<img src='large_" + itemName + " '>");
new_window.document.write("</body></html>");
new_window.document.close();
}
</script>

How I can fix that?

Thanks,
Xenia

ASKER CERTIFIED SOLUTION

0h4crying0utloud

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

xenoula

ASKER

hi sorry for answering late?

Could you tell me how I can define not to have any scrollbars in the code?

Thanks,
Xenia

0h4crying0utloud

You just put "scrollbars=no" in your open function's property string like so:

<img src="small_<? echo $imagename; ?>" onclick="viewLarge('<? echo $imagename; ?>')">

<script>
function viewLarge(itemName) {
var new_window = open("","displayWindow","width=300,height=200,left=10,top=10, scrollbars=no,");
new_window.document.write("<html><title>JavaScript New Window</title><body>");
new_window.document.write("<img src='enlarge_" + itemName + " '>");
new_window.document.write("</body></html>");
new_window.document.close();
}
</script>