私はフリップブック ライブラリを使用して cordova(ios) のカタログを作成しており、個々のページにズーム機能を追加しようとしています。
何らかの理由で、ズームは最初の 6 ページ/クラスでのみ機能します。
次のフィドルには画像が含まれておらず、remTemp 関数に問題があるようですが、ブラウザーと ios で動作することを保証します。
HTML:
<div id="zoomer"></div>
<div id="zoom-viewport">
<div id="flipbook">
<div class="flippage"><img src="pages/cover.jpg" class="small i1"></div>
<div class="flippage"><img src="pages/inner-cover.jpg" class="small i0"></div>
<div class="flippage"><img src="pages/1.jpg" class="small i1"></div>
<div class="flippage"><img src="pages/2.jpg" class="small i2"></div>
<div class="flippage"><img src="pages/3.jpg" class="small i3"></div>
<div class="flippage"><img src="pages/4.jpg" class="small i4"></div>
<div class="flippage"><img src="pages/5.jpg" class="small i5"></div>
<div class="flippage"><img src="pages/6.jpg" class="small i6"></div>
<div class="flippage"><img src="pages/7.jpg" class="small i7"></div>
<div class="flippage"><img src="pages/8.jpg" class="small i8"></div>
<div class="flippage"><img src="pages/9.jpg" class="small i9"></div>
<div class="flippage"><img src="pages/10.jpg" class="small i10"></div>
</div></div></div>
Javascript:
$('.small').click(function() {
cls = $(this).attr("class");
rem = 'small i';
clas = cls.replace(rem,'');
imagesrc = $(this).attr("src");
if (clas % 2 == 0) {
loc = "left";
$('body').append("<img src='"+imagesrc+"' id='temp' onclick='remTemp();'class='temp small' style='position:absolute; left:12px; top:199px; z-index:5 !important;'>");
}
if (clas % 2 != 0) {
loc = "right"
$('body').append("<img src='"+imagesrc+"' id='temp' onclick='remTemp();'class='temp small' style='position:absolute; left:512px; top:199px; z-index:5 !important;'>");
}
$(this).css('z-index','-1');
$('.temp').animate({
top: 10,
left: 10,
width:1000,
height: 707
}, 1000
);
});
function remTemp() {
$('img').remove('#temp');
}
6ページ後にクリック機能が停止する理由がまったくわかりません。最初のxページを削除しようとしましたが、どこから試しても6つだけです(合計94ページ)
ありがとう
*メモとして、私は多くの異なるセレクターを使用してみましたが、まだ同じ問題があります.