Jquery – Centering image on Nivo Slider using default theme

cssjquerynivo-slider

To anyone who uses Nivo Slider, is there any straightforward way (or not) to center the image on the slider? I'm aware that Nivo Slider was designed to display images which perfectly "fit" the box (unlike the way I'm using it), but for technical reasons I'd rather try have the images centered instead of make all my images perfectly fit the Nivo box's width and height. Currently my Nivo slide looks like this:

http://dl.dropbox.com/u/12453703/nivo.png

Sorry I haven't provided any code examples of me trying this. My CSS knowledge isn't too great and most of my attempts at fixing the problem have either been looking at solutions on the web (and attempting to apply said solution), or trying out random one-lines in my stylesheet in an attempt to fix the problem.

If you'd like to know what CSS files I'm using, I'm using the default theme which can be downloaded here:
http://cloud.github.com/downloads/gilbitron/Nivo-Slider/nivo-slider2.7.1.zip

Thanks, I appreciate it.

Best Answer

The position of image is loading in javascript file. Edit "jquery.nivo.slider.js" (Please make sure to use this file instead of "jquery.nivo.slider.pack.js" in the header.)

Goto line 85:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat');

Find the above line. Change it to:

//Set first background
        slider.css('background','url("'+ vars.currentImage.attr('src') +'") no-repeat center');

Now you can see that your first image is in center. Just play around that file and you definitely make the whole images to center.

EDIT: Find this function: // Add slices for slice animations. Line 253. Edit the else part of that. Line 262

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat -'+ ((sliceWidth + (i * sliceWidth)) - sliceWidth) +'px 0%'

By changing 0% to 50% makes the image center vertically. Getting closer...

EDIT

Edit the above line once more and replace with below line.

background: 'url("'+ vars.currentImage.attr('src') +'") no-repeat 50%'

This will definitely works..

EDIT

Forget about all the above edits. Just replace your jquery.nivo.slider.js file with this one.

Related Solutions

Html – How to give text or an image a transparent background using CSS

Either use a semi-transparent PNG or SVG image or use CSS:

background-color: rgba(255, 0, 0, 0.5);

Here's an article from css3.info, Opacity, RGBA and compromise (2007-06-03).

<p style="background-color: rgba(255, 0, 0, 0.5);">
  <span>Hello, World!</span>
</p>

Javascript – Nivo Slider just not working properly

You've got a syntax error should be

<script type="text/javascript">
$(window).load(function() {
    $('#slider').nivoSlider({
        effect:'fade', // Specify sets like: 'fold,fade,sliceDown'
        animSpeed:500, // Slide transition speed
        pauseTime:3000, // How long each slide will show
        startSlide:0, // Set starting Slide (0 index)
        directionNav:true, // Next & Prev navigation
        directionNavHide:true, // Only show on hover
        controlNav:true, // 1,2,3... navigation
        controlNavThumbs:false, // Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, // Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', // Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
        keyboardNav:true, // Use left & right arrows
        pauseOnHover:false, // Stop animation while hovering
        manualAdvance:false, // Force manual transitions
        captionOpacity:0.8, // Universal caption opacity
        prevText: 'Prev', // Prev directionNav text
        nextText: 'Next' // Next directionNav text
     });
});
</script>

Best Answer

Related Solutions

Html – How to give text or an image a transparent background using CSS

Javascript – Nivo Slider just not working properly

Related Topic