0

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

1 に答える 1

0

関数 mytest() は最初の画像/ページにのみ適用されます。すべてのページに適用する必要があると思います:

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

ラインも

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

bookflipドキュメントの準備ができたら、空の div (id: ) に適用されます。

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

これを試して ：

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

または、bookflip がその要素を構築するのを待って、ウィンドウの読み込み時に powerzoom を適用することもできます。

$(window).load(function() { 
  $('#bookflip img').addpowerzoom(); 
});
于 2013-07-17T08:12:11.853 に答える