javascript Nivoslider：之后更改滑块的宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13477987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Nivoslider: change width and height of slider afterwards
提问by testing
I'm developing a mobile version of a TYPO3 site. There I use the plugin nivosliderwhich uses the official known Nivo Slider. Now I have to reduce the size of the slider. How can I reach this?
我正在开发 TYPO3 站点的移动版本。在那里我使用了nivoslider使用官方已知 Nivo Slider的插件。现在我必须减小滑块的大小。我怎样才能达到这个目标？
In TYPO3 there is a setting on the plugin page with width and height but this would affect also the full size website. Because there is no manual I don't think I can use Typoscript to set the width and the height afterwards.
在 TYPO3 中，插件页面上有一个宽度和高度设置，但这也会影响全尺寸网站。因为没有手册，我不认为我可以使用 Typoscript 之后设置宽度和高度。
I tried to set the width with CSS
我试图用 CSS 设置宽度
.nivoSlider {
width: 300px !important;
height: auto !important;
}
.nivoSlider img {
width: 300px !important;
height: auto !important;
}
but when the slider is loaded it uses the normal size of the pictures. Only the slider container itself is cropping the images but it has a wrong height (only dots and a small part of the image can be seen).
但是当滑块加载时，它使用图片的正常大小。只有滑块容器本身正在裁剪图像，但高度错误（只能看到点和图像的一小部分）。
I also tried to look into the documentation to see if I could set the width and the height somehow. But I didn't found any settings. Are there any javascript/jquery solutions I could use? This doesn't work:
我还尝试查看文档以查看是否可以以某种方式设置宽度和高度。但是我没有找到任何设置。我可以使用任何 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);
});
});
It seems that .nivoslideris built afterwards, but my code is executed before. This is the confirmation:
好像.nivoslider是后建的，但是我的代码是之前执行的。这是确认：
if ($('.nivoslider').length != 0) {
alert('element found');
}else{
alert('element NOT found');
}
The code above gives me element NOT found, because the initialisation of extension is at the end of the headerand my code is before. How can I include Javascript code at the end of the header in TYPO3?
上面的代码给了我element NOT found，因为扩展的初始化在 的末尾header而我的代码在之前。如何在 TYPO3 的标题末尾包含 Javascript 代码？
Now I think I will use this CSS, because I don't see any solution:
现在我想我会使用这个 CSS，因为我没有看到任何解决方案：
.nivoslider {
display: none;
}
.nivoslider {
display: none;
}
采纳答案by Alex Gill
You want to take a look at this...
你想看看这个...
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
http://nivo.dev7studios.com/2012/05/30/the-nivo-slider-is-responsive/
########################## UPDATE #############################
＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ 更新 ＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃＃ ######
The above link has been removed, please see the following for example:
上面的链接已被删除，请参见以下示例：
http://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/index.html
http://www.flynsarmy.com/wp-content/uploads/2012/09/nivoslider/index.html
回答by user3117737
change height by changing the height in the img tag in the html file and change width by changing the width in .slider-wrapper in style.css.
通过更改 html 文件中 img 标签中的高度来更改高度，通过更改 style.css 中 .slider-wrapper 中的宽度来更改宽度。
