You've done a number of things that you didn't have to and there are some things I would tighten up. But to just get it working, add the highlighted to the on page style section as shown:
Code:
<style type="text/css">
.magnifyarea{ /* CSS to add shadow to magnified image. Optional */
box-shadow: 5px 5px 7px #818181;
-webkit-box-shadow: 5px 5px 7px #818181;
-moz-box-shadow: 5px 5px 7px #818181;
filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
background: white;
}
.magnifyarea, .zoomtracker, .zoomstatus, .cursorshade {
z-index: 8;
}
</style>
Of course, at that point you will want to change the highlighted url:
Code:
$(document.getElementById('image1')).addimagezoom({
zoomrange: [3, 10],
magnifiersize: [300,300],
magnifierpos: 'right',
cursorshade: true,
largeimage: 'http://i44.tinypic.com/11icnk5.jpg' //<-- No comma after last option!
})
so that it points to an image that's a larger higher resolution version of the parka. This image should have the same aspect ratio as the 606087.jpg (the parka image) image.
Things I would do to tighten this up are (these are all optional, but should be done together if at all) -
Change the DOCTYPE from:
Code:
<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
to:
Replace:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
with:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
Get rid of:
Code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
And change:
Code:
$(document.getElementById('image1')).addimagezoom({
to:
Code:
$('#image1').addimagezoom({
adding Featured Image Zoomer v1.5 problem
Reply With Quote
Originally Posted by jscheuer1
Bookmarks