locked
Nivo Slider JQuery RRS feed

  • Question

  • User-1835835255 posted

    I got the nivo-slider jquery slideshow function working, I set the image box to a specific height and when the images load they're too big for the box.  I could increase the height of the box and it would fix the problem but I want the box to be a specific height.  

    I have the height of Nivo Slider set to 406px but the images are too big and don't fit in the box correctly does anyone know how to fix this.

    I think if I was to proportionally reduce the size of the photo so it fit that would work and ideas would help.

    Thanks

    ASPX

    <div>  
            <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
            <link href="Styles/nivo-slider.css" rel="stylesheet" type="text/css" />
            <link href="Styles/Default.css" rel="stylesheet" type="text/css" />  
            <script src="Scripts/Demo.js" type="text/javascript"></script>
            										
    		<div class="slider-wrapper theme-default" align="center">
    			<div id="nivo-slider" class="nivoSlider">
    				<img src="images/slideshow/slide-0.jpg" alt="" title="Test" />
    				<img src="images/slideshow/slide-1.jpg" alt="" title="Test2" />
    				<img src="images/slideshow/slide-2.jpg" alt="" title="Test3" />
    				<img src="images/slideshow/slide-3.jpg" alt="" title="Test4" />
    			</div>					            
    			<script type="text/javascript">
    				$(window).load(function () {
    					$('#nivo-slider').nivoSlider();
    				});
    			</script>    					
    		</div>     	 	        
            <script type="text/javascript">
                $(window).load(function() {
                $('#nivo-slider').nivoSlider({
                effect: 'random',
                slices: 15,
                boxCols: 8,
                boxRows: 4,
                animSpeed: 500,
                pauseTime: 3000,
                startSlide: 0,
                directionNav: true,
                controlNav: true,
                controlNavThumbs: false,
                pauseOnHover: true,
                manualAdvance: false,
                prevText: 'Prev',
                nextText: 'Next',
                randomStart: false,
                beforeChange: function(){},
                afterChange: function(){},
                slideshowEnd: function(){},
                lastSlide: function(){},
                afterLoad: function(){}
                });
                });
            </script>							                                         
        </div>

    Nivo Slider CSS

    .nivoSlider {
    	;
    	width:1170px;
    	height:406px;
    	overflow: hidden;
    }
    .nivoSlider img {
    	;
    	top:0px;
    	left:0px;
    	max-width: none;
    }
    .nivo-main-image {
    	display: block !important;
    	 !important; 
    	width: 100% !important;
        height: auto;
    }
    
    /* If an image is wrapped in a link */
    .nivoSlider a.nivo-imageLink {
    	;
    	top:0px;
    	left:0px;
    	width:100%;
    	height:100%;
    	border:0;
    	padding:0;
    	margin:0;
    	z-index:6;
    	display:none;
    	background:white; 
    	filter:alpha(opacity=0); 
    	opacity:0;
    }
    /* The slices and boxes in the Slider */
    .nivo-slice {
    	display:block;
    	;
    	z-index:5;
    	height:100%;
    	top:0;
    }
    .nivo-box {
    	display:block;
    	;
    	z-index:5;
    	overflow:hidden;
    }
    .nivo-box img { display:block; }
    
    /* Caption styles */
    .nivo-caption {     
        bottom: 5px;  
        right:0px;
        max-width: 60%;  /* width cannot exceed 30% of Nivoslider's width */  
        text-align: center;
        overflow: hidden;
        background: none;
    	;		
    	background:#FFF;
    	color:#000;
    	width:30%;
    	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 {
    	;
    	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 {
    	text-align:center;
    	padding: 15px 0;
    }
    .nivo-controlNav a {
    	cursor:pointer;
    }
    .nivo-controlNav a.active {
    	font-weight:bold;
    }
    .slider-wrapper
    {
        ;
    }

    Default CSS

    .theme-default .nivoSlider {
    	;
    	background:url(loading.gif) no-repeat 50% 50%;
        margin-bottom:10px;
        
    }
    .theme-default .nivoSlider img {
    	;
    	top:0px;
    	left:0px;
    	display:none;
    }
    .theme-default .nivoSlider a {
    	border:0;
    	display:block;
    }
    
    .theme-default .nivo-controlNav {
    	text-align: center; ; bottom:0px; width:100%; padding:0px; z-index:999;
    }
    .theme-default .nivo-controlNav a {
    	display:inline-block;
    	width:22px;
    	height:22px;
    	background:url(../bullets.png) no-repeat;
    	text-indent:-9999px;
    	border:0;
    	margin: 0 2px;
    }
    .theme-default .nivo-controlNav a.active {
    	background- -22px;
    }
    
    .theme-default .nivo-directionNav a {
    	display:block;
    	width:30px;
    	height:30px;
    	background:url(arrows.png) no-repeat;
    	text-indent:-9999px;
    	border:0;
    	opacity: 0;
    	-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-default:hover .nivo-directionNav a { opacity: 1; }
    .theme-default a.nivo-nextNav {
    	background-position:-30px 0;
    	right:15px;
    }
    .theme-default a.nivo-prevNav {
    	left:15px;
    }
    
    .theme-default .nivo-caption {
        font-family: Helvetica, Arial, sans-serif;
    }
    .theme-default .nivo-caption a {
        color:#fff;
        border-bottom:1px dotted #fff;
    }
    .theme-default .nivo-caption a:hover {
        color:#fff;
    }
    
    .theme-default .nivo-controlNav.nivo-thumbs-enabled {
    	width: 100%;
    }
    .theme-default .nivo-controlNav.nivo-thumbs-enabled a {
    	width: auto;
    	height: auto;
    	background: none;
    	margin-bottom: 5px;
    }
    .theme-default .nivo-controlNav.nivo-thumbs-enabled img {
    	display: block;
    	width: 120px;
    	height: auto;
    }

     

    Friday, May 13, 2016 11:51 PM

Answers

  • User475983607 posted

    This is a question for nivo-slider support.  I'm not sure how or if the JQuery plugin will automatically resize images.

    Being that the images are jpg, you should re-size the images in image editing software.  Otherwise the the images might not look good depending on the aspect ration and such.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 14, 2016 4:34 PM

All replies

  • User61956409 posted

    Hi chjones2008,

    I have the height of Nivo Slider set to 406px but the images are too big and don't fit in the box correctly does anyone know how to fix this.

    If you’d like to specify the height of an image, you could try to set a height property for <img> tag.

    <img src="images/slideshow/slide-0.jpg" alt="" title="Test" height="406" />

    Best Regards,

    Fei Han

    Saturday, May 14, 2016 3:22 AM
  • User-1835835255 posted

    Nope didn't fix problem

    Saturday, May 14, 2016 3:46 PM
  • User475983607 posted

    This is a question for nivo-slider support.  I'm not sure how or if the JQuery plugin will automatically resize images.

    Being that the images are jpg, you should re-size the images in image editing software.  Otherwise the the images might not look good depending on the aspect ration and such.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, May 14, 2016 4:34 PM
  • User-1835835255 posted

    Thanks alot!  I updated my nivo-slider to the latest version, I was using a prior version and I used ...

    http://www190.lunapic.com/editor/

    To resize my images to the same width and height and it looks great and exactly as expecting now.

    Monday, May 16, 2016 6:08 PM