Featured Image Zoomer (now w/Multi-Zoom) v2.1

1) Script Title: Featured Image Zoomer (now w/Multi-Zoom) v2.1

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm - demo 4 (but with option 3 cursor)

3) Describe problem: advice/help please on installing script on domain hosted by one.com.....using web editor.

I am still (although trying hard to educate myself) a bit of a beginner and really could use a little advice with this installing this script please.

- page I am trying to install this script on is http://pinkfudge.com/shop%20competition%20bikinis%20uk%20/blue%20and%20silver%20crystal%20bikini.html (still working on the various style elements as you can see (dropdown boxes etc) but this is the layout I am looking to achieve

In one.com web editor there is a component which allows the placement of code anywhere on the page (allows you to place code inside the component and then allows you to choose options 'inside <head/>, ,body/>' etc). My problems arise trying to follow the instructions given (have been trying to work it our for a week now and I do know my knowledge is probably insufficient) but I'm just not making headway - have uploaded the .js and .css and .gif and sample image files to my file manager but unsure as to whether i've loaded them in the correct place, next problem...how I can find out the html for the div's that I need as this info cannot be accessed using web editor and cannot use file manager to edit the page as information is overwritten as soon as I publish again from web editor. I also need (please) some help on clarifying how to amend and insert the relevant hrefs & 'sources' to my own product images (just one as an example I could then follow). I do realise that this is a big 'ask' and also appreciate that I am lacking in knowledge but I am trying to teach myself little by little (don't have the resources i'm afraid, its just me!) and am getting there (html, php, msql, javascript.....) Have also tried sourcing tutorials that are a little more 'step by step' from yourself but couldn't find anything, perhaps you have a link that may help?

Like I say, apologies once again for my lack of knowledge, but would be eternally grateful for any and all help if its possible?!
Debs

On your page:

Code:

---

<script type="text/javascript" src="multizoom.js">

---

and:

Code:

---

<link rel="stylesheet" href="multizoom.css" type="text/css">

---

Are 404 Not Founds.

There could also be other problems.

Hi John, thanks so much for taking the time to reply, although its truly appreciated... i'm actually none the wiser?! So, so sorry for not 'getting' your reply...any chance at all that you could use a few more words to explain the explanation?

Apologies again for my ignorance!
Debs

A 404 error is returned by the server when a file can't be found. That means multizoom.js & multizoom.css are not in the root directory of your server. If you have put them somewhere else you need to edit the paths to point to the correct place.

On another point you might be wiser to simplify the directory and page names on your website. This path is frankly ridiculous:

http://pinkfudge.com/shop%20competit...%20bikini.html

Sorry Debs1961 - OK, 404 Not Found means that the server cannot find these (in this case) essential files. Did you download them from the demo page? Did you upload them to your server? Are they in the location where your page is looking to find them?

Hi John, HUGE, HUGE thanks! have now managed to get the image zoom sorted and can now view it (the demo 4 - Angelina Jolie) thumbs and med image o my product details page! ...took some trial and error and some really helpful (dummy 'speak') from yourself... but got there! You're a 'god'...not to mention a really, REALLY patient one!

It is certainly a little different using the web editor in one.com but just goes to show it can be done... for any of you out there with a limited amount of knowledge such as myself, whose website are hosted by one.com servers!

Okay, so now I need to amend it so that the cursor reflects the values etc. as the lens in your demo 3 and thereafter, insert the hrefs for my own images... mmmmm!?!

Whilst I am here, and you have been so gracious, so far, with your help (by the way, amended my directory and page names, had completely forgotten and still had them in 'debs layout speak' whilst still building, hadn't even noticed I had not actually got round to defining them in ernest, so thanks for the 'gentle' nudge.., ehem! would you by any chance have any template .css code for the layout of three vertical thumbs down the left side a larger image? The layout in the demos provide horizontal thumbs along the bottom of the larger image.... just though I would ask? apologies if it's a bit of a cheek... I really do not want to seem ungrateful, as I said, it's only due to your help, knowledge and advice that I have managed to get the script up and running, plus the fact that you actually took the time to 'dumb down' in your advice so I could understand!

Anyway, just wanted to say thanks.....so a big thank you !

I'm not a lot on layouts, but this seems serviceable. The borders are just so you can see the containers. You can get rid of the borders once you have placed images in them. The dimensions can be adjusted. But there must be room in the picscontainer for all of the others, including their contents, any margin or padding you might add. If things don't fit, undesired wrapping or bleeding will probably happen:

HTML Code:

---

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
.picscontainer {
        width: 162px;
        height: 168px;
        border: 1px solid black;
}
.largepicture {
        width: 100px;
        height: 162px;
        border: 1px solid red;
        margin: 2px;
        float: right;
}
.thumbnail {
        width: 50px;
        height: 50px;
        border: 1px solid green;
        margin: 2px;
        float: left;
}
</style>
</head>
<body>
<div class="picscontainer">
<div class="largepicture"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
<div class="thumbnail"></div>
</div>
</body>
</html>

---

...and it works beautifully!!! Thank you so much, not just for all you help with this but for you clarity in your explanations. Feel I have made a huge leap forward in my knowledge with the execution of your advice too!

Big thanks to all you guys, but especially you John, THANKS!!!!