1) Script Title: Image Power Zoomer v1.1

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

3) Describe problem:

I am not sure how to classify this issue, as part of the issue was already resolved in this forum, although this issue could be multi-part. I have a page full of materials, where if you click one of them, a higher layer z-index DIV pops up showing a profile of that specified material. I am able to enable the zoom if the DIV has a display to block, but once I set it to hidden, the activation of the zoom does not initiate.

The second problem is reinitializing the function ddpowerzoomer upon an image source change. I attempted to follow the instructions on the page http://www.dynamicdrive.com/forums/s...ad.php?t=63267 . Maybe the first issue is causing issues for the second one.

Here is the code that fires the zoomer:

Code:
jQuery(document).ready(function($){ //fire on DOM ready
 $('#profileimage1').addpowerzoom() //add zoom effect to all images inside DIV with ID "gallerydiv"
})

Code to set the material profile sources:

Code:
	// Function setProfile sets the photo in the materials profile
	function setProfile (profileImg) {
		//document.getElementById("profileimage1").src = "media/materials/" + profileImg + "ProfileImg1.jpg";
		document.getElementById("profileimage2").src = "media/materials/" + profileImg + "ProfileImg2.jpg";
		document.getElementById("profiletext").src = "media/materials/" + profileImg + "Profile.png";
		
		var src = "media/materials/" + profileImg + "ProfileImg1.jpg";
		
		var $img = jQuery('#profileimage1');
		$img.attr('src', src);
		
		ddpowerzoomer.$magnifier.outer.remove();
		ddpowerzoomer.init(jQuery);
		
		$img.addpowerzoom();
	}
And the actual profile of the Materials page:

Code:
<!-- Profile section of the all the Materials -->
    <div id="profile" style="width:823px; height:675px; border:none; margin:0px auto 0px auto; position:absolute; top:100px; left:188px; z-index:10; text-align:center; display:none;">
        <img id="profileback" src="media/materials/materialsProfileBack.png" style="position:absolute; top:0px; left:0px; padding:0; margin:0;" />
        <img id="profilestripes" src="media/materials/materialsProfileStripes.jpg" style="position:absolute; top:538px; left:28px; padding:0; margin:0;" />
    	<img id="profileimage1" src="media/materials/arnetteProfileImg1.jpg" style="position:absolute; top:122px; left:28px; padding:0; margin:0; width:363px; height:381px;" />
        <img id="profileimage2" src="" style="position:absolute; top:122px; left:433px; padding:0; margin:0; width:363px; height:381px;" />
        <img id="profiletext" src="" style="position:absolute; top:0px; left:0px; padding:0; margin:0;" />      
    	<a href="specs.php"><img id="downloadspec" src="media/materials/downloadspec.png" style="position:absolute; top:645px; left:28px;"  onMouseOver="imgroll('downloadspecRoll.png', 'downloadspec', 'materials')" onMouseOut="imgroll('downloadspec.png', 'downloadspec', 'materials')" /></a>
		<img src="media/materials/close.png" style="position:absolute; top:10px; right:10px;" onClick="jQuery('#profile').fadeOut('slow'); setTimeout('clearProfile()', 600);" />
    </div> <!-- End of DIV id="profile" -->
I have the code up on a test server at: http://www.woodsybond.com/HDwalls/materials.php
with all the files loaded for all to see.

I modified the js file as specified in the link above, but to no avail. Any assistance would be greatly appreciated.

Garden