Introducing the oik nivo slider… none of the other Nivo sliders did what I wanted.
Nivo-slider unleashed
Help for shortcode: [nivo]
Display the nivo slideshow for attachments or other post types.Syntax
[nivo
post_type="attachment|post_type - Post type to display"
theme="default|bar|dark|light|orman|pascal|oik271|default271 - Theme for the slideshow"
class="|classes - CSS classes"
link="y|n - Link the images to the target post/page"
caption="y|n - Display the image title as the caption"
ribbon="y|n - Display the ribbon, if the theme supports it"
thumbnail="full|thumbnail|medium|large|nnn|wxh - image size"
thumbs="|n|y - Thumbnail navigation"
effect="|random|sliceDownRight|sliceDownLeft|sliceUpRight|sliceUpLeft|sliceUpDown|sliceUpDownLeft |fold|fade|boxRandom|boxRain|boxRainReverse|boxRainGrow|boxRainGrowReverse|slideInLeft|slideInRight - transition effect"
numberposts="5|numeric - number to return"
offset="0|numeric - offset from which to start"
category="|category ID - numeric ID of the post category"
category_name="|category-slug - category slugs (comma separated)"
customcategoryname="|category-slug - custom category slug"
orderby="date|ID|title|parent|rand|menu_order - Sort sequence"
order="DESC|ASC - Sort order."
include="|id1,id2 - IDs to include"
exclude="|id1,id2 - IDs to exclude"
meta_key="|meta key - post metadata key"
meta_value="|meta value - post metadata value"
post_mime_type="|image|application|text|video|mime type - Attached media MIME type"
post_parent="|ID - Parent ID to use if not current post"
post_status="publish|pending|draft|auto-draft|future|private|trash|any - Post status"
id="|ID - ID of post to display"]Snippet
<div><div class="slider-wrapper theme-oik"><div class="ribbon"></div><div class="nivoSlider" id="slider-2"><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-1.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-1.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-2.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-2.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-3.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-3.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-4.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-4.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-5.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-5.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-6.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-6.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-7.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-7.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-8.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-8.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-9.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-9.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-A.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-A.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-B.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-B.jpg" /><img class="" src="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-C.jpg" data-thumb="http://www.oik-plugins.com/wp-content/plugins/oik-nivo-slider/screenshot-C.jpg" /></div></div></div>
OK. What about animation speed?
Hi Dan, you can set the animation speed from the oik options > Nivo settings. The “anim speed” controls how long the transition from one slide to another takes, the “pause time” is the delay between transitions. Enter values in microseconds: 250 = quarter of a second, 5000 = 5 seconds.
Note: If the fields are blank then nivo’s default values should be used. These are: anim speed = 500, pause time = 3000
Hope that helps.
A quick question!
How / where do you add custom css???
Hi Andrew, assuming you have admin authority visit oik options > overview. See the Custom CSS section. If you see “Click on this button to edit your custom CSS file.” then click on the button. This will take you to the theme editor where you can edit your custom CSS file. If you see “You have not defined a custom CSS file.” then there should be a button below to ‘Name your custom CSS file’. Click on this link to visit the oik options page, scroll down and type a file name such as custom.css into the “Custom CSS in theme directory:” field. Press Save changes. A dummy custom.css file will be created. This should enable the custom CSS capability. If you find you need to do a lot of custom CSS editing you may find the [bw_editcss] shortcode useful.
http://www.oik-plugins.com/oik-shortcodes/bw_editcss-edit-your-custom-css-file/
Thanks vsgloik – much appreciated
hello,
i need some help.
What i want to show is from my category News, show featured image and title with link. but i need the image to fill all the slider or center the image in slider.
what is the code for that ?
Hi Marios. with regards to the slider and image width see http://www.oik-plugins.com/oik_plugins/oik-nivo-slider/oik-nivo-slider-faq/nivo-slider-is-wider-than-my-images/
Hi Marios. some more information on nivo slider behaviour… see a new page that I have just created where I note a current restriction with the oik nivo slider code.
http://www.oik-plugins.com/oik_plugins/oik-nivo-slider/oik-nivo-slider-faq/displaying-a-news-slider/
Well i have this in a text widget: [ nivo theme="oik" post_type="post" thumbnail="thumbnail" ]
As i have only one Category it retrieves the posts from there so i get what i need.
I tried that thing with mw200 but what i get is a 100% width of the image, which is ok, but the height of the image is the actual height of the image and overlays all other widgets that i have.
Isn’t a direct change in CSS that i can do so it can give me the thumbnail of the post width:248px and height 300px ? can i constraint it directly from css?
Hi Marios. I’ve created a new page where I have set the height of the slider using CSS. http://www.oik-plugins.com/wordpress-plugins-from-oik-plugins/wordpress-plugins/oik-nivo-slider/oik-nivo-slider-faq/controlling-the-height-of-the-nivo-slider/
im fine with the code that i currently have as it gets the size of the thumbnails, so that is more correct. only need to center the image in the slider. just that. think is through css but cant find how.
Do you want to centre the images in the slider? I guess so since the link text is quite long. Let me have a think.
yes, thats right, just move the image in the center of the slider
Hi Marios, that was a bit of a challenge… I’ve created a new page to cover this http://www.oik-plugins.com/wordpress-plugins-from-oik-plugins/wordpress-plugins/oik-nivo-slider/oik-nivo-slider-faq/centering-the-slider-with-a-wider-caption/
Also, i have another proble, i must refresh the page in order to get it to work, on all pages. if not refresh, no loading of the slider.
What might cause this ?
Hi, I can’t get the images to appear at all in Chrome. When I try to inspect the blank space in latest news the ul.xoxo gets highlighted. Interesting!
yeah try to refresh the page and then you will see them… why is that happening?
Hi Marios, I’m having a look at your page in Chrome (on Windows) right now. There are some JavaScript errors which may be preventing the nivo slider jQuery from running. The first uncaught exception I found was in the login form but it was the jQuery lettering code that was wrong. The theme seems to want to load the jquery.lettering.js file multiple times from different domains AND load both the packed and debug versions of the jQuery code. However, the files are not where the script tag says they should be and your website returns HTML instead. I think you’ll need to consider switching to another theme.
hmm yeap the problem with Jquery, i have many things running with differrent versions and there is a little mix-up there
just dont know how to fix that. cant move to another theme as this theme is what the customer wants 
Visiti my site again, after the nivocenter class you gave me everything looked so much easier, i customized many things now and made it exactly how i need !!! Check it out, i think its great now!!!
Yes, using Firefox the slider looks nice with the next and previous buttons outside the image. But it still didn’t show up for me under Chrome until I fixed the uncaught error in functions.js (jQuery.cookie ) and removed some of the lettering jQuery code
How did you fix the uncaught error in functions.js (jQuery.cookie ) ? also note that i have removed the lettering.js completely so it does not give that error anymore.
I changed the function definition from jQuery.cookie=function(b,j,m) to function cookie(b,j,m)
and all references of jQuery.cookie to cookie.
i removed the part from the functions.js that was causing the problem, but still needs refresh to show.
It’s ok for me now in Chrome.
In Firefox it takes some time to load. In Chrome I either get lots of messages suggesting jQuery’s not loaded or another uncaught type error either on nivoSlider or
$(document).ready(function() {
$("#demo1 h1").lettering();
Uncaught TypeError: Object [object Object] has no method 'lettering'
Well i tried accessing the site from two differrent machines just right now and everything was loaded ok since the first time.
maybe on our machines is not loading at first because we got many developer tools running in our browsers etc?
On the two other machines everything was ok so i think i just should forget about it
Well the slider looks very nice right now! thanks for all your help !!!!
i removed that lettering.js but still have to refresh in order to view the slider…. any ideas?
Hi, Does it have other command we can set in the shortcode ? like the pause time, animation, on hover, etc…
Hi Michael, in the current version of the oik-nivo-slider code ( v1.18 ) there are only two jQuery parameters that can be overridden by the shortcode parameters; effect= and thumbs=.
The others need to be set on the oik options > Nivo settings page. See http://www.oik-plugins.com/wordpress-plugins-from-oik-plugins/wordpress-plugins/oik-nivo-slider/nivo-settings/
I am planning a new version that allows you to choose a particular profile, which should make the shortcode a bit easier to use.
If you’re interested, the implementing code is documented here: http://www.oik-plugins.com/oik_api/bw_nivo_slider/
The actual API that’s used is bw_override_options().