Results 1 to 5 of 5

Thread: Auto retract

  1. #1
    Join Date
    Sep 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Auto retract

    1) Script Title: jQuery Image Magnify

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

    3) Describe problem: This works great! My only wish is that when clicking on another image, the previous image would retract automatically. I've observed users looking at an array of 10 by 5 images and getting four or five on top of each other before going back to click on the big ones to remove them.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Add the highlighted code as shown to the jquery.magnifier.js file:

    Code:
    	magnify:function($, $target, options){
    		var setting={} //create blank object to store combined settings
    		var setting=jQuery.extend(setting, this.dsettings, options)
    		var effectpos=this.imgshells.length
    		var attrs={w:$target.outerWidth(), h:$target.outerHeight()}
    		var newattrs={w:Math.round(attrs.w*setting.magnifyby), h:Math.round(attrs.h*setting.magnifyby)}
    		$target.css('cursor', jQuery.imageMagnifier.cursorcss)
    		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
    		$target.add($clone).data('pos', effectpos) //save position of image
    		this.imgshells.push({$target:$target, $clone:$clone, attrs:attrs, newattrs:newattrs}) //remember info about this warp image instance
    		$target.bind('click.magnify', function(e){ //action when original image is clicked on
    			$('.magnify').each(function(){
    				var s = this.style;
    				if(s.visibility === 'visible' && s.position === 'absolute' && s.cursor === 'pointer')
    					$(this).click();
    			});
    			var $this=$(this).css({opacity:setting.imgopacity})
    			var imageinfo=jQuery.imageMagnifier.imgshells[$this.data('pos')]
    			jQuery.imageMagnifier.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
    			var $clone=imageinfo.$clone
    			$clone.stop().css({zInd . . .
    - 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:

    kenrogers (10-15-2009)

  4. #3
    Join Date
    Sep 2009
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    Thanks John. Worked like a charm! I tried using your expando script to start with but for an array of this size there is just too much moving of other images around. Now the magnify script with auto retract is great! Ken Rogers

  5. #4
    Join Date
    Oct 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default ths for ur coding

    Quote Originally Posted by kenrogers View Post
    Thanks John. Worked like a charm! I tried using your expando script to start with but for an array of this size there is just too much moving of other images around. Now the magnify script with auto retract is great! Ken Rogers
    den how to change the position(location) of where the magnified image display??

  6. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by kiosklim View Post
    den how to change the position(location) of where the magnified image display??
    Please start a new thread for a new question.
    - John
    ________________________

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

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
  •