Nivo Slider Jquery 插件 - 图像自动调整大小

Posted 2023-03-06

【中文标题】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 不是很好。我可以在哪里发布我的脚本供您查看？