Nivo Slider Jquery Plugin - images resizing automatically
QUESTION:
How can I get my pictures to not be so blown up? And why can I not see the whole image?
EXPLANATION:
I put the Nivo Slider Jquery Plugin on my webpage and it works great! The problem is when I put an image in, the image is not the right size. The image is blurry and the slider isn't showing the whole image. I looked at the CSS and it looks fine to me. Here is my HTML code:
<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>
Here is my CSS (I have two CSS files linked to this page nivo-slider.css and bar.css for the Nivo Slider theme).
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;
}
Here is the other CSS file. 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;
}
Here is script that I used. It is the default script that comes the Nivo Slider Jquery Plugin, except I messed around with the settings a little bit. I am only going to show you the script that I edited because I am limited to 30000 characters:
//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);
Again, the problem is just that the image looks blown up and you can't see all of it. I tried setting the width for .nivoSlider class to the exact width of the image, but its still not working. Thanks for the help in advance! And yes, I did activate the Jquery with this code:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Comment: The images are sized the way I want them to be. I think its the div that wraps the slider, that has the problem. I just can't see why the images are like this. Normally the Nivo Slider resizes itself to fit the image, but its resizing my image to fit it instead.
Answer
You should resize the images before they are dispayed to the user. If the images are already on the server you can probably use the mogrify cammond from ImageMagik if it's a Linux server.