Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 884
  • Last Modified:

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
0
xenoula
Asked:
xenoula
  • 6
  • 3
  • 2
  • +1
1 Solution
 
0h4crying0utloudCommented:


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.
0
 
0h4crying0utloudCommented:

In css, you would use  width:50px; & height:50px
0
 
Jens FiedererTest Developer/ValidatorCommented:
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).
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
0h4crying0utloudCommented:

Cool!
0
 
nschaferCommented:
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.
0
 
xenoulaAuthor Commented:
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

 
0
 
0h4crying0utloudCommented:

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>


0
 
Jens FiedererTest Developer/ValidatorCommented:
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).
0
 
xenoulaAuthor Commented:
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
0
 
0h4crying0utloudCommented:

So the images are  small_$imagename and enlarge_$imagename?  Don't you need the ".jpg" extention?  I just added an "en" to the image name in the pop-up here:


<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='enlarge_" + itemName + " '>");
  new_window.document.write("</body></html>");
  new_window.document.close();
}
</script>
0
 
xenoulaAuthor Commented:
hi sorry for answering late?

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

Thanks,
Xenia
0
 
0h4crying0utloudCommented:
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>
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 6
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now