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

Thread: Featured Image Zoomer positioning

  1. #1
    Join Date
    Jan 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Featured Image Zoomer positioning

    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?

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

    Default

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

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

    Default

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

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

    Default

    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:

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

    Code:
    position: fixed!important;
    Whatever you put in there should have the !important keyword as shown.

    Then in your call to magnify:

    Code:
    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.
    - John
    ________________________

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

  5. The Following User Says Thank You to jscheuer1 For This Useful Post:

    kennyd (01-26-2011)

  6. #5
    Join Date
    Jan 2011
    Posts
    8
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Works perfectly..thanks again

  7. #6
    Join Date
    Mar 2011
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    ...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!

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

    Default

    Quote Originally Posted by chermarie83 View Post
    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.
    - John
    ________________________

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

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

    Default

    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

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

    Default

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

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

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

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

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

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

      Code:
      <!--[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:

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

      Code:
      <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.
    Last edited by jscheuer1; 04-20-2011 at 05:53 AM. Reason: English Usage, add info
    - John
    ________________________

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

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

    Default

    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?

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
  •