Looking for code to display larger image when thumbnail is clicked.

[l-goodwin]

Hello there, I am currently trying to build my own e-commerce site. I have a little knowledge of programming but didn't realise how much work was involved until I got to a certain point. However, I am determined to build this site myself!

I have already had a little success with code from this site for magnifying an image. The image is a little blurry but I will work on this later.

I am wondering if anyone could help with displaying product images. I am looking at 2-4 images per product and I want to display the thumbnail, and on mouse click, display the larger image in a box if this makes sense. I want to be able to click each thumbnail and change the large image in the box to the thumbnail.

I am then hoping to use the magnifying code I mentioned earlier on the larger image in the box.

Any help would be greatly appreciated. I am using dreamweaver for coding at the moment but any suggestions for other software is welcomed as I am willing to give anything a go :)

From a very determined lady.

[jscheuer1]

If I understand you correctly, you want:

http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

It can be activated on mouseover or on click.

But your description of what you're after could also be understood to mean something like:

http://fancybox.net/

If you go there, take my advice and ignore the hype for version 2. It's not free for commercial use, whereas the script that is on that page, once you dismiss version 2 is free for all purposes.

[l-goodwin]

Thanks John. I had a look at the first one before posting. I think the fancy box is more what I am looking for. Would I be able to use the code I mentioned in my first post to magnify on the larger image with this?

[jscheuer1]

Probably. Which script is that exactly? There are at least 3 Dynamic Drive scripts that magnify images.

In any case though, FancyBox allows you to bring up a separate page in an iframe inside the FancyBox box, if no other better solution exists, you could do it that way and the page in the FancyBox box's iframe could have a magnify script on it.

[l-goodwin]

I am looking at using the Power Zoomer:

http://www.dynamicdrive.com/dynamicindex4/powerzoomer.htm

I will try this with the fancy box and see if it works. I'm looking at selling clothing so detailed images are important.

Thanks for your help John...I may be posting again when I've finished trawling the site for other things I want my site to do.

I've found this site really helpful by the way!

[l-goodwin]

Hi John. I have fancy box working on a single image which is great! The problem is it displays above my page design before opening in fancybox. I can get the image to display inside the page design but I have to put all the code behind the slice where the original image is. the problem then is that I have 2 of the same image (one that opens with fancy box and one that doesn't do anything but move my design off course). I have tried to position it using top=... and left=...with no success. Any ideas what I'm doing wrong? I have read about layers or floating? I don't really understand the code and where to place it though.

[jscheuer1]

Please put up a live demo page that shows the problem and post a link to it here.

[l-goodwin]

I'm not live at the moment John, I'm still researching hosting and undecided which company to use.

I have copied the code to both ways I have tried on 2 seperate text documents and attached these.

I have screen shots too if you need to see them.

4270

4271

[jscheuer1]

That doesn't really show me anything other than the fact that there are 2 DOCTYPE tags, 3 html tags, 2 head tags, 3 body tags, 2 each for the jquery and fancybox scripts and 2 of the fancybox css. Except for those last items (scripts and css) you're only allowed one each per page, and those others are strongly recommended to be only one each as well. None of that can be good. But it's hard to say which are a real problem. Best to fix it all.

This probably has to do with how you're using your CMS, like includes. Included pages should NOT be standalone pages. They should be page fragments that once fully assembled into the finished page, produce a valid HTML document.

If you're still having problems at that point, perhaps the script or css, though their tags are on the page aren't being found. If you do get a fancybox (rather than it changing the page to the larger image or whatever the fancybox href is), it's probably the css that's missing. But that might not be an issue once you fix those other problems.

[l-goodwin]

Okay thanks John. I will go back and look at my code (possible start from scratch as I'm doing test pages with different effects).

The fancybox is working fine. It is opening the fancybox window and displaying the larger image.

I have only tried it with one image so I will do as I said and create a new test page.

Thank you for taking the time to look at this for me, you've been really helpful!

[jscheuer1]

A good thing to do from time to time as you work on something like that is to view the page in the browser. Use the browser's 'view source' to make sure you're outputting valid code.

[cheesusricec]

Probably the easiest to work with. Works well and has many options.

http://gettopup.com/

[Binary Bridge]

I really like the simplicity of this!

One thing, can we set the size of the enlarged image to a maximum. I have several images that are different sizes and would like to add more without having to resize before adding to the site.

I have tried using max-size on the 'loadarea' div but to no avail

Many Thanks

[jscheuer1]

max-size is not a valid css property. You can use max-width and/or max-height.

[Binary Bridge]

Yes sorry don't know what I was thinking of!

I have tried max-height and max-width on an image in the 'loadarea' div as well as in the div itself but when I hover over the thumbnail it uses the image size. This is what I have tried:
==========css
.loadarea {
height:330px;
width:450px;
background:grey;
}
.thumb {
position:relative;
float:left;
height:60px;
max-height: 300px;
max-width: 100%;
}
==================html

<div class="loadarea" id="loadarea"><img class="full" src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg"> </div>

<a class="thumb" href="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" rel="enlargeimage" rev="targetdiv:loadarea" title="The Universe is just waiting to be explored">
<img src="http://www.nasa.gov/images/content/167040main_image_feature_738_ys_4.jpg" class="thumb"></a>

==================================
Is there something I am missing?

Many thanks

[jscheuer1]

Nothing in the style you show affects images in the loadarea. Use:


.loadarea img {
max-width: 425px;
max-height: 300px;
}

or:


#loadarea img {
max-width: 425px;
max-height: 300px;
}