Magnifying an Image in Horizontal SlideShow?

First of all I just want to thank everyone on this forum for providing such great information. I have referenced this site dozens of times while creating my website. But, now I'm stuck and I can't find an answer!

First, I created a horizontal slide-show and then I was reading a thread on here about magnifying images using Dynamic Drive's instructions: http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

I have the slide show working and I can get the magnify image script to work on a separate blank html file, but I cannot combine the two. Is there something I am missing? I can provide the codes I'm using, if necessary.

 

I think providing us with the coding would be a great help to anyone willing to help and give you an answer.

 

In the Head:
Step 1: For the Slide Show:
<script type="text/javascript">var addthis_pub = 'gloryless';</script><script type="text/javascript" src="http://s9.addthis.com/js/widget.php?v=10"></script>

For the Magnifying:
Step 2: <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="jquery.magnifier.js">

/***********************************************
* jQuery Image Magnify- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

In the Body:
Step 3: (For the horizontal slide show)
<script language="JavaScript1.2">

//Specify the slider's width (in pixels)
var sliderwidth="920px";
//Specify the slider's height
var sliderheight="150px";
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=2;
//configure background color:
slidebgcolor="#f9fada"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide='';
leftrightslide[0]='<img src="Pictures/Sales&amp;Listings/Chula Vista.jpg" class="magnify" width="150" height="99" alt=" Display 1 " border=1></a>';
leftrightslide[1]='<a href="http://"><img src="Pictures/Sales&amp;Listings/10 Glastonbury front.jpg" width="150" height="99" alt=" Display 2 " border=1></a>';
leftrightslide[2]='<a href="http://"><img src="Pictures/Sales&amp;Listings/562093_12581_13.jpg" width="150" height="99" alt=" Display 3 " border=1></a>';
leftrightslide[3]='<a href="http://"><img src="Pictures/Sales&amp;Listings/Cook Ln.jpg" width="150" height="99" alt=" Display 4 " border=1></a>';
leftrightslide[4]='<a href="http://"><img src="Pictures/Sales&amp;Listings/Lido Front.jpg" width="150" height="99" alt=" Display 5 " border=1></a>';
leftrightslide[5]='<a href="http://"><img src="Pictures/Sales&amp;Listings/Ocean Breeze.jpg" width="150" height="99" alt=" Display 6 " border=1></a>';

////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>';
var iedom=document.all||document.getElementById;
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>')
var actualwidth='';
var cross_slide, ns_slide;

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+20+"px"
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px"
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30+"px"

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px"
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30+"px"

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}


if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>')
write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>');
}
}
</script>

For the Magnify
Step 4: I downloaded the jquery.magnifier javascript from http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm
/* 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)? {wptions.thumbdimensions[0], hptions.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()
})
})
})

Step 5: I add class="magnify" to the slideshow img tags.

For example:"leftrightslide[0]='<img src="Pictures/Sales&amp;Listings/Chula Vista.jpg" class="magnify" width="150" height="99" alt=" Display 1 " border=1></a>';"