1

ウィンドウ幅 (ロード時とサイズ変更時) に基づいて 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 にします。

別の投稿の助けを借りて、このスクリプトを使用して必要な 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);
});

startheightしかし、その場で jQuery の値も変更する必要があります。

4

2 に答える 2

1

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

于 2012-09-03T03:53:26.283 に答える
0

Modify the 'load resize' event binding like so:

$(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);
  if(w > 1280) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 515);}
  else if(w < 1280 && w > 480) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 615); }
  else { tpj('#rev_slider_1_1').revolution('option', 'startheight', 715); }      
});

This would work for most jquery plugins, but since you seem to be using a paid plugin (http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848 would be my guess), the customization might be restricted - so, All the Best! :)

于 2012-09-03T08:22:09.077 に答える