Nivo Slider plugin jQuery - immagini ridimensionando automaticamente

Question

DOMANDA:

Come posso ottenere le mie foto non essere saltato così in alto? E perché non riesco a vedere l'intera immagine?

SPIEGAZIONE:

ho messo il plugin jQuery Nivo Slider sulla mia pagina web e funziona benissimo! Il problema è quando inserisco un'immagine, l'immagine non è delle dimensioni giuste. L'immagine è sfocata e il cursore non mostra l'intera immagine. Ho guardato il CSS e mi sta bene. Qui è la mia HTML codice:

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

Qui è la mia CSS (ho due file CSS legato a questa pagina nivo-slider.css e bar.css per il Nivo Slider 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; 
} 

Ecco l'altro file 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; 
} 

Ecco script che ho usato. È lo script predefinito che viene fornito con il Plugin Jquery di Nivo Slider, tranne per il fatto che ho modificato leggermente le impostazioni. Sto solo andando a mostrare lo script che ho modificato perché mi sono limitato a 30000 caratteri:

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

Anche in questo caso, il problema è solo che l'immagine sembra fatto saltare in aria e non si può vedere tutto. Ho provato a impostare la larghezza per la classe .nivoSlider alla larghezza esatta dell'immagine, ma non funziona ancora. Grazie per l'aiuto in anticipo! E sì, ho fatto attivare il Jquery con questo codice:

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

Commento: Le immagini sono dimensionati come voglio che siano. Penso che sia il div che avvolge il cursore, che ha il problema. Non riesco a vedere perché le immagini sono così. Normalmente il Nivo Slider si ridimensiona per adattarsi all'immagine, ma ridimensiona la mia immagine per adattarla invece.

Answer 1

È necessario ridimensionare le immagini prima che vengano trasmesse all'utente. Se le immagini sono già sul server, è possibile utilizzare lo mogrify cammond from ImageMagik se si tratta di un server Linux.