重置浏览器上的jQuery脚本调整大小

Question

无尽的搜索后，我希望得到这个想法。基本上我需要一个脚本并在浏览器窗口调整大小时重新启动它。我只知道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. */ 

}); 
}); 

我也有在地方检测的窗口大小调整，等待150ms的代码，但后来我迷路了。

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

}, 150); 
}); 

Answer 1

更新：我已更新此回复您的评论。看起来您的滑块代码一旦运行就会修改原始html结构，因此您不能再次运行代码。下面的解决方案制作了原始html的备份副本。在重新运行滑块代码之前，您将滑块html恢复到原始状态，然后重新运行代码。

请注意，当滑块被删除并重新创建时，这可能会导致某种闪烁。如果你确定在CSS中为父元素指定了一个固定的高度（幻灯片包装器如下所示），你可以避免这种情况。

• 创建一个新的隐藏的div，您将放置备份html。喜欢的东西：

<div id="slideshow-backup" style="display:none;"></div> 

• 将您现有的展示DIV的包装内。

<div id="slideshow-wrapper" style="height: 800px"> 
    <div id="slideshow"> 
    ... 
    </div> 
</div> 

• 您需要创建在其中放幻灯片的代码功能：当我们重新创建幻灯片HTML我们将使用这一点。你怎么称呼它，一旦当文件已准备就绪，并设置相同的功能，每当窗口大小被称为：

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); 
    }); 

});​