我正在开发TYPO3网站的移动版本。在那里我使用插件nivoslider
,它使用官方已知的Nivo滑块。现在我必须减小滑块的大小。我怎么能达到这个目标?
在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;
}
答案 0 :(得分: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
答案 1 :(得分:0)
通过更改html文件中img标记的高度来更改高度,并通过更改style.css中.slider-wrapper中的宽度来更改宽度。