Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Featured Image Zoomer double image in IE

  1. #1
    Join Date
    Dec 2010
    Location
    Indianapolis
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer double image in IE

    1) Script Title:
    Featured Image Zoomer
    2) Script URL (on DD):
    http://www.dynamicdrive.com/dynamici...uredzoomer.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

  2. #2
    Join Date
    Aug 2004
    Posts
    9,886
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    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...
    DD Admin

  3. #3
    Join Date
    Dec 2010
    Location
    Indianapolis
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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


  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

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

    Code:
    		$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.
    Last edited by jscheuer1; 12-29-2010 at 12:10 PM. Reason: add note
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Dec 2010
    Location
    Indianapolis
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your help and the explanation of why. It fixed it! I appreciate it.

  6. #6
    Join Date
    Aug 2004
    Posts
    9,886
    Thanks
    3
    Thanked 962 Times in 951 Posts
    Blog Entries
    15

    Default

    Wow brilliant John!
    DD Admin

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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.
    Last edited by jscheuer1; 12-30-2010 at 11:45 PM. Reason: add jQ 1.4.2
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 :



    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/pa...RD&art_racine=

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,926
    Thanks
    43
    Thanked 3,192 Times in 3,155 Posts
    Blog Entries
    12

    Default

    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&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.
    Last edited by jscheuer1; 06-01-2011 at 04:16 PM. Reason: add alternate method for assigning dimensions
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    May 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •