Question

我有一个高级的wordpress主题，它带有一个内置的整页滑块。它很好地集成到我的网站，但它显示整页，下面的信息正在丢失。滑块响应窗口大小，我希望它只有60％。请有人帮忙：

(function ($) {
"use strict";
 $.fn.maximage = function (settings, helperSettings) {

var config;

if (typeof settings == 'object' || settings === undefined) config = $.extend( $.fn.maximage.defaults, settings || {} );
if (typeof settings == 'string') config = $.fn.maximage.defaults;

/*jslint browser: true*/
$.Body = $('body');
$.Window = $(window);
$.Scroll = $('html, body');
$.Events = {
  RESIZE: 'resize'
};

this.each(function() {
  var $self = $(this),
  preload_count = 0,
  imageCache = [];

  /* --------------------- */

  // @Modern

  /*
  MODERN BROWSER NOTES:
  Modern browsers have CSS3 background-size option so we setup the DOM to be the following structure for cycle plugin:
  div = cycle
  div = slide with background-size:cover
  div = slide with background-size:cover
  etc.
  */

  var Modern = {
    setup: function(){
      if($.Slides.length > 0){
        // Setup images
        for(var i in $.Slides) {
          // Set our image
          var $img = $.Slides[i];

          // Create a div with a background image so we can use CSS3's position cover (for modern browsers)
          $self.append('<div class="mc-image ' + $img.theclass + '" title="' + $img.alt + '" style="background-image:url(\'' + $img.url + '\');' + $img.style + '" data-href="'+ $img.datahref +'">'+ $img.content +'</div>');
        }

        // Begin our preload process (increments itself after load)
        Modern.preload(0);

        // If using Cycle, this resets the height and width of each div to always fill the window; otherwise can be done with CSS
        Modern.resize();
      }
    },
    preload: function(n){
      // Preload all of the images but never show them, just use their completion so we know that they are done
      //        and so that the browser can cache them / fade them in smoothly

      // Create new image object
      var $img = $('<img/>');
      $img.load(function() {
        // Once the first image has completed loading, start the slideshow, etc.
        if(preload_count==0) {
          // Only start cycle after first image has loaded
          Cycle.setup();

          // Run user defined onFirstImageLoaded() function
          config.onFirstImageLoaded();
        }

        // preload_count starts with 0, $.Slides.length starts with 1
        if(preload_count==($.Slides.length-1)) {
          // If we have just loaded the final image, run the user defined function onImagesLoaded()
          config.onImagesLoaded( $self );
        }else{
          // Increment the counter
          preload_count++;

          // Load the next image
          Modern.preload(preload_count);
        }
      });

      // Set the src... this triggers begin of load
      $img[0].src = $.Slides[n].url;

      // Push to external array to avoid cleanup by aggressive garbage collectors
      imageCache.push($img[0]);
    },
    resize: function(){
      // Cycle sets the height of each slide so when we resize our browser window this becomes a problem.
      //  - the cycle option 'slideResize' has to be set to false otherwise it will trump our resize
      $.Window
      .bind($.Events.RESIZE,
        function(){
          // Remove scrollbars so we can take propper measurements
          $.Scroll.addClass('mc-hide-scrolls');

          // Set vars so we don't have to constantly check it
          $.Window
          .data('h', Utils.sizes().h)
          .data('w', Utils.sizes().w);

          // Set container and slides height and width to match the window size
          $self
          .height($.Window.data('h')).width($.Window.data('w'))
          .children()
          .height($.Window.data('h')).width($.Window.data('w'));

          // This is special noise for cycle (cycle has separate height and width for each slide)
          $self.children().each(function(){
            this.cycleH = $.Window.data('h');
            this.cycleW = $.Window.data('w');
          });

          // Put the scrollbars back to how they were
          $($.Scroll).removeClass('mc-hide-scrolls');
        });
      }
    }

提前致谢。詹姆斯

Answer 1

通常，主题在管理面板上可以自定义。所以，你应该在手动更换之前检查一下。

如果您没有在管理面板（以及主题开发者页面）上找到自定义，您可能知道，当主题响应时，他们正在使用一些框架，如bootstrap，foundation，等等。然后，滑块必须有一个类似“大12”的css类，应该修改它以改变它的大小，例如“large-8”，然后滑块大小将是8/12。

希望对你有帮助！

jquery响应wordpress滑块高度变化

1 个答案: