Nivo Deslizador plugin de jQuery - imágenes redimensionar automáticamente

Question

PREGUNTA:

¿Cómo puedo conseguir mis imágenes no ser tan volado? ¿Y por qué no puedo ver toda la imagen?

EXPLICACIÓN:

pongo el Nivo Deslizador plugin de jQuery en mi página web y funciona muy bien! El problema es cuando coloco una imagen, la imagen no es del tamaño correcto. La imagen está borrosa y el control deslizante no muestra toda la imagen. Miré el CSS y me parece bien. Aquí es mi HTML código:

 <div class="theme-bar slider-wrapper"> 
      <div id="slider" class="nivoSlider theme-bar"> 
       <a href="#"><img src="images/slide1.jpg" alt="" /></a> 
       <img src="images/slide2.jpg" alt="" /> 
       <img src="images/slide3.jpg" alt="" /> 
       <img src="images/slide4.jpg" alt="" /> 
      </div> 
     </div> 

aquí es mi CSS (He dos archivos CSS vinculado a esta página nivo-slider.css y bar.css para el Control deslizante Nivo tema).

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; 
} 

Aquí es otro archivo 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; 
} 

Aquí está la escritura que he usado. Es la secuencia de comandos predeterminada que viene con el complemento Nivo Slider Jquery, excepto que me metí un poco con la configuración un poco. Yo sólo voy a mostrar el guión que he editado porque yo estoy limitado a 30000 caracteres:

//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); 

Una vez más, el problema es que la imagen se ve volado y no se puede ver todo. Intenté establecer el ancho para .nivoSlider clase al ancho exacto de la imagen, pero todavía no está funcionando. ¡Gracias por la ayuda por adelantado! Y sí, lo hice activar el Jquery con este código:

<script type="text/javascript"> 
$(window).load(function() { 
    $('#slider').nivoSlider(); 
}); 
</script> 

Comentario: Las imágenes son de un tamaño como yo quiero que sean. Creo que es el div que envuelve el control deslizante, que tiene el problema. Simplemente no puedo ver por qué las imágenes son así. Normalmente, el control deslizante de Nivo se redimensiona para ajustarse a la imagen, pero cambia el tamaño de la imagen para que encaje en su lugar.

Answer 1

Debe cambiar el tamaño de las imágenes antes de que se muestren al usuario. Si las imágenes ya están en el servidor, probablemente pueda usar el mogrify cammond from ImageMagik si se trata de un servidor Linux.