根据窗口宽度动态更改jQuery滑块选项 [英] Change jQuery slider option dynamically based on window width

问题描述

我想基于窗口宽度(加载和调整大小)更改jQuery选项.

我找到了接近我所需的解决方案，但是我对jQuery或javascript的了解不足，无法根据我的需要对其进行自定义.

这是我的jQuery代码:

<script type="text/javascript">
  var tpj = jQuery;

  tpj.noConflict();

  tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#rev_slider_1_1').show().revolution({
      delay: 5000,
      startwidth: 1920,
      startheight: 515,
      hideThumbs: 200,

      thumbWidth: 100,
      thumbHeight: 50,
      thumbAmount: 4,

      navigationType: "bullet",
      navigationArrows: "verticalcentered",
      navigationStyle: "navbar",

      touchenabled: "on",
      onHoverStop: "off",

      navOffsetHorizontal: 0,
      navOffsetVertical: 20,

      shadow: 0,
      fullWidth: "on"
    });

  }); //ready
</script>

我想根据窗口宽度更改startheight.

如果窗口宽度大于1280，我希望高度的值是515，如果窗口宽度小于1280，我希望高度的值是615，如果宽度小于480，则使高度715. /p>

在另一个帖子的帮助下我可以使用以下脚本更改所需的CSS:

$(window).on('load resize', function () {
  var w = $(window).width();
  $("#rev_slider_1_1 #rev_slider_1_1_wrapper")
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715);
});

但是我还需要即时更改jQuery startheight的值.

解决方案

为什么不在CSS中使用百分比.

我在这里创建了一个示例:

http://jsfiddle.net/webwarrior/aLJQm/52/

<div id="slider"></div>

Css:

#slider {
    width: 90%; 
}

要调整大小，请在调整大小时使用JavaScript，例如:

var clientWidth = jQuery(window).width();
var clientHeight = jQuery(window).height();
jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20);

现在尝试在图像上进行以下操作:

.slotholder{
    overflow: hidden;
}
.slotholder img{
    width: 110%;
    margin-left: -5%;
}

如 http://jsfiddle.net/webwarrior/wLFEJ/11/

hth

I would like to change a jQuery option based on window width (on load as well as on resize).

I've found solutions close to what I need, but I don't understand jQuery or javascript enough to customize them for my needs.

Here's my jQuery code:

<script type="text/javascript">
  var tpj = jQuery;

  tpj.noConflict();

  tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#rev_slider_1_1').show().revolution({
      delay: 5000,
      startwidth: 1920,
      startheight: 515,
      hideThumbs: 200,

      thumbWidth: 100,
      thumbHeight: 50,
      thumbAmount: 4,

      navigationType: "bullet",
      navigationArrows: "verticalcentered",
      navigationStyle: "navbar",

      touchenabled: "on",
      onHoverStop: "off",

      navOffsetHorizontal: 0,
      navOffsetVertical: 20,

      shadow: 0,
      fullWidth: "on"
    });

  }); //ready
</script>

I want to change the startheight based on window width.

If the window width is above 1280 I would like the value for the height to be 515, and if it is below 1280 I would like the height to be 615 and if the width is less than 480 make the height 715.

With help from another post I am able to change the css I need using this script:

$(window).on('load resize', function () {
  var w = $(window).width();
  $("#rev_slider_1_1 #rev_slider_1_1_wrapper")
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715);
});

But I need to also change the jQuery startheight value on the fly.

解决方案

Why don't you use percentages in CSS.

I created an example here:

http://jsfiddle.net/webwarrior/aLJQm/52/

<div id="slider"></div>

Css:

#slider {
    width: 90%; 
}

to resize, use JavaScript with something like this on your resize:

var clientWidth = jQuery(window).width();
var clientHeight = jQuery(window).height();
jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20);

Trying the following now on images:

.slotholder{
    overflow: hidden;
}
.slotholder img{
    width: 110%;
    margin-left: -5%;
}

as on http://jsfiddle.net/webwarrior/wLFEJ/11/

hth

这篇关于根据窗口宽度动态更改jQuery滑块选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！