Results 1 to 3 of 3

Thread: Need help with JQuery Image Magnifier

  1. #1
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Need help with JQuery Image Magnifier

    1) Script Title: JQuery Image Magnifier

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

    3) Describe problem: I have been using this awesome JS code on my blog http://thejourneyofseldomseen.blogspot.com for the last 2 years with no issues, but Blogger is forcing everyone to change to a new user interface, and for some reason the image magnifier no longer works. I have turned Lightbox off, but when clicking the image instead of the usual in place "zoom out" it redirects to a new page.

    I have noticed the image coding is very different from the old interface -

    Old interface:<a><img style="float:right; margin:10pt 10pt 10px 10px;cursor: pointer; cursor:hand;width: 280px; height: 210px;" src="https://lh3.googleusercontent.com/-8FxJPuwYw0M/TqIxH9nRwAI/AAAAAAAALT0/7gpzGoUhtOM/s800/IMG_6558.jpg" border="0" img class="magnify" magnifyby="3" alt="" /></a>

    New interface image coding:<div class="separator" style="clear: both; text-align: center;">
    <a href="https://lh6.googleusercontent.com/-EilAUk34AWs/TeLE6UISBZI/AAAAAAAAIwk/KdwcveiTvIA/s800/IMG_1712.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="210" width="280" src="https://lh6.googleusercontent.com/-EilAUk34AWs/TeLE6UISBZI/AAAAAAAAIwk/KdwcveiTvIA/s800/IMG_1712.jpg" img class="magnify" magnifyby="3" /></a></div>

    Text in red is what gets inserted into image code for magnifier to work.

    I'm not especially bright or experienced when it comes to HTML and CSS, but if someone knows how I can fix this issue I would be very grateful.

    Eric

  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

    I just went to the page and it was still in the old format. From what you say though, editing the jquery.magnifier.js script should do the trick. Open it up in a text only editor like NotePad. Find this section and add the highlighted (two places):

    Code:
    		$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', display:'block'})
    			.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
    			return false;
    		}) //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
    			return false;
    		}) //end click
    - 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:

    seldomseensmith (10-25-2011)

  4. #3
    Join Date
    Oct 2011
    Posts
    2
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    John,

    I am very thankful for your quick and accurate response - the change to the coding has solved the problem.

    BTW - the old format is still in place because Blogger has not yet made the new interface mandatory.... yet. But I have been dreading the day when it happens because like most old dogs I don't learn new tricks easily. Thanks to you I can remain set in my ways

    Eric

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
  •