PDA

View Full Version : 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/dynamicindex4/featuredzoomer.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

54855486

jscheuer1
06-26-2014, 01:24 AM
Try in own-cabo.com/beta/css/multizoom.css (additions highlighted):



.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
.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;
}

alexCSL
06-27-2014, 06:54 PM
Perfect!
Thanks!