Jquery Magnifier 다음 이미지를 클릭하면 사라집니다.

Question

BookFlip v4와 Dynamic Drive Power Zoomer를 사용하여 프로젝트를 수행합니다. 기본적으로 롤오버 확대 기능이있는 온라인 잡지입니다.

모든 것이 올바르게 구성되었으므로 DDPZ는 첫 번째 페이지를 확대합니다.하지만 다음 페이지로 넘기면 사라지고 탐색 버튼을 통해 기본 페이지로 돌아 가면 표시되지 않습니다. 버튼을 누른 후 스크립트를로드하지 않는 것으로 의심됩니다. 도움. 아래

<script type="text/javascript"> 

jQuery(document).ready(function($){ //fire on DOM ready 


//EXAMPLE 1: 
//$('#myimage').addpowerzoom() 

//EXAMPLE 2: 
$('#bookflip img').addpowerzoom({ 
    defaultpower: 2, 
    powerrange: [2,7], 
    largeimage: null, 
    magnifiersize: [200,200] //<--no comma following last option! 
}) 

}) 


</script> 

내가 목표로하고있는 이미지입니다 :

<div id="bookflip"> 
</div> 

</div> 
<div id="pages" style="width:1px;height:1px;overflow:hidden;"> 
    <div style="background-color:white;"></div> 


    <div name="Front"><img src="images/KWC-Raya1.jpg" /></div> 

    <div><img src="images/KWC-Raya2.jpg" /></div> 
    <div><img src="images/KWC-Raya3.jpg" /></div> 
    <div><img src="images/KWC-Raya4.jpg" /></div> 
    <div><img src="images/KWC-Raya5.jpg"></div> 
    <div><img src="images/KWC-Raya6.jpg"></div> 
    <div><img src="images/KWC-Raya7.jpg"></div> 
    <div><img src="images/KWC-Raya8.jpg"></div> 
    <div><img src="images/KWC-Raya9.jpg"></div> 
    <div><img src="images/KWC-Raya10.jpg"></div> 
    <div><img src="images/KWC-Raya11.jpg"></div> 
    <div><img src="images/KWC-Raya12.jpg"></div> 
    <div><img src="images/KWC-Raya13.jpg"></div> 
    <div><img src="images/KWC-Raya14.jpg"></div> 
    <div><img src="images/KWC-Raya15.jpg"></div> 
    <div><img src="images/KWC-Raya16.jpg"></div> 
    <div><img src="images/KWC-Raya17.jpg"></div> 
    <div><img src="images/KWC-Raya18.jpg"></div> 
    <div><img src="images/KWC-Raya19.jpg"></div> 
    <div><img src="images/KWC-Raya20.jpg"></div> 
    <div><img src="images/KWC-Raya21.jpg"></div> 
</div> 

Answer 1

기능 MYTEST()가 첫 번째 이미지/페이지에 applyed, 나는이 모든 페이지에 있어야한다고 생각 :

또한

<div><img onclick="myTest()">...</div> 

라인

$('#bookflip img').addpowerzoom({ ... 

문서에 준비된 빈 div (id : bookflip)에 적용됩니다.

$(document).ready(function() { 
    $('#pages img').addpowerzoom(); 
}); 

또는 우리는 요소를 구축 bookflip 대기 창 부하에 powerzoom을 적용 할 수 있습니다 :

<div id="bookflip"> 
</div> 

이 시도 bookflip 아래 사업부는 자바 스크립트에 의해 자동 생성됩니다

$(window).load(function() { 
    $('#bookflip img').addpowerzoom(); 
});