Results 1 to 7 of 7

Thread: jquery image magnify don't work

  1. #1
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default jquery image magnify don't work

    1) Script Title: jquery image magnify

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

    3) Describe problem:

    Hello,
    I try to use this
    but this technic don't works while i do all the steps
    even the image magnify.cur don't appear
    please help

  2. #2
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    this my code
    Code:
    <script type="text/javascript" src="js/jquery.min.js"></script>
     <script type="text/javascript" src="js/jquery.magnifier.js">
    </script>
    Code:
    <img src="images/designjet.png" class="magnify" style="width:200px; height:150px" />
    code js:
    Code:
    /* jQuery Image Magnify script v1.1
    * This notice must stay intact for usage 
    * Author: Dynamic Drive at http://www.dynamicdrive.com/
    * Visit http://www.dynamicdrive.com/ for full source code
    
    * Nov 16th, 09 (v1.1): Adds ability to dynamically apply/reapply magnify effect to an image, plus magnify to a specific width in pixels.
    */
    
    jQuery.noConflict()
    
    jQuery.imageMagnify={
    	dsettings: {
    		magnifyby: 3, //default increase factor of enlarged image
    		duration: 500, //default duration of animation, in millisec
    		imgopacity: 0.2 //opacify of original image when enlarged image overlays it
     	},
    	cursorcss: 'url(magnify.cur), -moz-zoom-in', //Value for CSS's 'cursor' attribute, added to original image
    	zIndexcounter: 100,
    
    	refreshoffsets:function($window, $target, warpshell){
    		var $offsets=$target.offset()
    		var winattrs={x:$window.scrollLeft(), y:$window.scrollTop(), w:$window.width(), h:$window.height()}
    		warpshell.attrs.x=$offsets.left //update x position of original image relative to page
    		warpshell.attrs.y=$offsets.top
    		warpshell.newattrs.x=winattrs.x+winattrs.w/2-warpshell.newattrs.w/2
    		warpshell.newattrs.y=winattrs.y+winattrs.h/2-warpshell.newattrs.h/2
    		if (warpshell.newattrs.x<winattrs.x+5){ //no space to the left?
    			warpshell.newattrs.x=winattrs.x+5	
    		}
    		else if (warpshell.newattrs.x+warpshell.newattrs.w > winattrs.x+winattrs.w){//no space to the right?
    			warpshell.newattrs.x=winattrs.x+5
    		}
    		if (warpshell.newattrs.y<winattrs.y+5){ //no space at the top?
    			warpshell.newattrs.y=winattrs.y+5
    		}
    	},
    
    	magnify:function($, $target, options){
    		var setting={} //create blank object to store combined settings
    		var setting=jQuery.extend(setting, this.dsettings, options)
    		var attrs=(options.thumbdimensions)? {w:options.thumbdimensions[0], h:options.thumbdimensions[1]} : {w:$target.outerWidth(), h:$target.outerHeight()}
    		var newattrs={}
    		newattrs.w=(setting.magnifyto)? setting.magnifyto : Math.round(attrs.w*setting.magnifyby)
    		newattrs.h=(setting.magnifyto)? Math.round(attrs.h*newattrs.w/attrs.w) : Math.round(attrs.h*setting.magnifyby)
    		$target.css('cursor', jQuery.imageMagnify.cursorcss)
    		if ($target.data('imgshell')){
    			$target.data('imgshell').$clone.remove()
    			$target.css({opacity:1}).unbind('click.magnify')
    		}	
    		var $clone=$target.clone().css({position:'absolute', left:0, top:0, visibility:'hidden', border:'1px solid gray', cursor:'pointer'}).appendTo(document.body)
    		$clone.data('$relatedtarget', $target) //save $target image this enlarged image is associated with
    		$target.data('imgshell', {$clone:$clone, attrs:attrs, newattrs:newattrs})
    		$target.bind('click.magnify', function(e){ //action when original image is clicked on
    			var $this=$(this).css({opacity:setting.imgopacity})
    			var imageinfo=$this.data('imgshell')
    			jQuery.imageMagnify.refreshoffsets($(window), $this, imageinfo) //refresh offset positions of original and warped images
    			var $clone=imageinfo.$clone
    			$clone.stop().css({zIndex:++jQuery.imageMagnify.zIndexcounter, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h, opacity:0, visibility:'visible'})
    			.animate({opacity:1, left:imageinfo.newattrs.x, top:imageinfo.newattrs.y, width:imageinfo.newattrs.w, height:imageinfo.newattrs.h}, setting.duration,
    			function(){ //callback function after warping is complete
    				//none added		
    			}) //end animate
    		}) //end click
    		$clone.click(function(e){ //action when magnified image is clicked on
    			var $this=$(this)
    			var imageinfo=$this.data('$relatedtarget').data('imgshell')
    			jQuery.imageMagnify.refreshoffsets($(window), $this.data('$relatedtarget'), imageinfo) //refresh offset positions of original and warped images
    			$this.stop().animate({opacity:0, left:imageinfo.attrs.x, top:imageinfo.attrs.y, width:imageinfo.attrs.w, height:imageinfo.attrs.h},  setting.duration,
    			function(){
    				$this.hide()
    				$this.data('$relatedtarget').css({opacity:1}) //reveal original image
    			}) //end animate
    		}) //end click
    	}
    };
    
    jQuery.fn.imageMagnify=function(options){
    	var $=jQuery
    	return this.each(function(){ //return jQuery obj
    		var $imgref=$(this)
    		if (this.tagName!="IMG")
    			return true //skip to next matched element
    		if (parseInt($imgref.css('width'))>0 && parseInt($imgref.css('height'))>0 || options.thumbdimensions){ //if image has explicit width/height attrs defined
    			jQuery.imageMagnify.magnify($, $imgref, options)
    		}
    		else if (this.complete){ //account for IE not firing image.onload
    			jQuery.imageMagnify.magnify($, $imgref, options)
    		}
    		else{
    			$(this).bind('load', function(){
    				jQuery.imageMagnify.magnify($, $imgref, options)
    			})
    		}
    	})
    };
    
    jQuery.fn.applyMagnifier=function(options){ //dynamic version of imageMagnify() to apply magnify effect to an image dynamically
    	var $=jQuery
    	return this.each(function(){ //return jQuery obj
    		var $imgref=$(this)
    		if (this.tagName!="IMG")
    			return true //skip to next matched element
    		
    	})	
    
    };
    
    
    //** The following applies the magnify effect to images with class="magnify" and optional "data-magnifyby" and "data-magnifyduration" attrs
    //** It also looks for links with attr rel="magnify[targetimageid]" and makes them togglers for that image
    
    jQuery(document).ready(function($){
    	var $targets=$('.magnify')
    	$targets.each(function(i){
    		var $target=$(this)
    		var options={}
    		if ($target.attr('data-magnifyto'))
    			options.magnifyto=parseFloat($target.attr('data-magnifyto'))
    		if ($target.attr('data-magnifyby'))
    			options.magnifyby=parseFloat($target.attr('data-magnifyby'))
    		if ($target.attr('data-magnifyduration'))
    			options.duration=parseInt($target.attr('data-magnifyduration'))
    		$target.imageMagnify(options)
    	})
    	var $triggers=$('a[rel^="magnify["]')
    	$triggers.each(function(i){
    		var $trigger=$(this)
    		var targetid=$trigger.attr('rel').match(/\[.+\]/)[0].replace(/[\[\]']/g, '') //parse 'id' from rel='magnify[id]'
    		$trigger.data('magnifyimageid', targetid)
    		$trigger.click(function(e){
    			$('#'+$(this).data('magnifyimageid')).trigger('click.magnify')
    			e.preventDefault()
    		})
    	})
    })
    Last edited by jscheuer1; 02-18-2010 at 02:47 PM. Reason: format code

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,024
    Thanks
    44
    Thanked 3,209 Times in 3,171 Posts
    Blog Entries
    12

    Default

    Just a guess, but perhaps you need to reduce the dimensions:

    Code:
    <img src="images/designjet.png" class="magnify" style="width:200px; height:150px" />
    Like:

    Code:
    <img src="images/designjet.png" class="magnify" style="width:100px; height:75px" />
    But it could be something else, or this and something else. If you want more help:

    Please post a link to a page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

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

  4. #4
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    but my site is not hosted yet
    the problem that with this code no thing is happened, the images are presented normally and no effects with click
    i very sad and surprised

  5. #5
    Join Date
    Feb 2010
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you i find the error, iinclude jquery.min.js 3 times
    in other includes files
    thank you

  6. #6
    Join Date
    Mar 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hey i seem to be having the same problem - all installed properly but there is no effect. Could you let me know how you resolved the issue?
    cheers...n

  7. #7
    Join Date
    Aug 2004
    Posts
    9,895
    Thanks
    3
    Thanked 967 Times in 955 Posts
    Blog Entries
    15

    Default

    londonic, please post a link to the page on your site that contains the problematic script so we can check it out.
    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
  •