我正在开发TYPO3网站的移动版本。我在那里使用插件nivoslider,该插件使用官方已知的Nivo Slider。现在,我必须减小滑块的大小。我怎样才能做到这一点?

在TYPO3中,插件页面上有一个宽度和高度的设置,但这也会影响完整大小的网站。因为没有手册,所以我认为以后不能使用Typoscript来设置宽度和高度。

我试图用CSS设置宽度

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

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


但是加载滑块后,它将使用图片的正常尺寸。仅滑块容器本身正在裁剪图像,但是高度错误(只能看到点和图像的一小部分)。

我还尝试查看文档以查看是否可以通过某种方式设置宽度和高度。但是我没有找到任何设置。我可以使用任何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的标头末尾包含Javascript代码?

现在,我认为我将使用此CSS,因为我看不到任何解决方案:

.nivoslider { display: none;}

最佳答案

您想看看这个...

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

######################### UPDATE ####################### ######

上面的链接已删除,请参见以下示例:

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

关于javascript - Nivoslider:之后更改滑块的宽度和高度,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/13477987/

10-11 13:51