PDA

View Full Version : Featured Image Zoomer double image in IE



kirkh34
12-27-2010, 04:26 AM
1) Script Title:
Featured Image Zoomer
2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm
3) Describe problem:

Hello, I'm using featured image zoomer on my site and it's working okay except in IE. I am using layered transparent .png images. They are shirt designs on a shirt template. When I hover over a shirt design the image seems to double and stays that way when you move the cursor away and leaves the image looking funny. Can anyone tell me why this is occurring? Any help is appreciated.

Here is a link to one of the shirts... Not all of the images you can really tell what's happening but this one is one of the worst...

http://www.swellshirt.com/I-gLOVE-MJ-t-shirt-1113

ddadmin
12-27-2010, 07:51 PM
In what version of IE do you have the problem? Using IE8, at a glance, I don't see anything off with the enlarged image...

kirkh34
12-29-2010, 05:46 AM
i'm using IE 8 also... it's not the image that is zoomed but the other image on the shirt itself... here is a screenshot

http://www.swellshirt.com/shirt.png

jscheuer1
12-29-2010, 07:53 AM
There's a collision between the image's alpha channel as saved in an image editor and IE's alpha opacity filter as used by the script. A quick fix would be to comment out these highlighted lines in the featuredimagezoomer.js script as shown (additions red):


$img.one('mouseover', function(e){
var $maginner=$magnifier.find('div:eq(0)')
var $bigimage=$('<img src="'+(setting.largeimage || $img.attr('src'))+'"/>').appendTo($maginner)
var showstatus=setting.zoomrange && setting.zoomrange[1]>setting.zoomrange[0]
$img.attr({alt:'', title:''})//.css({opacity:0.1}) //remove alt/title attribute of thumb image and "dim" image while large image is loading
var imgcoords=getcoords()
$statusdiv.css({left:imgcoords.left+$img.width()/2-$statusdiv.width()/2, top:imgcoords.top+$img.height()/2-$statusdiv.height()/2, visibility:'visible'})
$bigimage.bind('loadevt', function(){ //magnified image ONLOAD event function (to be triggered later)
//$img.css({opacity:1}) //restore thumb image opacity
$statusdiv.empty().css({border:'1px solid b . . .

Note: Since the page uses the same image for both the thumbnail and the magnified image, this "quick fix" is all that's required. If you have other featured image zoomers that do not use the same image for both, you could still use this modified version, but there might be an unexplained (from the user's point of view) delay when the larger image loads for the first time. In the original version the user sees a loading image. This could be restored in such a way so as not to mess up alpha channel .png in IE, but the modifications would be more extensive.

kirkh34
12-29-2010, 06:09 PM
Thanks for your help and the explanation of why. It fixed it! I appreciate it.

ddadmin
12-30-2010, 09:44 PM
Wow brilliant John!

jscheuer1
12-31-2010, 12:22 AM
Thanks dd! I did notice once this was implemented on the live page that my concern about the loading effect was unwarranted. You still get the loading image - its z-index is 1000, just no fade out of the thumbnail while the larger image loads. Still the fade out could selectively be reserved for only non-IE and IE when the image isn't a .png image. I'm not sure how important that is though. From what I understand IE 9 might not have this problem. However, all those older scripts that test for the alpha opacity filter first before testing for the the opacity style property would have to be tweaked. From a quick look at jQuery 1.4.2 & 1.4.4, it looks like they check for the style first before the filter. IE 9 should pass that test. As long as its style.opacity property doesn't conflict with .png alpha channel opacity, we can finally begin to say goodbye to this whole mess.

KamalDesigner
05-31-2011, 04:39 PM
Mr. jscheuer1 how are you and every one in this forum,

i need your help about the same script ( featured image zoomer ), i have the script working well in FF but in IE show a larg layer "cursorshade" sooo big 100% to right and the image hidden in out of the screen, and here is the preview :

https://lh3.googleusercontent.com/-gLE9kfJzO-A/TeUZYrmPlEI/AAAAAAAAAHw/xDHXQaLuBnU/s912/5-31-2011%2525204-25-50%252520PM.png

and in chrome it not working , and i should in all explorers to press the f5 so it can work,

the link of the web page is :
http://www.ladecodelea.com/ColCMS/pages/WPage.jsp?alias=detail.art&fam_code=TAB&sfa_code=MIST&art_code=MCTHBORD&art_racine=

jscheuer1
06-01-2011, 02:05 PM
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:


<img id="zoom" style="width: 170px; height: 500px;" class="piczoom" border="0" src="/images/images2/mcthbord.jpg">

or in a stylesheet on the page:


<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:


<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:


<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:


<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:


<!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&eacute;co de L&eacute;a.com, Accessoires d&eacute;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.

KamalDesigner
06-03-2011, 07:55 AM
ohhh , thankyou so much for your reply , thats a nice thing from you,

i will try what you sent me now and i will see what will be, wish it work inshalah

KamalDesigner.

KamalDesigner
06-03-2011, 09:05 AM
thankyou so much for your help John, i figured out and you were right about the conflis of versions with prototype with jquery.

SOLVED BY MR JOHN, kingofjs