問題タブ [turnjs]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
javascript - Turn.js - オブジェクト [object Object] にはメソッド「turn」がありません
私はかなり長い間コードで立ち往生しており、助けを求めようと決心しました。このコードは、Turn.js プラグインを使用して本を生成します。このプラグインは、一度エラーが発生するまで問題なく動作しましObject [object Object] has no method 'turn'
た。その後、さらにテストを開始し、ページの更新/訪問後にこのエラーポップアップがますます表示されるようになりました. これは、ページをロードするときに時々発生するものです (エラーを生成する時間の 1 ~ 5% で、ページを 50 回開いたとします)。エラーは、次のコードの 3 行目から始まります。
フリップブックの内容がエラーの有無にかかわらず異なるかどうかを確認しましたが、そうではないようです。これには、Turn.js を使用してブックを作成するために必要なすべてのページ (HTML ページ コンテンツ) が含まれています。私を助けるのに十分な情報であることを願っています。
エラーは常に発生するわけではないため、数回更新することを忘れないでください。
編集:
私のシステムだけでなく、複数のシステムで表示されます。turn.js がほぼ同時に読み込まれ、w で 1 回読み込まれるように感じますが、追いつくのが遅いためエラーが発生し、ターンでフリップブックを表示しますが、そこにはないと言います。
編集2:
エラーを生成する簡単な方法を見つけました。最初にリンクを開いてからコンソールを開き、ブラウザを最小化するか、別のタブを選択してから、前に開いたコンソールでページを更新します (コンソールで通常の f5 を押すだけです)。2 ~ 3 回でエラーが表示されます。これにより、エラーについて考えさせられ、レスポンシブにするために使用するビューポートのサイズ設定に疑問を抱くようになりました(はい、レスポンシブですが、現在表示されているページにはありません。これは、将来のWebサイトで使用され、iframeを使用した埋め込み共有コードになります) . しかし、ハードコードのサイジングに設定した後もポップアップします。
twitter-bootstrap - TurnJS とブートストラップ セクション
turnjs フリップブックを使用するセクションをブートストラップ Web アプリケーションに追加しようとしています。私のHTMLコード:
私のJSコード:
});
作業サンプルを持っている人はいますか?
turnjs - Turn.js を使用して動的にページを追加する
約 100 ページあり、それぞれに画像またはビデオが含まれています。本を作成している間、「for」ループで 100 ページすべてに対して addPage を呼び出しています。Turn.js は DOM に 6 ページしか保持しないため、この方法でロードしても問題ないと思いました。ただし、めくったときなど、イベントハンドラーで範囲内のいくつかのページをロードする例を見てきました。正しいアプローチは何ですか?
jquery - 各ページのTurn.jsライブラリとロード機能
私は TurnJS ライブラリを使用してフリップブックを作成しており、ツールチップ ライブラリも使用しています。
本とツールチップはいくつかのページで機能しますが、機能しない場合があります。ツールチップ機能が読み込めないようです。どうしてか分かりません。この問題を解決するには、特定のイベントを使用する必要がありますか? ここに私のツールチップ関数があります:
フリップブックを次のようにロードします。
ご協力いただきありがとうございます
javascript - Turn.js: 見開きページ表示形式のレスポンシブ デザインが機能しない
私はturn.jsを使用して取り組んでいます。API の統合に成功していないので、どこでエラーを起こしているのかを理解するために JSFiddle で作業を開始しました。私がフォローしている例は、Creative Technologistによる JSFiddle Demoです。ただし、単純なコピーと貼り付けを行うと、動作するデモmy demoを取得できません。本のページは隠されていません。
コードをローカルで実行すると、次のエラーが発生します
ブラウザが私に指示している部分的なコードは次のとおりです。
指している線がどこにあるか
現在、turnjs4 と jquery 2.1.1 を使用しています。
更新: ローカル ビューイングを完了することができました。現在、サーバー スタックでハンドルバーを使用しています。turn.min.js スクリプトを挿入したときに、jQuery スクリプトが挿入されたレイアウトで正しい順序ではありませんでした。テンプレートの順序を並べ替えて、レイアウト内の jQuery スクリプトの後に turn.min.js インジェクションを挿入しようとしましたが、それでも機能しませんでした。
最終的な解決策は、レイアウト ファイルの jQuery スクリプトの後に turn.min.js スクリプトを含めることでした。このようにして、jQuery スクリプトから関数を呼び出す turn.min.js ファイルが定義されました。
turnjs - turn.js で二重の現在のページを見つける方法はありますか?
私の要件は、現在のダブルページを次の形式で表示することです:-
- 2-3
- 4-5
一度に1ページしか表示できませんでしたが、2ページビューがあります。お気に入り
- 2対3で2
- 4-5 で 4
これらの現在のダブルページを期待される形式で取得するにはどうすればよいですか? ロジックを追加することでできることはわかっていますが、turnjs の内部ロジックで行う方がよいでしょう。表紙や最後のページのように、1ページしか来ないこともあるからです。turnjs だけで見つける方法があるはずです。どんな助けでも大歓迎です...前もって感謝します。
javascript - turn.js ページの box-shadow と left-margin の配置の問題
ページ フリップ turn.js で問題に直面しています
- 奇数ページと偶数ページの両方に box-shadow を設定しましたが、最初の実行では奇数ページのボックス シャドウが表示されます。2 回目のページめくりの時点で、ボックスの影は表示されません。いつでも見えないページでも。
- ページの左余白を設定しましたが、ページがずれません。
#flipbook{
width:400px;
height:300px;
margin-left:100px;
}
私はどこで間違っていますか? JSFiddle