Need help with JQuery Image Magnifier

[seldomseensmith]

1) Script Title: JQuery Image Magnifier

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/imagemagnify.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

[jscheuer1]

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


$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

[seldomseensmith]

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