oik-plugins
WordPress plugins and themes

Getting started with the oik-Nivo-slider

  1. Install the oik plugin.
  2. Activate the oik base plugin.
  3. Install the oik-nivo-slider plugin
  4. Activate the oik-nivo-slider plugin
  5. Create a new post, page or other content type
  6. Upload some media, attaching the images to the current post or page.
  7. For each image set the Title to the text you want to appear for each image in the slideshow
  8. Do NOT insert the images into the content... that's [nivo]'s job
  9. Insert the [nivo] shortcode into your post, page.
  10. Publish and View.

Note: The OIK Nivo slider WordPress plugin is dependent upon the oik plugin. If the oik base plugin is not installed and activated then the [nivo] shortcode will be ineffective.

Related

[nivo]

49 Responses to Getting started with the oik-Nivo-slider

  • Hi
    can you tell me because the plugin don’t works?
    my theme is Boldy
    regards
    Massimo

  • I like the slider function because it looks nice
    But it would also be nice to create a more specific howto
    For now its almost impossible to make it work on a wordpress website

    so maybe a detailed simple howto that non experts can understand would be nice

  • Hello,
    The current site has been under development for about 2 weeks. The oik nivo slider was working great. All of a sudden it has stopped working and lists the images one after the other under each other. Any ideas as to why?
    thanks for you help,
    nizam

    • Hello Nizam, could you create a blog post or a hidden page on your site that demonstrates the problem. You have a lot of different plugins that could be causing conflicts.
      The nivo slider jQuery code works by loading the images into the page before selecting the one to be displayed… and setting the others to display:none. So it could be that the jQuery code was not working. Did you alter the Nivo settings at all?

  • It just doesn’t work.

    I typed [nivo] in the page, uploaded some image and attached to the page, nothing come out except a blank block.

    • Hello god1. Can you give me a bit more to go on. Can you send me a link to your page so that I can check the generated code? Can you confirm that when you visit the oik options > Nivo settings page that the default slideshow works?

    • Same here…

      Here are the steps I took:
      1. Installed WordPress 3.4
      2. Installed oik plugin
      3. Installed oik-nivo-slider plugin
      4. Created a new page and inserted 6 images (full size) from the media library into the page.
      5. I also typed [nivo] in that same page.
      6. I also confirmed that the oik-nivo settings page shows up in the admin menu.

      • Hi AP, thanks for listing the steps you performed. Can you confirm that instead of seeing the images in the slider you just saw all 6, one after the other? If so, then it’s step 4 that is the problem. For a straight forward slideshow you need to add the images as attachments to the current page. BUT you don’t insert them into the page. The [nivo] shortcode does that for you.

  • I have installed the Oik Nivo slider on a test page. http://rmkids.com/image-slider (not part of navigation yet). I have followed all of the instructions. My images are attached to the page not inserted. All I get are the images lined up vertically one after another. The only other plugin that might conflict is an old “flash plugin” that is on the home page. This is what I am trying to replace but can’t get rid of it until I can show the replacement. Any suggestions on why it’s not working?

    Thank you,
    Allison

    • Hi Allison, it appears to me that your theme is missing some important code that will allow the oik-nivo-slider to work.
      You should paste
      < ?php
      /* Always have wp_footer() just before the closing
      * tag of your theme, or you will break many plugins, which
      * generally use this hook to reference JavaScript files.
      */
      wp_footer();
      ?>
      in the footer.php file just before the last two lines ( and ).
      If you temporarily switch to the Twenty Eleven theme then you should get to see it working.

  • I can’t get it to work. Here are the steps I took.
    1. Installed both oik and oik-nivo-slider plugins and activated them.
    2. Created a new page
    3. Uploaded (and attached) 5 images to the page (without inserting them)
    4. Inserted [nivo] shortcode.
    5. Published and no good.

    http://redballoontoystore.com/w/recital-hall check out that page and help please

  • I followed the instructions and it works but the pictures i used in the slides also gets displayed on the page along with the slider.

    How can I stop this?

    you can take a look bazzarrng.com

    im new to wordpress so i may be doing something step wrong: “attaching the images to the current post or page” ive tried alot of things but i cant get only the slider to appear, i always get the pictures (used to make the slides) appear in a thumbnail form (which expands when you click on it).

    Also how can I adjust the size of the slider. I want the slider to be the only thing on the homepage/front page, so I want it to take up the whole page

    • Hi, I visited the site but you appear to have deactivated the oik base plugin so the nivo slider is not working. When it comes to adding media to a page you simply upload them. Don’t insert the images into the post. By default the slider takes on the full width of the part of the page it’s in. If your layout includes a sidebar then it won’t stretch into that area. Remember to use images which are wide enough. If you can reproduce the problem I can take another look.

      PS. I downloaded a version of the innova theme that you are using…. but not exactly the same. It could be that the image you’re seeing is the featured image, which it shows in the page in both “Default template” and “One column, no sidebar(s)” display format.

  • nivo slider is working but directional arrows and bullet buttons are not displaying
    I checked plugin options and directions are NOT hidden I cant figure out how to get them to display

    At one point while ago they were displaying but then we by mistake reset theme to default settings and now can not display arrows or bullets

    THANK YOU for any help

    • Hi Robin, the problem is due to some CSS in your theme which turns off all background images on links. This is the relevant bit from http://www.raysonthebay.com/wp-content/themes/theme1365/css/normalize.css

      a { background-image: none !important ; }

      If you completely eliminate that file from your theme then the nivo slider’s prev and next graphics will show. You can then re-enable the directionNavHide so that the next and prev navigation buttons hide when the mouse is not over the images.
      A side effect of this change is that the background image slider’s control image reappear above the Copyright statement.
      Note: I tried writing some custom.css to override the normalize.css file but didn’t have much luck. Can you tell me where you got your theme?

  • Hi thanks again for your help.

    Another issue is that we currently have about 26 images sized at 930 × 600 in the nivo slider

    in firefox it takes about 8 or 9 seconds to load, IE9 seems to load quicker – maybe 4 seconds

    is this delay to be expected or is there something I can do to speed loading?

    Thanks,
    Robin

    • Hi Robin, the nivo slider code only gets started once all the images are loaded so the more you have the longer it will take. There is currently no option to speed up the initial display, though it’s something I’d like to see too.

      Oh, I see you’ve already reduced the number of images since I last looked.

      I notice that your background slider works differently. It only loads up the first image on initial display. Have you thought about using the background slider for the photos?

      Other options you may want to consider… though I’ve not tried them myself.

      1. Use a faster server.
      2. Implement a caching plugin
      3. Use a content delivery network for the images or, if that’s not possible, for all the static files that get loaded.
  • Hi !

    Im Michael and im new at WP, i followed all the step for the slider and it doesn’t work !
    See by yourself http://www.l47concept.com/l47concept/?p=177

    Thank for any help !

  • Just to let readers know that my first reply to Michael was by email. It was also a little terse. I wrote.

    It’s a problem with your theme. It doesn’t do half the work that a WordPress theme should do.
    Can you change your theme to twentytwelve and try again.

    Michael then discovered the need for a call to wp_footer() in his theme’s template files.

    By the way. A theme should also include a call to wp_head().

    See http://codex.wordpress.org/Theme_Review#Template_Tags_and_Hooks

  • Ce site urît!

  • I’m having issues here. The slider works but it shows a thumbnail image in the upper left in addition to the full width slider. My page is below. I’m using a Nextgen gallery for this and my short code is as simple as it gets [[nivo post_type=nggallery:2]]

    http://taber.bensullins.com

  • It appears that Nivo doesn’t support displaying categories of posts with featured or attached images along with. It would be very useful to display a slider of linked ‘news’ posts with attached images, post title, and a defined excerpt length as a kind of newsreel.

    Also seems that Oik doesn’t support defining an excerpt length. This seems like a common approach these days so it seems strange that Oik doesn’t have it. Am I missing something?

    • Hi Lloyd, thanks for your comments. There is a current limitation that the nivo slider doesn’t find featured images when the thumbnail size is full – which is the default. If you try a different value for thumbnail you might get some results. e.g
      [nivo post_type=post category_name=news thumbnail=medium]

      I’ve been looking for a decent slider that allows me to display more than just a simple caption. There’s some new code in oik v2.0 that may help – using cycle jQuery. It’s on my list of things to document.

      Regarding Excerpt lengths. I’ve noticed that lot of the routines that attempt to trim content to so many words have major issues with shortcodes and unmatched HTML tags. I prefer to use the tag OR create manual excerpts. For “pages” I use the oik-post-type-support plugin – that simply adds Excerpt capability.

      Hope these answers help.

  • thanks for the prompt reply.

    In the meantime I found a nice post slider (Smooth Slider) that doesn’t work quite right as basically designed but the categories shortcode works well. I reported the basic problem (when assigning a post to a slider gallery the Publish/Update button spawns a blank page and the post isn’t updated). Maybe it will work for you.

  • Hi there – I may be missing something really obvious here, but how do I attach images instead of inserting them? When I click “Add media” and select the images I want, the only option is to “Insert into page” (WordPress 3.5.2)

    Thanks for your help,

    Dan

    • Hi Dan, having used the dialog to upload your images you simply close it. The images have already been “attached” so are now available to the nivo slider.

      Note: This applies to most of the oik shortcodes that deal with attachments. e.g. [bw_images], [bw_pdf]
      You type the shortcode and it does the job of finding the attached files and generating the correct HTML and other stuff to display them.

  • Hi,
    I have just installed the oik nivo slider. I previously designed a site for this ministry at livingwellfc.org using a different CMS and the original nivo slider. I am now converting it over to wordpress and am seeing some issues with the oik nivo slider. It looks like it is freezing during animation and not correctly displaying the images like it should. Some animations freeze at random while some function properly.

    I Just wanted to know if you knew of this problem and if there is a solution or not?

    Thank-You for your time,

    Jesse

    • Hi Jesse, I have had the same problem and written to the nivo slider developers but never got a response from them.
      Would you like to try the oik-nivo-slider version 1.9 and see if you still get the problem?

      • I’ve debugged the problem and have found the fix. The problem is in the oik base plugin. There is now a new version of oik on WordPress.org ( version 2.0.1 ).

        oik-nivo-slider version 1.9 is also available from WordPress.org

  • Ya definately if that will fix the problem…Although I thought I had the most recent version. I just installed it last week.

    • Hi Jesse, you have the latest version from WordPress.org. There is a newer version on this site. It uses Nivo jQuery 3.2. BUT, unfortunately, even this version of the jQuery code doesn’t fix the “box” effects slider transition problem. I’ll look into it again.

  • Hi Mate,
    Is there any way to use existing images in the media library in the slider.
    I dont really want to have to add more images, and use images i have already used for other albums.

    Potentially can the “attach” functionality be added to the Oik base plugin?

  • Hi, I’ve got an odd problem that I can’t seem to solve myself…

    My images seem to appear outside of the slider when my site is first loaded. They appear outside of the slider only very briefly before the problem corrects itself but it doesn’t look right. Can you tell me what I’m doing wrong?

    Website is http://willthisbeonthetest.co.uk/

    I have inserted this code into default271.css:
    div.mw673 div.slider-wrapper { max-width: 673px; }
    div.mh365 div.slider-wrapper div.nivoSlider { max-height: 365px ; }

    And I’m calling the slider with:
    [nivo class="mw673 mh365" post_type=post theme=default271 category_name=recent-posts thumbnail=full]

    Thank you.

  • Thank you vsgloik, that’s fixed things perfectly! Consider this one problem solved… :-)

Leave a Reply

Recent plugin updates
oik v2.4-beta.1218 Tested with WordPress 4.1 and WordPress Multisite ...
oik-plugins v1.14 Improved support for plugin update checking. ...
oik-popup v0.3 Improved positioning of the header when using a narrow device. ...
oik v2.4-alpha.1112 Changes for WP-a2z and oik-plugins. ...
oik-shortcodes v1.26 Changes to improve the display of the Dynamic API Reference for WP-a2z and oik-plugins. ...