Featured Image Zoomer positioning

[kennyd]

1) Script Title: Featured Image Zoomer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...uredzoomer.htm

3) Describe problem: Is there a way of positioning the magnifier other than left or right?

[ddadmin]

The magnifier is absolutely positioned, so technically, yes. Where did you want it positioned?

[kennyd]

I wanted to play around with the positioning. Possibly moving it down a bit and over to the right a bit.

[jscheuer1]

The top and left of the magnify area are set absolutely in reference to the window. The script does so with consideration as to where the original image is, and to whether you've configured left or right in the call. This can be easily overridden. To do that, pick an arbitrary and unique id - say 'myarea'.

Put this stylesheet in the head of the page or add it's rule to an existing stylesheet for the page:

<style type="text/css">
.magnifyarea#myarea {
	top: 322px!important;
	left: 250px!important;
}
</style>

Change the top and left to be of your choosing. For an interesting effect you could add:

position: fixed!important;

Whatever you put in there should have the !important keyword as shown.

Then in your call to magnify:

jQuery(document).ready(function($){
	$('#image1').addimagezoom({
		zoomrange: [3, 10],
		magnifiersize: [300,300],
		largeimage: 'hayden.jpg' //<-- No comma after last option!
	});
	$('.magnifyarea').last().attr('id', 'myarea');
});

You may repeat this process with other zoomers on the page (if any) and a different id. The added javascript must come after each call.

[kennyd]

Works perfectly..thanks again

[chermarie83]

...so i added this code, but every time i resize my browser the magnifier stays in that same coordinate. I want it to move relative to my browser size. can anyone help?

Thanks!

[jscheuer1]

every time i resize my browser the magnifier stays in that same coordinate. I want it to move relative to my browser size.

The code in this thread is not intended to do that, only to provide more flexibility for the absolute position of the magnify area.

You appear to want a static or relatively positioned magnify area. This can be done, but it's complicated, or at least seems complicated to me. I think I have it worked out. But it looks to me as though it needs to be done in different ways depending upon the layout of the page.

Do you have a page setup? If so, gives us a link to it so I can see how best to adapt the solution I have to it.

[chermarie83]

Hi John,

Thanks for your reply. Below is the link to one of the pages I'm working on. I'm working with very specific client and he wants to have the viewing area to appear over the original image.

example page: http://sugaboo.com/blend_website/bronzer_mbz01.html

I did a screen shot to show where the viewer needs to be, link below.

screen shot: http://sugaboo.com/screenshot.png

Thanks you so much for your help!

Cheery

[jscheuer1]

That's actually a little simpler than I was imagining. Change this:

<style type="text/css">
.magnifyarea#myarea {
	top: 148px!important;
	left: 290px!important;
	position: fixed!important;
}
</style>

to:

<style type="text/css">
.magnifyarea {
	top: -66px!important;
	left: 22px!important;
}
#mymag {
	position: relative;

}
</style>
<!--[if lt IE 7]>
<style type="text/css">
.magnifyarea {
	left: -200px!important;
}
</style>
<![endif]-->

Change this:

<script type="text/javascript">

jQuery(document).ready(function($){

	$('#image1').addimagezoom({
		zoomrange: [10, 10],
		magnifiersize: [400,400],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'bronzer/mbz01.png' //<-- No comma after last option!
	})
	$('.magnifyarea').last().attr('id', 'myarea');
	
	$('#image2').addimagezoom({
		zoomrange: [10, 10],
		magnifiersize: [400,400],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'foundations/lid.png' //<-- No comma after last option!
	})
    $('.magnifyarea').last().attr('id', 'myarea');

})

</script>

to:

<script type="text/javascript">

jQuery(document).ready(function($){

	$('#image1').addimagezoom({
		zoomrange: [10, 10],
		magnifiersize: [400,400],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'bronzer/mbz01.png' //<-- No comma after last option!
	})
	
	$('#image2').addimagezoom({
		zoomrange: [10, 10],
		magnifiersize: [400,400],
		magnifierpos: 'right',
		cursorshade: true,
		largeimage: 'foundations/lid.png' //<-- No comma after last option!
	})
	$('.magnifyarea').appendTo($('#mymag'));

})

</script>

Add this highlighted <div> as shown:

    <table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr>

    <td width="450" height="450" align="center"><div id="mymag"></div><img src="bronzer/mbz01.png" width="373" height="307" /></td>
  </tr>
  <tr>
    <td width="450" height="25">
    
    <table width="450" border="0" cellspacing="0" cellpadding="0">
  <tr> 
    <td width="80" height="65"><p><img id="image1" border="0" src="bronzer/mbz01.png" style="width:80px;height:65px" /><p></td>
    <td width="80" height="65"><p><img id="image2" border="0" src="foundations/lid.png" style="width:80px;height:65px" />
    <p></td>

    <td width="290" height="65" class="zoom_style"><img src="image/zoom.png" width="150" height="65" /></td>
  </tr>
</table>
    
    </td>
  </tr>
</table>

Notes:

• The only thing I'm not like 90% certain of is:
  
  

  <!--[if lt IE 7]>
  <style type="text/css">
  .magnifyarea {
  	left: -200px!important;
  }
  </style>
  <![endif]-->

  That style is for IE 6 and less (anything less than IE 7, lt IE 7). I cannot really test if it's accurate as my local copy of your page won't load in my IE 6. That's probably due to something loaded for IE 6 that has to be live, like a png fix thing. But I couldn't track it down. I had to make some assumptions and guesses as to that lt IE 7 style. It could be wrong. Once it's live with these changes I (or you if you have IE 6 and care about it) can check it. Let me know.
  
  
• There are other problems with the page that you may or may not already be aware of and intend to fix. The rollover.js file has an HTML header and some other HTML tags so doesn't load. If you mean to use it, it should have only the script code in it:
  
  

  function newImage( imgSrc ){
  
   var imgName = new Image();
   imgName.src = imgSrc;
  
   return imgName;
  
  }
  
  function change( imgName, imgLocation )
  {
   document[imgName].src = imgLocation ;
  }
  
  var preloadFlag = false;
  function loadImages()
  {
   if (document.images)
   {
  buttonhome1 = newImage("foundations/tinyhover_mf_01.png");
    
  
   preloadFlag = true;
   
   changeImage();
   }
  }

  If you don't mean to use it (I don't think you do as at least some rollover duties appear to be being done by something else), it's external script tag on the page:
  
  

  <script language="JavaScript" src="rollover.js"></script>

  and any references to its functions on the page or in the page's scripts (I couldn't find any) should be removed.
  
  
• Using so many .png is wasteful. You could substitute high resolution .jpg and save a lot of load time/bandwidth. The smaller images should be smaller images, not resized from the larger ones by the browser.
  
  
• The spinningred.gif (the loading image for Featured Image Zoomer) is a 404 Not Found.
  
  
• There could be other things. These are just what jumped out at me.
  
  
• Any problems with the modifications to the Featured Image Zoomer script, let me know.

[chermarie83]

thank you so much!

so .png is not good to use? i always thought and taught it was, but i guess I'm wrong.

also, if i change the images into different sizes wouldn't that make the site slower since i have 3 sizes of the same image or no?