codeinwp/nivo-slider-jquery

Nivo Slider - The Most Awesome jQuery Image Slider

Maintainer's Wanted! - Ineterested in contributing regularly to Nivo Slider development? Get in touch

Nivo Slider

The Nivo Slider is world renowned as the most beautiful and easy to use image slider on the market. There is literally no better way to make your website look totally stunning.

WordPress Plugin: https://themeisle.com/nivo-slider/ for more info.

Docs: http://docs.themeisle.com/article/485-getting-started-with-the-nivo-slider-jquery-plugin

If you are looking out for WordPress themes which nicely integrate Nivo Slider, check-out : https://themeisle.com/wordpress-themes/ or if you are looking for a web host where you can have your website hosted, see this guide, I am sure that it will help.

Other Projects

Check-out other stuff that we are working on :

• Optionistics
• Codeinwp
• Revive.social
• FinMasters

nivo-slider-jquery's Issues

Feature Request: Specify Number of Loops

Would like the ability to specify the number of times (loops) the image collection is presented. As it is now, I must choose between "ad infinitum" or "once."

Wrong slides numeration

Numeration begins from zero and it looks like this: 0 1 2 3 4 It should be 1 2 3 4 5

Just add "+1"

Line 169: nivoControl.append('<a class="nivo-control" rel="'+ i +'">'+ (i+1) +'</a>');

Request: Ease

An additional transition effect that would be cool is an easing effect as if the next image is pushing the old image off to the left or right top or bottom.

z-index issue in IE6 & 7

z-index isn't supported properly in IE6 & 7. Causes problems with dropdown menus and the like.

JQuery & Prototype conflit

Hi, I have found a conflict between jQuery and Prototype using reverse function.

A possible fix is replace this line:

$.fn.reverse = [].reverse;

with this line:

$.fn.reverse = []._reverse;

Bug: Uneven Slice Spacing

Seems to be a bug in latest versions of Firefox on Linux and Mac.

Captions barely visible?

When setting captions, the text is BARELY visible. Unless looking for it, most users wouldn't know it's there. Is there a setting somewhere that I'm missing?

Initial Load

This is more of an annoyance factor then a bug and certainly make the tool unusable in my opinion.
On the initial load when you do not have a cache you can see all the images loading over the top of each other. I think it should show just one image loading and if that is going to be to tricky then just do not show the gallery until the images have all been loaded.

Thanks

IE Links

Two issues in IE:

Images wrapped in links require "display:block"
First image loads with last link

IE6 transitions issue

While I, for one, cannot wait for the complete and utter downfall of Internet Explorer 6, there is a fairly severe issue with transitions in IE6. While, as to be expected, they are generally choppy and polishless - and I don't fault NivoSlider for this one bit, there is an issue that can be traced to this amazing slider: nearing the end of the transition, the image freezes on the previous one in the last 3-4 strips, and only for part of that strip. The bug clears off to the new one as the next next transition.

Drop shadow doesn't work in IE 8, 7, 6

The drop shadow doesn't show in any Internet Explorer (8, 7, 6)

navigator creating empty slides?

heres an example page, i see this problem across browsers:
http://theshowdr.info/show/le_ombre

if you click on the gallery thumbnail you will see three empty image slots that are rendering... should only have 7 images..

im very confused, please help :(

Request: StartSlide Setting

Request: StartSlide Setting

Loading time

Hi! How can I speed up the loading time of my slider? Right now I have 4 images about 70 kbs in size each and it take over a minute to load... the website is [removethis]organicphotography.ca

Thanks a million for any help!!

effect:'fade' option fades images into the wrong place. They're about one "line" too low.

'Fade' options loads the second image slightly lower--about one "line" lower--than the first image. When the third image loads, the second bounces up to where it should have been in the first place. Same behavior in Chrome, Firefox, and IE8.

The least HTML markup to reproduce the problem is immediately below. Markup is valid XHTML 1.0 transitional. All images are 300x225.

<title>Test of Nivo Slider--Minimal markup</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"> </script> <script src="http://nivo.dev7studios.com/scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script> <script src="http://nivo.dev7studios.com/scripts/jquery.scrollTo-min.js" type="text/javascript"></script> <script type="text/javascript"> $(window).load(function() { $('#slider').nivoSlider({ effect:'fade', slices:10, animSpeed:1000, pauseTime:3500, startSlide:0, //Set starting Slide (0 index) directionNav:false, directionNavHide:true, //Only show on hover controlNav:false, //1,2,3... controlNavThumbs:false, //Use thumbnails for Control Nav controlNavThumbsSearch: '.jpg', //Replace this with... controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src keyboardNav:false, pauseOnHover:false, //Stop animation while hovering manualAdvance:false, //Force manual transitions captionOpacity:0.8, //Universal caption opacity }); }); </script>

> > >

Caption in a div

awesome slider..just onething, since the title="" attribute is limited when it comes to adding buttons, Anchor tags etc.

Can you add a feature of picking up the caption from a div or adding a caption div, it'll really add lot of value to your amazing slider.

Enable skipping through more than one slide at a time

It's a beautifully fluid image slider in most respects but when attempting to skip slides it's rather clunky - you can only skip one image at a time, and you must wait for the transition to complete before you can skip another. This is a problem for both mouse and keyboard navigation, and while I can understand that changing the destination image in mid-transition is going to be challenging to handle in a pretty way (and that's perhaps the reason why the behaviour is as it currently is), I do think this is a pretty important usability requirement, particularly for slide shows with large numbers of images which someone will want to browse through quickly.

The best solution I've thought of is to use the more sophisticated blind/mosaic/etc transitions for when the slide show is on autoplay, but when skipping manually the next image should simply be slid in horizontally (according to the direction of skipping), with an ease out set to decelerate the target smoothly into place, but if another skip is initiated the ease out should be cancelled and the slide should continue to animate (slide in/out of view) at whatever the max speed is.

Thus the ultimate effect is one of kinetic skipping between slides, with each skip action giving the slides another kick. And of course if a skip in one direction is proceeded by one in the opposite direction, then the animation should ease out to stop, then ease into movement in the new (opposite) direction.

I cannot get thumbnails to work (solved)

Hi there, I've attempted to add thumbnails to the slider. Everything on the slider works flawlessly, but for some reason I cannot for the life of me get thumbnails to work.

    controlNavThumbs:true, //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

I made thumbnails that ended in _thumb in the same directory as the images. Instead I'm still getting the small dots used to control the slider. I tried my best to mimick your settings to no avail. Perhaps what I'd like is a better explanation for what the settings mean. Aside from controlNavThumbs:true, I don't understand the rest of the thumbnail settings. Thanks!

Make sure the number of slices is divisible by your image width.

I had a slider with images that were 700px wide, with the slices set to 15, well it produced this weird effect where a small sliver of the next slide would show up at the end, fixed it by changing the slices to an even number, which was divisible by 700px.

drop down menu is hidden under nivo

hey, if someone can help me, i have a oriblem that the nivo slider is poisitioned under a drop down menu, that get's hidden under it. i know that in flash there is the "w-mode" that enables other objects to be shown above the flash itself. Does anybody has a similar solution in J-querry and nivo slider

More stable mechanism to stop slideshow

In the version 1.7, a stop mechanism has been introduced by setting a var to stop the slideshow:
if(vars.stop) return false;

This could cause error if the whole slider has been removed form the DOM tree thus vars might not exist after the removal, it would be stable if we change this statement to:

if(!vars || vars.stop) return false;

Initial link is incorrect if all images in slider are links! [fix provided]

If all images in the slider are wrapped with 'a' tags, the initial link is incorrect. It comes up as the link the the LAST one in the sequence instead of the first.

I have looked into the code and fixed it locally but I have never used GitHub so I'm posting how to fix it instead of doing it myself.

The fix needs to go into the part that defines "kids". The fixed code looks like this:

//Find our slider children
var kids = slider.children();
kids.each(function() {
var child = $(this);
var childlink;
if (!child.is('img')) {
if (child.is('a')) {
child.addClass('nivo-imageLink');
}
childlink = child;
child = child.find('img:first');

            }
            //Don't ask
            var childWidth = child.width();
            if (childWidth == 0) childWidth = child.attr('width');
            var childHeight = child.height();
            if (childHeight == 0) childHeight = child.attr('height');
            //Resize the slider
            if (childWidth > slider.width()) {
                slider.width(childWidth);
            }
            if (childHeight > slider.height()) {
                slider.height(childHeight);
            }
            childlink.css('display', 'none');
            vars.totalSlides++;
        });

I created a new variable called 'childlink' which references the child whether it's the link or the image itself. The display:none is then applied to this and not just the image.

Callbacks not working

please ignore.. was a conflict with a firefox plugin I had installed..

Opera Problems

I can not get the slider to show in Opera 10.10, it just displays a sliver of the image. Everything works fine in every other browser. Sometimes the example on http://nivo.dev7studios.com/ does it but if you refresh it starts working. Any ideas?

Insert in table

Strange thing, I'm trying to put the Nivo-Slider (which works great by the way) into an existing site that is table based. When I put the slider div into a table cell IE8 shows an error. "Invalid procedure call or argument" in jquery.min.js

I've isolated it down so the page is only the table and the Nivo-Slider code, so I'm sure that's what it is.

Caption Opacity

Despite setting the opacity for caption into CSS, load another .css for IE for alpha hack, I think better to make more setting:

settings = jQuery.extend({
effect:'random',
opacity:0.8,
slices:15,
animSpeed:500,
pauseTime:3000,
directionNav:true,
directionNavHide:true,
controlNav:true,
pauseOnHover:true,
beforeChange: function(){},
afterChange: function(){}
}, options);

line 103:
$('<div class="nivo-caption"><p></p></div>').css({display:'none', opacity:settings.opacity})

So no worry for cross-browser support :)

(from Eric 'lontong' [email protected])

Captions not showing in latest Chrome beta

Captions on demo page are not showing in in Chrome 5.0.342.9 beta.

Fonts on page degrading

When I add the nivo slider to my page all of the fonts on the page are rendering incorrectly with Internet Exlorer 7+. For example, if you look at this page http://www.wingsandwaves.com/homepage2.html check out the fonts next to the planes. They display blury and do not render correctly.

View a page without the nivo slider with Internet Explorer 7+ http://www.wingsandwaves.com/innerpage.html and all is well. This issue doesn't effect Safari, FF or Chrome.

Any ideas?
John

Multiple sliders on one page.

Hi,

I am trying to put multiple Nivo Sliders on one page of my Drupal website. The problem is that when I make a 'next' or 'previous' call, the other sliders will slide as well. All the Nivo sliders have a unique ID with a unique jquery call for Nivo.

I made a little demo page where multiple sliders do work fine next to each other on one page. Somehow on my Drupal site they don't. I don't see much difference in approach, except the Drupal site has way more div's.
My little demo page: http://dannyjoris.ca/nivo-test/index.html
My Drupal dev page: http://dev.dannyjoris.ca/portfolio

The issue I posted on drupal.org: http://drupal.org/node/758844#comment-2792774

All suggestions are highly appreciated.
Thanks again for this great slider!
Cheers,
Danny

Caption hide/show sliding/hovering

Use case:
Display a slide show where as each new image is presented the caption slides up, is displayed for a few seconds, then disappears again, but if hovered over the animation is paused, the caption reappears, then when the image is unhovered the slide show resumes, the caption disappears, and the next transition takes place, starting the cycle again.

4 suggestions to enable the above use case:

1. Option to make a hidden caption appear (slide up) when the image is hovered over, and to disappear (slide down) when hovered out (perhaps this could be controlled by the option for the Next/Prev, or perhaps this should remain separate for flexibility)

2. Variable caption show time before auto-hiding (i.e. show caption when new image shown, slide down after 0...N seconds).

3. Variable caption slide up/down animation time

4. Variable delay for caption slide down animation when triggered by unhovering the image - instant slide down on unhovering would probably look/feel wrong (but this is easily tested and not essential).

First Image Link not Updated

When you land on the page with the slider, if you have your images wrapped with links, if you hover the first slide before it changes you'lll see it has the wrong link.

For example in your Demo Page http://nivo.dev7studios.com/demos/ If you check the second slider after you land on the page you'll see it has the link to the 4th image, when it should have the 1st Image Link.

Opera problem

I don't how if anybody else has this problem but for me Nivo Slider doesn't work with Opera (even the one which is embeded on the main Nivo page http://nivo.dev7studios.com/

Everything works OK if the images are already in cache, but on the first load the stay invisible (screenshot: http://imgur.com/yiwCY )

Opera 10.52, Windows XP SP3

Inserting slider in Wordpress (ver.2.9.2) static page: Slider *pops*, 1px width

Hi there

I'm using WP 2.9.2 and creating a child theme from the Thematic framework. Adding to that I'm a rookie at webdevelopment, so the 'bug' might be my code. But I haven't been trying anything fancy, so I think it could be a bug.

Here's what I tried to do:

I set a static page to display on the frontpage, and I've tried inserting the slider into it using a self-made WP shortcode: [nivo-gallery]

function nivo_gallery_shortcode() {
if ( function_exists('show_nivo_slider') ) {
show_nivo_slider();
}
}
add_shortcode('nivo-gallery', 'nivo_gallery_shortcode');

The slider barely showed up, just 1px width, but with the proper height. And when I used Firebug to disable the width:1px property, the slider was 'popping' instead of doing the nice transitions.

I then tried inserting the slider by copy pasting the code from the "wordpress:plugin installation how-to" above the header, and not inside page.

function nivo_gallery() {
if ( function_exists('show_nivo_slider') ) { show_nivo_slider(); }
}
add_action('thematic_aboveheader','nivo_gallery');

This did make the slider show up and animate properly, but it reset my static page into displaying one of the post pages I created for the slider thumbnails. This site isn't going to be using posts for anything, except this plugin. I was also unable to access any of the other pages through the menu.

Nevertheless, this does seem to be a great plugin in the making. Keep up the good work. :)

Nivo-Slider and Image Loading

Has anyone used Nivo-Slider and not loaded all images on page load?

I am looking to do large galleries, and would like to load images as they are requested to view, or after the page loads behind the scenes, or one ahead of the slideshow, etc.

Any thoughts or examples?

Thanks! Great product...

Request: Caption on Hover

Request: Caption on Hover

Request: show images with javascript disabled

For the sake for search engine optimization the slider should show the images/text/links even if javascript is disabled.
It doesnt have to have any neat functionality as long as the information is still there and viewable.
The images could be displayed below one another.

Request: Keyboard Control

Keyboard control for navigation.

getting properties of current item

How can I access properties of the current visible image? I want to use beforeChange event to simultaneusly with the animation toggle visibility of divs with extended decriptions and I'd need to access some properties (e.g. id's) of current visibile image in Nivo Slider to toggle visibility of appriopriate div.

Thanks in advance for answer and thanks for a great plugin!

Request: Left/Right/Top/Bottom Transitions

Request: Left/Right/Top/Bottom Transitions

Request: Set Next/Prev text

Request: Set Next/Prev text

control nav to center in IE

How to center bullets in IE?
.nivo-controlNav {
position:absolute;
left:0;
bottom:-30px;
text-align:center;
width:100%;
}
.nivo-controlNav a {
width:10px;
height:10px;
background:url(Images/bullets.png) no-repeat;
text-indent:-9999px;
border:0;
margin-right:3px;
display:inline-block;
}

This work fine in FF, Chrome, but not IE.

Request: Pause button

It would be nice to pause/play the slideshow. It could be within the same nav as the prev/next links.

slices problem

hi,
http://img697.imageshack.us/i/nivo.png/
all instalation steps was by tutorial on official site,
the problem is on chrome, ff, ie8,
any idea?

Added controlNavThumbsIndex

I have forked this code to add an option called controlNavThumbsIndex which will allow users to specify the thumbnail image src manually if it can't be achieved through the search and replace operation.

I am building a drupal wrapper module for this plugin and wanted it to work with drupals imagecache module (automatic thumbnail creation functionality).

Can you please merge into the master branch!

The Plugin does not work smoothly on IE7,8

Dear Owner!

Thanks for providing a great plugin, i like this so much. i have a question: The plugin does not work smoothly on IE7,8?. with other browsers ( Firefox, Opera,...) the plugin seem to work very smoothly. have you any tips and trips or any idea on the issue?

Thanks

Setting a link on a slide

I would like to have my images clickable with their own href's, I tried changing the script but ended up breaking it. Any way to do this?

IE white dots bug

It seems that certain black, and/or near black levels in images that are filtered or that are the children of elements that are filtered in IE can exhibit transparency. This creates white dots in the images. Apparently this is a know IE bug, not that I had ever heard of it. One supposed solution is to set the background color of the #slider to black. Unfortunately this doesn't seem to work. Any ideas, suggestions?

Problem occurs:
IE x
Jpeg
Nivo Slider 1.9

Screen:
http://imgur.com/CfZJS.jpg

Nivo Slider doesn't work in Opera

I have the latest version of the Opera browser (10.51) and the Niveo Slider doesn't work in this browser? It works in all the others I've checked and it's a great thing but just not sure why it's a problem in Opera?

Add horizontal sliding as an effect.

Hi, I love the Nivo Slider. Is it possible to add a horizontal sliding effect?

Cheers,
Danny

First image shows last link even in v2.0

Hello

I had the problem that the first image was showing the link of the last image.

I downloaded the latest version 2 which mentioned that it had fixed the issue.

I replaced the js file on my site and yet the problem still remains.