Nivo Slider Jquery 插件 - 图像自动调整大小
Posted
技术标签:
【中文标题】Nivo Slider Jquery 插件 - 图像自动调整大小【英文标题】:Nivo Slider Jquery Plugin - images resizing automatically 【发布时间】:2012-09-19 18:57:24 【问题描述】:问题:
我怎样才能让我的照片不被炸毁?为什么我看不到整个图像?
解释:
我将 Nivo Slider Jquery 插件放在我的网页上,效果很好!问题是当我放入图像时,图像尺寸不正确。图像模糊,滑块未显示整个图像。我查看了 CSS,它对我来说看起来不错。这是我的 html 代码:
<div class="theme-bar slider-wrapper">
<div id="slider" class="nivoSlider theme-bar">
<a href="#"><img src="images/slide1.jpg" /></a>
<img src="images/slide2.jpg" />
<img src="images/slide3.jpg" />
<img src="images/slide4.jpg" />
</div>
</div>
这是我的 CSS(我有两个 CSS 文件链接到此页面 nivo-slider.css 和 bar.css 用于 Nivo Slider 主题)。
nivo-slider.css:
.nivoSlider
position:relative;
width:100%;
height:auto;
overflow: hidden;
.nivoSlider img
position:absolute;
top:0px;
left:0px;
max-width: none;
.nivo-main-image
display: block !important;
position: relative !important;
width: 100% !important;
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink
position:absolute;
top:0px;
left:0px;
width:100%;
height:100%;
border:0;
padding:0;
margin:0;
z-index:6;
display:none;
/* The slices and boxes in the Slider */
.nivo-slice
display:block;
position:absolute;
z-index:5;
height:100%;
top:0;
.nivo-box
display:block;
position:absolute;
z-index:5;
overflow:hidden;
.nivo-box img display:block;
/* Caption styles */
.nivo-caption
position:absolute;
left:0px;
bottom:0px;
background:#000;
color:#fff;
width:100%;
z-index:8;
padding: 5px 10px;
opacity: 0.8;
overflow: hidden;
display: none;
-moz-opacity: 0.8;
filter:alpha(opacity=8);
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
.nivo-caption p
padding:5px;
margin:0;
.nivo-caption a
display:inline !important;
.nivo-html-caption
display:none;
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a
position:absolute;
top:45%;
z-index:9;
cursor:pointer;
.nivo-prevNav
left:0px;
.nivo-nextNav
right:0px;
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav
position: absolute;
left: 0;
bottom: -41px;
z-index: 10;
width: 100%;
height: 30px;
text-align: center;
padding: 5px 0;
border-top: 1px solid #333;
background: #333;
background: -moz-linear-gradient(top, #565656 0%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565656), color-stop(100%,#333333)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */
background: linear-gradient(to bottom, #565656 0%,#333333 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
opacity: 0.5;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
.theme-bar .nivo-controlNav
bottom: 0;
opacity: 1;
.nivo-controlNav a
display:inline-block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 5px 2px 0 2px;
cursor: pointer;
.nivo-controlNav a.active
background-position:0 -22px;
这是另一个 CSS 文件。 bar.css:
.theme-bar.slider-wrapper
position: relative;
border: 1px solid #333;
overflow: hidden;
.theme-bar .nivoSlider
position:relative;
background:#fafafa url(loading.gif) no-repeat 50% 50%;
.theme-bar .nivoSlider img
position:absolute;
top:0px;
left:0px;
display:none;
.theme-bar .nivoSlider a
border:0;
display:block;
.theme-bar .nivo-controlNav
position: absolute;
left: 0;
bottom: -41px;
z-index: 10;
width: 100%;
height: 30px;
text-align: center;
padding: 5px 0;
border-top: 1px solid #333;
background: #333;
background: -moz-linear-gradient(top, #565656 0%, #333333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#565656), color-stop(100%,#333333)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #565656 0%,#333333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #565656 0%,#333333 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #565656 0%,#333333 100%); /* IE10+ */
background: linear-gradient(to bottom, #565656 0%,#333333 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#565656', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
opacity: 0.5;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
.theme-bar:hover .nivo-controlNav
bottom: 0;
opacity: 1;
.theme-bar .nivo-controlNav a
display:inline-block;
width:22px;
height:22px;
background:url(bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin: 5px 2px 0 2px;
.theme-bar .nivo-controlNav a.active
background-position:0 -22px;
.theme-bar .nivo-directionNav a
display:block;
border:0;
color: #fff;
text-transform: uppercase;
top: auto;
bottom: 10px;
z-index: 11;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 20px;
opacity: 0.5;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
.theme-bar a.nivo-nextNav right: -50px;
.theme-bar a.nivo-prevNav left: -50px;
.theme-bar:hover a.nivo-nextNav
right: 15px;
opacity: 1;
.theme-bar:hover a.nivo-prevNav
left: 15px;
opacity: 1;
.theme-bar .nivo-directionNav a:hover color: #ddd;
.theme-bar .nivo-caption
font-family: Helvetica, Arial, sans-serif;
-webkit-transition: all 200ms ease-in-out;
-moz-transition: all 200ms ease-in-out;
-o-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
.theme-bar:hover .nivo-caption
bottom: 41px;
.theme-bar .nivo-caption a
color:#fff;
border-bottom:1px dotted #fff;
.theme-bar .nivo-caption a:hover
color:#fff;
.theme-bar .nivo-controlNav.nivo-thumbs-enabled
width: 100%;
.theme-bar .nivo-controlNav.nivo-thumbs-enabled a
width: auto;
height: auto;
background: none;
margin-bottom: 5px;
.theme-bar .nivo-controlNav.nivo-thumbs-enabled img
display: block;
width: 120px;
height: auto;
这是我使用的脚本。它是 Nivo Slider Jquery 插件附带的默认脚本,除了我稍微弄乱了设置。我只向您展示我编辑的脚本,因为我被限制在 30000 个字符以内:
//Default settings
$.fn.nivoSlider.defaults =
effect: 'fade',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 550,
pauseTime: 3500,
startSlide: 0,
directionNav: false,
controlNav: true,
controlNavThumbs: false,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(),
afterChange: function(),
slideshowEnd: function(),
lastSlide: function(),
afterLoad: function()
;
$.fn._reverse = [].reverse;
)(jQuery);
同样,问题在于图像看起来被炸毁了,而您看不到所有图像。我尝试将 .nivoSlider 类的宽度设置为图像的确切宽度,但它仍然无法正常工作。我在这里先向您的帮助表示感谢! 是的,我确实使用以下代码激活了 Jquery:
<script type="text/javascript">
$(window).load(function()
$('#slider').nivoSlider();
);
</script>
评论: 这些图像的大小是我想要的。我认为它包裹滑块的 div 有问题。我只是不明白为什么图像是这样的。通常 Nivo Slider 会自行调整大小以适合图像,但它会调整我的图像大小以适合它。
【问题讨论】:
很抱歉。我的问题是:我怎样才能让我的照片不被炸毁?为什么我看不到整个图像? 嘿,我正在研究这个。我没有使用 wordpress 插件,只是使用独立的 jquery 插件。为了修复它,我只是在 .slider-wrapper 中添加了一个自定义宽度。它默认为 100%,我将其设置为 50%。 默认情况下,Nivo Slider 的宽度为 100%,并响应容器的大小。如果你想要一个特定的大小,只需将整个滑块放在一个固定大小的容器中。 【参考方案1】:您应该在将图像显示给用户之前调整其大小。如果图像已经在服务器上,如果是 Linux 服务器,您可能可以使用mogrify cammond from ImageMagik。
【讨论】:
图像的大小是我想要的。我认为它包裹滑块的 div 有问题。我只是不明白为什么图像是这样的。通常 Nivo Slider 会调整自身大小以适应图像,但它会调整我的图像大小以适应 it。你知道我在说什么吗? 我将 Jquery 脚本从我的网页中取出,图像看起来很好,它们是正常大小和一切。显然,既然我把我的脚本拿出来了,滑块就不起作用了,你们中的一个人可以看看我的 Jquery,看看里面是否有什么东西把我的图像弄乱了吗?我对 Jquery 不是很好。我可以在哪里发布我的脚本供您查看?以上是关于Nivo Slider Jquery 插件 - 图像自动调整大小的主要内容,如果未能解决你的问题,请参考以下文章