PDA

View Full Version : Image Power Zoomer fire on display none div



gardentree44
09-11-2011, 10:23 AM
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/showthread.php?t=63267 . Maybe the first issue is causing issues for the second one.

Here is the code that fires the zoomer:


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:


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


<!-- 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