0

無限の検索の後、私はこれを理解することを望んでいます。基本的に、ブラウザ ウィンドウのサイズが変更されたときに、スクリプトを取得して再起動する必要があります。私は危険なほどJSについて十分な知識しかありません。

スクリプトは、レスポンシブ テンプレートにある非レスポンシブ スライダーです。現在、ウィンドウが最初に読み込まれる解像度に基づいて、スクリプトは出力を変更し、適切に表示します。ただし、ウィンドウのサイズを変更すると、スクリプトがおかしくなり、見栄えが悪くなります。

スクリプトを書き直してサイズ変更をリッスンし、サイズを再計算できるようにしたいのですが、残念ながら私の知る限り、その作業は圧倒的です。スクリプトを再起動して、同様の結果が得られることを願っています。

これは、スライドショーが呼び出されるときです。

$(document).ready(function()
{
$("#showcase").awShowcase(
{
    content_height:         640,
    fit_to_parent:          true,
    auto:                   false,
    interval:               5000,
    continuous:             true,
    loading:                true,
    tooltip_width:          200,
    tooltip_icon_width:     32,
    tooltip_icon_height:    32,
    tooltip_offsetx:        18,
    tooltip_offsety:        0,
    arrows:                 true,
    buttons:                false,
    btn_numbers:            true,
    keybord_keys:           true,
    mousetrace:             false, /* Trace x and y coordinates for the mouse */
    pauseonover:            true,
    stoponclick:            false,
    transition:             'hslide', /* hslide/vslide/fade */
    transition_speed:       500,
    transition_delay:       300,
    show_caption:           'show', /* onload/onhover/show */
    thumbnails:             true,
    thumbnails_position:    'outside-last', /* outside-last/outside-first/inside-last/inside-first */
    thumbnails_direction:   'horizontal', /* vertical/horizontal */
    thumbnails_slidex:      0, /* 0 = auto / 1 = slide one thumbnail / 2 = slide two thumbnails / etc. */
    dynamic_height:         true, /* For dynamic height to work in webkit you need to set the width and height of images in the source. Usually works to only set the dimension of the first slide in the showcase. */
    speed_change:           false, /* Set to true to prevent users from swithing more then one slide at once. */
    viewline:               true /* If set to true content_width, thumbnails, transition and dynamic_height will be disabled. As for dynamic height you need to set the width and height of images in the source. It's OK with only the width. */

});
});

ウィンドウのサイズ変更を検出し、150 ミリ秒待機するコードも用意していますが、その後、道に迷ってしまいます。

var resizeTimer;
$(window).resize(function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {

}, 150);
});
4

1 に答える 1

0

更新: あなたのコメントに対応するためにこれを更新しました。スライダー コードが実行されると元の html 構造が変更されるように見えるため、コードを 2 回目に再実行することはできません。以下のソリューションは、元の html のバックアップ コピーを作成します。スライダーのコードを再実行する直前に、スライダーの html を元の状態に戻し、コードを再実行します。

これにより、スライダーが削除されて再作成されるときに、何らかのちらつきが発生する可能性があることに注意してください。親要素 (以下に示すスライドショー ラッパー) の css で固定の高さを指定していることを確認すると、これを回避できます。

  • バックアップ html を配置する新しい隠し div を作成します。何かのようなもの：
<div id="slideshow-backup" style="display:none;"></div>
  • 既存のショーケース div をラッパー内に配置します。スライドショー html を再作成するときにこれを使用します。
<div id="slideshow-wrapper" style="height: 800px">
    <div id="slideshow">
    ...
    </div>
</div>
  • スライドショー コードを配置する関数を作成する必要があります。ドキュメントの準備ができたときに一度呼び出し、ウィンドウのサイズが変更されるたびに同じ関数が呼び出されるように設定します。
function show_slider() {
    $("#showcase").awShowcase({
        content_height: 640
        // deleted the rest of the options for clarity...
    });
}

$(document).ready(function() {
    // make a backup copy of the original showcase div, and change its id to showcase-orig
    $('#showcase').clone().appendTo('#slideshow-backup').attr('id', 'showcase-orig');

    show_slider();

    var resizeTimer;
    $(window).resize(function() {
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(function() {
            // delete the modified showcase div
            $('#showcase').remove();
            // create a fresh copy of the slideshow from the backup div
            $('#showcase-orig').clone().appendTo('#showcase-wrapper').attr('id', 'showcase')

            // restart the slideshow
            show_slider();            
        }, 150);
    });

});​
于 2012-11-04T02:47:03.083 に答える