javascript - Nivoslider : change width and height of slider afterwards

Question

我正在开发 TYPO3 网站的移动版本。我在那里使用插件 nivoslider，它使用官方已知的 Nivo Slider。现在我必须减小 slider 的尺寸。我怎样才能做到这一点？

在 TYPO3 中，插件页面上有一个宽度和高度的设置，但这也会影响全尺寸网站。因为没有手册，我不认为我可以使用 Typoscript 来设置宽度和高度。

我试着用CSS设置宽度

.nivoSlider {
    width: 300px !important;
    height: auto !important;
}

.nivoSlider img {
    width: 300px !important;
    height: auto !important;
}

但是当加载 slider 时，它使用图片的正常大小。只有 slider 容器本身正在裁剪图像，但它的高度错误(只能看到点和图像的一小部分)。

我还尝试查看文档以查看是否可以以某种方式设置宽度和高度。但是我没有找到任何设置。有没有我可以使用的 javascript/jquery 解决方案？这不起作用:

$(document).ready(function() {

  $('.nivoslider img').each(function(index, element){
    alert('test');
    $(this).width(300);
    var src = $(this).attr("src");
    src = 'fileadmin/templates/timthumb/timthumb.php?src=' + src + '&w=300';
    $(this).attr("src", src);
  });
});

好像.nivoslider是后建的，但我的代码是前执行的。这是确认:

  if ($('.nivoslider').length != 0) {
    alert('element found');
  }else{
    alert('element NOT found');
  }

上面的代码给我 element NOT found，因为扩展的初始化在 header 的末尾，而我的代码在之前。如何在 TYPO3 中的 header 末尾包含 Javascript 代码？

现在我想我会使用这个 CSS，因为我没有看到任何解决方案:

.nivoslider {
显示:无；
}

Answer 1

你想看看这个...

http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/

##########################更新################# ############

上面的链接已被删除，请看下面的例子:

http://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/index.html