WordPress Plugin Nivo Slider Light

Eine der unauffälligsten Bildergalerien ist der Nivo Slider. Außer zwei Pfeilen im Bild oder wahlweise einer Reihe Punkten unter dem Bild ist keine Navigation zu sehen. Die Bilder wechseln automatisch nach einer einstellbaren Zeit, wenn man nicht klickt. Die Übergänge zwischen den Bildern sind fließend, das Script wurde in jQuery geschrieben.

Um diese Bildergalerie in WordPress zu nutzen, schrieb ich das Plugin Nivo Slider Light. Es beeinflusst keine andere Galerie und ist nicht mit der Mediathek verbunden. Um das Plugin einzubinden muss statt dessen der HTML-Code der Galerie manuell in den Artikel getippt werden:

<div class="nivoSlider"  style="height:200px; width:600px;">
  <img src="/wp-content/uploads/image1.jpg" />
  <img src="/wp-content/uploads/image2.jpg" />
  <img src="/wp-content/uploads/image3.jpg" />
  <img src="/wp-content/uploads/image4.jpg" />
  <img src="/wp-content/uploads/image5.jpg" />
</div>

Über den Plugin-Editor im Administrationsbereich von WordPress lassen sich alle Einstellungen am Slider vornehmen und die CSS-Datei bearbeiten.

Demo1 – Demo2 – Nivo Slider Light Installation

Das Syntax Highlighting geschieht auch in diesem Artikel mit dem WordPress Plugin Jush Syntax Highlighter. Wenn Vorschaubilder der Galerie angezeigt werden sollen und eine Verbindung mit der WordPress Mediathek gefragt ist, lohnt sich ein Blick auf die schlichte WordPress Simple Scrollbar Gallery.

131 thoughts on “WordPress Plugin Nivo Slider Light”

  1. Ich finde diese unauffälligen Bildergalerien an sich sehr gut. Auch die Navivation im Bild verwende ich schon auf vielen meiner Blogs, diese hat sich einfach am besten bewährt (Response der User).

    Reply

  2. Ist es möglich für Sie diesen plugin in einer solchen Weise an zu passen, dass es funktioniert mit dem [Galerie] Shortcode?

    Reply

  3. Just began trying to use the Nivo Slider Light plugin for WordPress.

    I am following the instructions to the letter and have copied the code into the page exactly as the example gives in the installation instructions.

    The problem is that when you mouse over the gallery when an image with a link, the image disappears (or perhaps the slider stopped at that point, or possibly some opaque image was displayed over the original image, etc). But the point is, when you hover over the image (with link), you no longer see the image (although you do see the nav links on the left and right.

    It does NOT make an image disappear if the image has no link. The image only disappears if it has a link attached to it (in the coding of the example it shows the link is wrapped around the image). All other images are unaffected by hovering over with your mouse.

    I have about pulled my hair out trying to figure out why it does this, especially since my coding is identical to the example given in the instructions. I have to have each image with a link, so the Nivo Slider Light is useless for me if I can’t get past this.

    I would consider trying Nivo Slider, but I need to be able to put a different set of images and links on each category page… and to me it looks like on Nivo Slider Light can do this.

    Anyone’s help is greatly appreciated.

    Reply

  4. I’m having a problem with the plugin in Firefox and Safari, but it works fine in IE. The slider loads, but the images do not, and the loading spinning disc just keeps spinning.

    Could this be because another plugin is already loading jQuery? If so, what code should I change in this plugin to make it reference the already loaded jQuery, instead of doing it twice?

    I really appreciate any help you can give 🙂

    Reply

    • There should be no problems with other plugins. jQuery should load only once, and even if it is called multiple times it should be no problem. Have a look in the HTML code and disable other plugins temporarily.

      Reply

        • I tried to figure out your issue for over one hour now. The only thing I found is a bad description of #nivoSlider in your style.css. What happens, if you delete the lines for position, overflow and others?

          Reply

          • I deleted the styling for #nivoSlider, and still no progress in Firefox, Safar, Opera, although IE still works. I really appreciate your help, though I suppose I will just have to try another plugin 🙁 I love yours, and will be using it in another website soon. Thanks again!

  5. I’m having the same issues. I just get a blue box with the loader and images don’t show (I’ve checked image paths, css, plugin conflicts, etc)

    Reply

  6. erst mal danke viel mal für das plugin!
    ich habe eine eigene shortcode funktion geschrieben und jetzt funktioniert es perfekt mit den an post oder page angehängten jpgs.
    eine frage habe ich noch beim design. wo kann ich die “caption” von “p” tag auf “h3” ändern?

    falls es in deinem interesse ist, könnte ich die lösung hier posten.

    Reply

    • Wie man das Element der Captions ändert, weiß ich nicht. Die haben ja <p class=”wp-caption-text”>. Das könntest du zur Not mit einem regulären Ausdruck nachträglich in H3 umwandeln. So macht es zumindest das Plugin disable WPauto mit den nofollow-Attributen.

      Dein Plugin stelle ich gerne in meinem Artikel vor.

      Reply

  7. Hello, I am using your plugin, thank you very much for developing it. I tried to embed nivo slider myself but couldn’t figure out so I decided to give your plugin a shot.

    It appears that the plugin is not compatible with my theme. When I am using the default theme the slider works perfectly but when I enable my theme the loading bar just spins forever and the images never show up.

    Is there any way you would be willing to look at my theme to figure out what is causing it not to display correctly? Thanks again for your time!

    I am using the “Charming” theme which can be downloaded for free from here:
    http://fthemes.com/demo/Charming/

    Reply

    • You need to center the DIV element with the images with CSS. If you have pictures with 200×100 and your articles have a width of 600px just set style=”width:200px; height:100px; margin-left:200px;”.

      Then you have 200px on the left side, then 200px for the slider and then 200px free on the right side.

      Reply

  10. Hi,

    danke für das Plugin!
    Ich schaffe es aber irgendwie nicht, die Thumbnails zu aktivieren. Habe m. M. n. alle notwendigen Einstellungen getätigt, aber ich krieg nicht nicht hin. Hast du nen Tipp? Oder hast du die Thumbnail-Version überhaupt im Plugin unterstützt?

    Danke!
    Pit

    Reply

  11. Hi there. I must say, honestly I don’t understand much of what you’ve written here.
    But I have installed and activated your plugin. And I am so amazingly thankful for your good work. I have been searching for this kind of “light” implementation of a jQuery slider, I’ve been through all the premium, free and advanced sliders all over the internet and finally I found it! You’ve made my month. So again. Thanks a lot 🙂

    Keep doing the great job you are doing!

    Reply

    • I need help on setting up this pluging for a page…. I am going crazy.. followed the steps but (I am not literate in this programming or coding thing) cannot make it work, only the pictures that I uploaded and placed in the html script show but not as slider…. and of course the slider plugin is active…… need help! if someone is willing to explain to me how this works in wordpress. they can email me at: lorraine_a@alascs.com

      Reply

  12. I agree with the previous commenter. Great simple implementation of JQuery slider. I do have one question (maybe more). The documentation all points back to the main dev7studios page for support. But there is no info there for the Slider – Light version. I’d like to be ablee to customize the slider styles for different slide shows, but am unsure how to do that. Is there short-codes that can be included with the initial slider call: {div class=”nivoSlider” style=”height:200px; width:600px;”} to adjust duration, transition style, etc?

    Thanks.

    Awesome job!

    Reply

    • All the documentation on the dev7studios page holds true for this plugin. Maybe I can help you really simple. You see the call $('.nivoSlider').nivoSlider({ ... }); in the plugin’s source. Just copy and paste it several times for all the types of slide shows you have. Then change the class in the first line: $('.nivoSlider3').nivoSlider({ Change the classes of your sliders and you are done.

      If you only have three or four types of slide shows this will be the best way.

      Reply

  13. Thank you so much for this amazing plug in!! Just one question. Is there a way to remove the drop shadow from the slider?

    Reply

    • The error is in your javascript. You have an old version of nivo in your theme. Try deleting all the scripts and styles after <!– jQuery framework and plugins –>. The plugin already does all this for you and a bit more.

      And then Buy me a beer.

      Reply

  15. Hi netAction, thanks so much for your awesome plugins. Im using Nivo Slider Light on another site of mine and am very happy with it. Just redesigned a simple flash site I have, installed plugin… worked great, but then stopped working. Just showed up blue with spinning wheel. Never loaded pics. After reading the above posts, I tried disabling all my other plugins, and it began working again. The problem plugin that kept Nivo Slider from functioning correctly was “Custom Contact Forms” Version 4.5.2.3 Just thought you might like to know.

    Reply

  16. Hi again.
    Been working on the slider and made it look perfect. I just found one problem.
    For som reason the slider make my menu drops stop working. The dropdown falls over the slider and after a second disappears. It have become un-clickable. But only if it drops down over the slider. I cannot find any reason for this. I’ve tried to install the slider all over again, for thinking maybe I changed something and didn’t notice, but no luck. Here’s the site I’m working on http://50.17.224.101/

    would you know of any reason for this issue?

    In advanced
    Iris

    Reply

  17. I just have to say, thank you!
    I tried 3 other nivo wp sliders and they all needed categories and this and that, bottom line, they sucked

    Yours works, plain and simple.
    You should try to help out drupal, last time I used theirs it just didn’t seem to work.

    Thank you!

    Reply

  18. I am having the same issue it seems as others have had on here. I have the nivo light plugin installed to wordpress 3.1.1, it seems to be working fine although not loading the images? I have a feeling it might be to do with the php calling the jQuery or a CSS z-index problem if you could help me I would appreciate it, i can’t see it for the life of me…

    Reply

    • The file paths are wrong. There is no image in images/blockpaving.jpg. Check the file names in this block:

      <img src="images/blockpaving.jpg" alt="" title="Block Paving" />
      <img src="images/decking.jpg" alt="" title="Decking" />
      <img src="images/fencing.jpg" alt="" title="Fencing" />
      <img src="images/makeover1.jpg" alt="" title="Makeover 1" />
      <img src="images/makeover2.jpg" alt="" title="Makeover 2" />
      <img src="images/makeover3.jpg" alt="" title="Makeover 3" />
      <img src="images/patios1.jpg" alt="" title="Patio 1" />
      <img src="images/patios2.jpg" alt="" title="Patio 2" />
      <img src="images/patios3.jpg" alt="" title="Patio 3" />

      Reply

  20. Unsure at the moment as it seems my servers firewall is blocking me. My folder structure for my WP is pretty standard with a folder named “images” being used for my images. Forgive me if I am wrong but I honestly thought the image path would have been what it was hence asking the question originally. I don’t normally ask on forums but this one time i feel beaten and noticed after searching google others had come across a similar problem. I thought it was due to jQuery being called twice or a z-index contained within the CSS somewhere.

    To answer your question the URL now i think if it’s not what i originally had then it would be http://www.designersrealm.co.uk/wordpress/images/blockpaving.jpg

    Reply

  21. LOL, i literally just googled wordpress default image folder path and found how it should look myself. To wordpress gurus this would seem idiotic and silly but to wordpress theme noobies this is a very very common mistake to make, I am use to working with static websites not wordpress. Thankyou so much for your help but I believe the slider is working correctly now thank god!

    Reply

  22. Hello,

    I tryed your plugin, with a custom theme I made, and nothing appear… (just the JS and CSS links into the page)

    My current gallery code is like that :
    …

    Do you know how I can make it work ? (by modifying some files maybe) ?

    Thanks!

    Reply

  23. Hello,
    I’m using your plugin and I like it 🙂
    Is it possible to show the caption with rollover action? ( I set up the “directionNav” option is false for this)
    Thank you

    Reply

  24. hello – i had someone work on my site and they installed your plugin but I cannot figure out where those images are coming from ?

    The person is no longer helping me with this site and I have been left clueless as to how this plugin works ;-(

    can you help ?

    jcolome

    Reply

  25. Hi there – your plugin has the exact functionality i need – as i want to have different sliders with different images easily configurable on every page. Great job on making this possible. However I can’t seem to get the images to show up, just the loading image (the same problem several others are having on this site) Can you take a look and tell me what i’ve done wrong. I have deactivated all conflicting jQuery plugins and the error still occurs.. any help would be greatly appreciated

    http://www.panamatravelunlimited.com

    Reply

  26. Hi there, agree with other posters, this is an excellent lightweight wrapper for those of us who don’t want bloat or posts just for Nivo, thanks.

    However since WP 3.2 the slider stopped working (shows the first slide only, no controls, rotation). I imagine it’s a jQuery conflict but thought you might want to take a look!

    Thanks again for contributing a great plugin 🙂

    Reply

    • In the cases I know the update deactivated the plugin. Go to your plugin page and activate it. If that does not help please give me the url of your site in question.

      Reply

  29. I am thinking of using this slider on my site to replace my theme’s slider which no longer works with the 3.2 update (and the theme’s developer can’t figure it out). I am just hoping that I don’t run into the same problems…
    Are there jQuery compatibility issues with 3.2?
    Thanks.

    Reply

    • This plugin works with WordPress 3.2. It contains the latest version of NIVO and WordPress 3.2 has the latest version of jQuery. Many users updated to 3.2 already.

      Reply

  30. Thanks for the great plugin , however there are two things i need help with to finish the job:

    1. when open the slide for first time there is no loading! , that makes first image load then not smooth transaction happened! , how to make it load first then play smooth?

    2. The animation effect of my slider only one witch is “fade” hoe to include or add other effects or make it random ?
    I really like the animation effect’s of Iris ‘s Website: http://50.17.224.101/

    Here is my demo URL : http://www.eyecare2.ashraf.ly

    thanks,
    ash

    Reply

  31. I found it how to make it random
    $(‘.nivoSlider’).nivoSlider({
    effect:’random’, //Specify sets like: ‘random,fold,fade,sliceDown’

    But the problem now there is one effect it goes wired float down the slider and make look bad and idea ?

    take a look : http://www.eyecare2.ashraf.ly

    Reply

  32. Hi I recently updated the plugin. The plugin is activated but i cant seem to get the images to show. any help would be greatly appreciated.
    Thanks

    Reply

  33. your plugin is great! but i have a little issue…

    my images transition in, but not out. they just abruptly vanish, then the next image transitions in. what do you think the problem could be?

    unfortunately i cannot provide a link, as i am working on localhost

    Reply

  34. my fault… i set the nivoslider background to an !important black colour in my css, which turned out to be a bad idea

    Reply

  36. hi & thanks for your plugin.

    As another commentator above I’m having trouble with the thumbnail option. I have followed your advice to use the ‘official’ tutorial on dev7studios.com. However, this wasn’t any help.

    My pics are like this and all in the same folder: image-1.jpg & image-1_thumb.jpg, so the standard settings in nivo-slider-light.php do apply.

    I have tried to edit both CSS files according to the tutorial: before inserting the code from the tutorial all default instances of “.nivo-controlNav” were commented out. No success.

    Can you please explain how the 2 CSS files relate to each other? Why do there have to be two? (I’ve tried disabling the custom CSS in the nivo-slider-light.php. Doing so, the thumbnails do appear, but it’s all messed up and not in order)

    I read somewhere else that “directionNav:true,” and “controlNavThumbs:true,” are conflicting and that directionNav (the arrows) have to be disabled in order to use thumbnails. But this also didn’t solve the problem.

    After spending several hours on this I’m left totally clueless. Any help is much appreciated. Thanks you!

    Reply

    • NIVO slider has one CSS file that includes styles for most of the NIVO users.

      The other CSS file contains the site specific things (theme) like the bullets, arrows and shadows. This is the file you should modify.

      Please download the NIVO Slider file to understand how themes work.

      Reply

  38. I have images with different dimensions, how can I center the images inside Nivo Slider so the smaller images doesnt look odd..?

    Reply

    • Hi Kamil!

      Please delete the completely outdated file /wp-content/themes/Store/library/js/jquery-1.3.2.min.js. WordPress has always the latest version of jQuery included. It is not neccessary by the theme.

      Another issue is your download manager. That line does not work:

      jQuery(‘.wpdm-popup’).colorbox();

      Thomas

      Reply

  44. I’m adding a second slider on the homepage, and it only has two links in it…for some reason, the slider is loading one of them twice, and causing the images to not align properly after one rotation. Any ideas?

    Reply

  45. Hello

    Thanks for the wordpress plugin, I am just in the process of developing a simple site. I am receiving this error constantly when you click on the campaign link down the bottom.

    GET http://falsebehavinganimals.com/clients/quikstrike/wordpress/undefined 404 (Not found)
    f.each.f.cssHooks.(anonymous function).get
    f.extend.css
    f.each.f.fn.(anonymous function)
    m
    o
    (anonymous function)
    GET http://falsebehavinganimals.com/clients/quikstrike/wordpress/undefined 404 (Not found)
    c.defaultView.c.defaultView.getComputedStyle.bA
    f.extend.cssHooks.opacity.get
    f.extend.css
    f.fn.css
    e.extend.access
    f.fn.css
    h
    o
    (anonymous function)

    I guess Nivo is looking for a certain image but I have no idea what / where it is.

    Any ideas?

    Cheers

    Reply

  46. Hi Thomas,

    Thanks for all of the work that you have put into this plugin, we have really been enjoying it.

    Earlier this week it stopped working though, we have gone through the default troubleshooting, and it works when we switch to 2011. It has been working with our current theme (customized Woo Canvas) so I am not sure what has changed… do you think you could take a look at it for us?

    Thanks,
    Jon

    Reply

  49. Great plugin it works fine for me !!
    Really, thank you so much.

    Do you know how to make the picture slide left instead of fading ?

    Reply

    • I got it, you have to do it with the novo-slider-light-php.
      You’ve made a really customisable slider here !
      Thanks again.

      Reply

  51. Hi, thanks for the great plugin. I find it really useful. I just have a question about resizing the images. In one of the previous comments, you mentioned that one of the possible methods is to add some frame around it to make it the right size.

    However, I was wondering if there is a non-interfering way to do the same thing? (Since these will be user inputs, and published right away) Perhaps by setting the background to white every time before an image loads? I’m not very good in jQuery, any tips are appreciated.

    Angela

    Reply

  52. Hello;
    I am taking over a site designed by someone else. They installed your plugin that appears to be great but I cannot figure out where the code is to change the slider images. Can you please help? Thanks.

    Reply

    • The images are referenced in the page that uses the slider. See the example code at the very top of this page.
      If you mean the arrows, dots and so on, you have to change the theme files manually.

      Reply

  55. Ok i have tried the plugin and it works really good! My questión is, i have a big website if i use this i can not go back. Are you going to keep updating the plugin for a while?

    Reply

  56. hi their , i have some issue about the slider , it only appear on safari , mozilla and IE , the issue is the slider wont appear on google chrome . . i configured it almost an hour but seems nothing happened i met my limit 🙁 . please help me . .

    here’s the site http://bransonlakescountryrealty.com/ please check this on chrome 🙂

    GOD BLESSED 🙂

    Reply

  57. Hi,

    First of all I would like to thank the Nivo Slider Light creator for creating one of the most useful wordpress plugin.

    I am a big fan of Nivo Slider Light since last year and I almost use it to most of my wordpress site.

    Lately I am having some weird top and left margin issue on my slider, that’s after I upgraded to 1.11. Please check the screenshot. http://www.enzoservers.com/wp-content/uploads/2012/09/nivo-slider-light-1.11-problem.jpg

    I tried to check the css files but I could not find anything.

    Thanks

    Reply

  58. My English is very poor.Forgive me

    IE9 can’t click zhe
    FIREFOX CHROME IS OK

    change this
    .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;
    ==> background:#fff;opacity:0; filter:alpha(opacity=0);
    }

    May be useful to you。I hope the next version will solve this problem。

    Your plugin is great！

    Reply

    • Thanks a lot. This might help others. I will not change the nivo-slider.css as it is a 100% copy of the great work from Dev7studios. They should fix it.

      But I don’t know what the line should do. Why make something transparent that is invisible (display:none)? And what does the background-color help?

      Reply

  59. How do I stop the automatic resizing? Its making readers of my blog feel sea-sick as I have both portrait and landscape pictures being displayed. I would be perfectly happy with the old implementation if at all possible or some way to set a maximum height.

    Reply

    • The resizing has the reason that now you can scale your gallery while it runs. I think this is great. Usually it is a bad idea to mix images with different aspect ratios. You could add some boxes in apposite colors to the left and right of your vertical images to fill the space.

      If you do not want to do this you could fix the size of the slider like this:

      <div class="nivoSlider" style="height:500px; width:600px;">
  ...
</div>

      Then in a landscape slider vertical images will be cropped at the bottom.

      To fix the height of the images too ad this to your HTML, for example in nivo-slider-light.php after the SCRIPT element:

      <style type="text/css">
.nivoSlider img {
  height:300px !important;
  width:auto !important;
}
</style>

      Then vertical pictures will appear at the left side of the slider. This is what you wanted to have I think. It is nearly impossible to center the images. Please consider editing the images before using this hacks.

      Reply

  60. Hi, I’m making a different website and I find that the plugin seems to work well on pictures in landscape, but if I use exclusively pictures in portrait they get scaled in a very strange way.

    It’s a brand new installation of WP with Nivo Slider Light and Askimet the only two plugins active.

    I use the code
    Portrait

    Is there some minimum width set somewhere? That seems to be the most sensible explanation.

    Reply

Leave a Comment