Incidentally, that's not how it's supposed to work, not even in Firefox. In Firefox the larger image is too big, out of proportion to the magnified area. But don't worry about that, doing all of the below will fix that too.
For IE (IE 9 only apparently, Opera 11 too though) there's some sort of conflict with prototype/scriptactulous and the version of jQuery used on the page.
How much do you know about the page? How important is that version of jQuery? How important is prototype/scriptaculous?
With Chrome it's a simpler matter, all it needs is style width and height specified for the id="zoom" image. This may be done inline:
Code:
<img id="zoom" style="width: 170px; height: 500px;" class="piczoom" border="0" src="/images/images2/mcthbord.jpg">
or in a stylesheet on the page:
Code:
<style type="text/css">
#zoom {
width: 172px;
height: 500px;
}
</style>
or by adding that style to an existing stylesheet for the page. However, wherever you put it, it must come after the style definitions for the .piczoom class.
I give you all these options because presumably you have other pages with different id="zoom" images, so flexibility in where the width and height get declared is probably important.
Alternatively, you could create a front end to do it for you. Change:
Code:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#zoom').addimagezoom({
/*zoomrange: [1, 1],*/
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'grey',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: document.getElementById('zoom2').value
})
})
</script>
to:
Code:
<script type="text/javascript">
jQuery(document).ready(function($){
var z = $('#zoom');
if(z.get(0).complete){
loaded();
} else {
z.load(loaded);
}
function loaded(){
z.css({width: z.width(), height: z.height()}).addimagezoom({
/* zoomrange: [1, 1], */
magnifiersize: [400,400],
magnifierpos: 'right',
cursorshade: true,
cursorshadecolor: 'gray',
cursorshadeopacity: 0.3,
cursorshadeborder: '1px solid red',
largeimage: document.getElementById('zoom2').value
})
}
});
</script>
Back to IE 9. I got it to work and not throw an error by moving:
Code:
<script src="/js/jquery-1.4.1-and-plugins.min.js" type="text/javascript"></script><script src="/js/featuredimagezoomer.js" type="text/javascript"></script>
to before prototype and adding an updated version of jQuery:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>
La déco de Léa.com, Accessoires déco pour la cuisine et la maison, encore une trouvaille
</title>
<script src="/js/jquery-1.4.1-and-plugins.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="/js/featuredimagezoomer.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" src="/js/prototype-1.6.0.3.js"></script><script type="text/javascript" language="javascript" src="/js/scriptaculous.js"></script><script type="text/javascript" language="javascript" src="/js/cms_site.js"></script><script type="text/javascript" language="javascript" src="/js/cs_recherche.js"></script><script type="text/javascript" language="javascript" src="/js/cms_login.js"></script>
<link href="/images/favicon.gif" type="image/gif" rel="shortcut icon">
<link charset="utf-8" title="no title" media="screen" type="text/css" href="/css/style.css" rel="stylesheet">
<script type="text/javascript" language="javascript" src="/js/ajoutArticle.js"></script><script type="text/javascript" language="javascript" src="/js/gdAlert.js"></script>
<link charset="utf-8" title="no title" media="screen" type="text/css" href="/css/gdAlert.css" rel="stylesheet">
<style type="text/css">
#zoom {
width: 172px;
height: 500px;
}
</style>
</head>
This may or may not affect other scripts for the page. If there are any problems with other scripts, let me know. But the only real problem I would anticipate is if the:
/js/jquery-1.4.1-and-plugins.min.js
script is actually needed for something other than the featured zoomer. If it isn't, you can now get rid of it.
But there could be other issues, as I say - let me know.
Featured Image Zoomer double image in IE
Reply With Quote
Bookmarks