jquery - 使用默认主题在 Nivo Slider 上居中图像？

Question

对于使用 Nivo Slider 的任何人，是否有任何直接的方法(或不)将图像在 slider 上居中？我知道 Nivo Slider 的设计目的是显示完全“适合”盒子的图像(与我使用它的方式不同)，但出于技术原因，我宁愿尝试将图像居中，而不是使所有图像完美地显示适合 Nivo 盒子的宽度和高度。目前我的 Nivo 幻灯片如下所示:

http://dl.dropbox.com/u/12453703/nivo.png

抱歉，我没有提供任何尝试此操作的代码示例。我的 CSS 知识不太丰富，我解决问题的大多数尝试要么是在网络上寻找解决方案(并尝试应用所述解决方案)，要么在样式表中尝试随机一行以尝试修复问题所在。

如果您想知道我正在使用哪些 CSS 文件，我使用的是默认主题，可以在此处下载: http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip

谢谢，我很感激。

Answer 1

图像的位置正在 javascript 文件中加载。编辑“jquery.nivo.slider.js”(请确保在 header 中使用此文件而不是“jquery.nivo.slider.pack.js”。)

转到第 85 行:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

找到上面的行。将其更改为:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');

现在您可以看到您的第一张图像位于中心。只需播放该文件，您就可以使整个图像居中。

编辑:找到这个函数://为切片动画添加切片。第 253 行。编辑其中的其他部分。第262行

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

通过将 0% 更改为 50%，使图像垂直居中。越来越近了...

编辑

再次编辑上面的行并替换为下面的行。

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'

这绝对有效..

编辑

忘记所有上述编辑。只需将 jquery.nivo.slider.js 文件替换为 this one .