Featured Image Zoomer works locally but not on server

**alexCSL** · 06-21-2014, 01:11 AM

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

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: All works well locally, but when I upload the page and files to the hosting server (GoDaddy Linux Hosting), the mouseover and zoom features no longer work.

Here is my page: http://www.own-cabo.com/beta/locations.html

Thanks in advance.
AlexCSL

**jscheuer1** · 06-21-2014, 02:04 AM

GET http://www.own-cabo.com/beta/images/zoom/los-cabos-map2.jpg 404 (Not Found) jquery.min.js:2
Cannot find Featured Image Zoomer larger image: http://www.own-cabo.com/beta/images/zoom/los-cabos-map2.jpg

**alexCSL** · 06-21-2014, 06:05 PM

Uploaded missing images. That did it. Thanks!

**alexCSL** · 06-25-2014, 11:18 PM

Hi John,
Would you mind taking another look at my page? I'd like the magnified area to appear below the map instead of to it's right. I looked in the .js file and there is a moveimage entry but I can't figure out how to move it. I've attached the .css and .js files. Thanks in advance.
Andrew

multizoom.js multizoom.css

**jscheuer1** · 06-26-2014, 01:24 AM

Try in own-cabo.com/beta/css/multizoom.css (additions highlighted):

Code:

.magnifyarea { /* CSS to add shadow to magnified image. Optional */
	box-shadow: 5px 5px 7px #818181;
	-webkit-box-shadow: 5px 5px 7px #818181;
	position: fixed !important;
	left: 0 !important;
	top: auto !important;
	bottom: 0;
	-moz-box-shadow: 5px 5px 7px #818181;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
	background: white;
}

You can actually play further with that to get the optimal positioning for the .magnifyarea element. Almost any valid css style can be employed. However, notice how I've used the !important keyword in some places. It is required to override scripted styles (if any) that might contradict what you're setting in the stylesheet.

If desired/convenient, these added styles may also be introduced in a supplemental stylesheet for or on an individual page. If so, just make sure it comes after the stylesheet tag for the multizoom.css file.

The browser cache may need to be cleared and/or the page refreshed to see changes.

**alexCSL** · 06-26-2014, 09:49 PM

That did it... again!
Thanks much John.

**alexCSL** · 06-27-2014, 12:16 AM

John,
What syntax would I enter into the .css file to center the magnifyarea below the original map? I experimented with adding left: 1 and right: 1 or auto or different combinations of those but it always snaps to one side or the other.

Andrew

**jscheuer1** · 06-27-2014, 05:40 AM

Code:

.magnifyarea { /* CSS to add shadow to magnified image. Optional */
	box-shadow: 5px 5px 7px #818181;
	-webkit-box-shadow: 5px 5px 7px #818181;
	left: 50% !important;
	margin-left: -300px;
	top: 1080px !important;
	-moz-box-shadow: 5px 5px 7px #818181;
	filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
	background: white;
}