Results 1 to 7 of 7

Thread: Featured Image Zoomer

  1. #1
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Featured Image Zoomer

    1) Script Title: Featured Image Zoomer

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

    3) Describe problem:
    Hi,

    I have a series of small picture that I can click on to load the picture bigger in a div. I'm using an 'onClick' event with a function to load the bigger image because the page should not be refreshed.

    Code:
    function ShowImage(image)
    {
    document.getElementById('image1').src='images/items/'+image;
    }
    The problem is I must rollover the big picture twice to have the right image in the zoomer otherwise I get the previous one to zoom?
    I don't know how to fix this?
    A little help would be greatly appreciated!
    Last edited by jfrene; 07-30-2010 at 04:11 AM. Reason: format code

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    This seems to work.

    Use this slightly modified version of the script:

    Attachment 3448

    When you init your zoomer it looks something like so:

    Code:
    jQuery(document).ready(function($){
     $('#image1').addimagezoom({
       //options
     })
    })
    It doesn't matter what options (if any) you specify as long as you are using the image itself as the magnified version (the default, and from what you say in your post, it sounds like you are). Add to the above code (or your version of it), so you get this:

    Code:
    jQuery(document).ready(function($){
     var one = $('#image1').addimagezoom({
       //options
     }).mouseover();
     (function(){
      if(!one.data('specs')){
       setTimeout(arguments.callee, 30);
       return;
      }
      one.mouseout();
     })();
    })
    Then instead of doing this:

    Code:
    function ShowImage(image)
    {
    document.getElementById('image1').src='images/items/'+image;
    }
    do:

    Code:
    function ShowImage(image){
    	var im = 'images/items/' + image;
    	jQuery('#image1').attr('src', im).data('specs').magnifier.$image.attr('src', im);
    }
    Last edited by jscheuer1; 07-30-2010 at 12:44 AM. Reason: fix for IE
    - John
    ________________________

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

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

    jfrene (07-30-2010)

  4. #3
    Join Date
    Jul 2010
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Thank you so much, it's working great!

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    You're welcome. I was playing around with this a bit more and noticed that sometimes, when the browser hasn't cached the first image yet (or somethimes when the browser is reloading), there's a ghost image of the enlarged image that appears briefly as the page loads.

    This can be eliminated. It requires the use of a transparent .gif image and some additional/changed style and code.

    If you are using the drop shadow:

    Code:
    .magnifyarea{ /* CSS to add shadow to magnified image. Optional */
    box-shadow: 5px 5px 7px #818181;
    -webkit-box-shadow: 5px 5px 7px #818181;
    -moz-box-shadow: 5px 5px 7px #818181;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
    background: white;
    }
    Change that to:

    Code:
    .magnifyarea {
    border: none!important;
    }
    .zoomImage { /* CSS to add shadow to magnified image. Optional */
    box-shadow: 5px 5px 7px #818181;
    -webkit-box-shadow: 5px 5px 7px #818181;
    -moz-box-shadow: 5px 5px 7px #818181;
    filter: progid:DXImageTransform.Microsoft.dropShadow(color=#818181, offX=5, offY=5, positive=true);
    background: white;
    }
    You will need a small transparent .gif image, like this one (right click and save as, you won't be able to see it):

    http://home.comcast.net/~jscheuer1/s...omer/empty.gif

    Then add to our already custom init code:

    Code:
    jQuery(document).ready(function($){
    
    	var one = $('#image1').addimagezoom({
    		//options,
    		largeimage: 'empty.gif' //<-- No comma after last option!
    	}).mouseover();
    	
    	(function(){
    		if(!one.data('specs')){
    			setTimeout(arguments.callee, 30);
    			return;
    		}
    		one.mouseout().data('specs').magnifier.$image.attr('src', one.attr('src'))
    		one.data('specs').magnifier.$outer.removeClass('magnifyarea').addClass('zoomImage');
    	})();
    })
    As before use your existing options where the green part is. Make sure each one has a comma at the end. That's it, everything else is the same.
    - John
    ________________________

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

  6. #5
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Very nice John! I took a stab at this last night, but gave up after not getting the desired result.
    DD Admin

  7. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,167
    Thanks
    44
    Thanked 3,240 Times in 3,201 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by ddadmin View Post
    Very nice John! I took a stab at this last night, but gave up after not getting the desired result.
    Thanks DD. You left so many hooks (from featuredimagezoomer.js):

    Code:
    			$img.data('specs', {
    				$statusdiv: $statusdiv,
    				statustimer: null,
    				magnifier: {$outer:$magnifier, $inner:$maginner, $image:$bigimage},
    				magsize: magsize,
    				magpos: setting.magnifierpos,
    				imagesize: imagesize,
    				curpower: power,
    				coords: getcoords()
    			})
    I figured there had to be a way. Just this (for the OP's requirements):

    Quote Originally Posted by jscheuer1
    Code:
    function ShowImage(image){
    	var im = 'images/items/' + image;
    	jQuery('#image1').attr('src', im).data('specs').magnifier.$image.attr('src', im);
    }
    was enough to get it working, except if the image was changed before the first image (the one loaded on page load) was magnified. Hence all that business with the self executing function to do a dry run.

    I had to modify the featuredimagezoomer.js script only to accommodate IE because it threw a fatal error (in combination with jQuery 1.4.2, and my self executing function) on (from the moveimage function):

    Code:
    		$maginner.css({left:getboundary('left', newx), top:getboundary('top', newy)})
    		specs.$statusdiv.css({left:pagex-10, top:pagey+20})
    because those values were NaN. All other browsers just saw that as invalid style assignments, so they were gracefully dropped.
    - John
    ________________________

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

  8. #7
    Join Date
    Aug 2004
    Posts
    9,918
    Thanks
    3
    Thanked 969 Times in 957 Posts
    Blog Entries
    15

    Default

    Nice. I should probably start taking advantage of self executing functions more, as up until this point, my familiarity with them is basically skin deep as far as what they are and how to use them.
    DD Admin

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
  •