hmm Can you paste the html code for your <div id="slider" ... </div> ?
The Nivo documentation says only images or images within a link are allowed, and inspecting your slider with Firebug reveals the first tag in your <div id="slider"> is a link to the homepage but without image tag inside. Maybe it comes from here…. My guess is that the plugin will be expecting an image, but won’t find any, resulting in your broken link “http://www.labratsstudio.com/undefined”
Here’s the code: I’m not seeing this empty link tag in the slider but perhaps there is some definition of it in the css?
<div id="slider" class="nivoSlider" style="height:260px; width:840px; margin-left:auto; margin-right:auto;">
<a href="http://www.labratsstudio.com/games/muse">
<img src="http://www.labratsstudio.com/wp-content/uploads/2011/06/iPad11.png" alt="" />
</a>
<a href="http://www.labratsstudio.com/about-us">
<img src="http://www.labratsstudio.com/wp-content/uploads/2011/06/iPad21.png" alt="" />
</a>
<a href="http://www.labratsstudio.com/about-us">
<img src="http://www.labratsstudio.com/wp-content/uploads/2011/06/iPad31.png" alt="" />
</a>
</div>
Yeah your code is correct and your js call to nivoSlider() too.
There’s no way to add an html tag with CSS.
Let me investigate a little more…
hmmm I think I got it. In your HTML code, there’s a link to your home, around your logo and another one under the navigation menu.
<a href="http://www.labratsstudio.com/">...</a>
Until here, it’s okay.
But then, right after this menu, there’s another link opening tag, then a lot of commented code, and finally…. no </a> closing tag.
Invalid html markup can result in wrong browser rendering. Mind validate your site some times -> http://validator.w3.org/
But for the moment, finding this opening link tag and remove it will do the trick. Might be in the header.php file of your theme I guess.
Thanks so much for the help! I’ve been tweaking an existing template and commenting out the stuff I wasn’t using but this has fixed it.
I knew such a site existed but lost track of it because I haven’t been designing sites in a while. Thanks again for the help.
One problem I thought to be connected to this, but perhaps not, was that I cannot see the navigation buttons on the slider. I have used the different options but to no avail. When the slider was somewhat broken there was a way to see the navigation buttons (those small bullets that show the place in the slideshow) but there were far more displayed than actually posted (i.e. 17+ bullets for 3 images). Now this is completely disappeared.
If this is not related, I’m sure I can find another thread but I think others have had this problem before, also without solution.
Bullets disappeared because of this option in the JS:
$('#slider').nivoSlider({
...,
...,
controlNav: false,
...
});
Set it to true should make the nav come back.
Didn’t seem to work. Could it be a problem with the image source? I’m not sure I have it in my images folder but then again, I’m not sure if it’s even an image.
In fact it worked, but you don’t see the result because the nav is outside the window (too far away on the right)
Comment the 3 properties of this css rule:
.nivo-controlNav {
bottom: -20px;
left: 47%;
position: absolute;
}
in wp-content/plugins/simple-nivo-slider/styles.css
These images are used :
http://www.labratsstudio.com/wp-content/themes/boldy/images/slider_controlnav.png
http://www.labratsstudio.com/wp-content/plugins/simple-nivo-slider/images/bullets.png
but in a very strange way, not as featured on the official website. I let you watch the result, you’ll see what I mean… (did you changed this sliders’ css?)
Also, if the bullets doesn’t suit your needs, you may want to play with these values, in the js init (the comments explain how to set them accordingly):
$('#slider').nivoSlider({
[...],
controlNav:true, // 1,2,3... navigation
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
[...]
});
You’re a great help Kraignos. Thanks for the input and continued support.
It’s a pleasure 😉 Couldn’t let such a great slider broken =)
Kraignos, one more item would help and I think we can call the slider finished. I’m sure in my frenzy of changing this slider, I might have changed the display of the slider bullets to vertical but I am not sure how to change it back. Which part of the css would let me do that?
There’s also some sort of merging between the two bullets you named which gives a weird effect when the slide bullet is highlighted. I’d like to take it back to default if possible.
I really need to be more careful keeping track of my edits but I think it’s validating pretty well so I’ve done okay. This last change would be a great help.
I think this file is the original one :
http://www.labratsstudio.com/wp-content/plugins/simple-nivo-slider/nivo-slider/nivo-slider.css
(It’s copyrighted 2011 and for the Nivo Slider v2.5.2)
And this one contains your overrides :
http://www.labratsstudio.com/wp-content/themes/boldy/css/nivo-slider.css
(copyrighted 2010 and for v2.0)
Or maybe the opposite ^^
It’s strange though, with suched crossed pathes, it looks like the slider is installed on your wordpress as a plugin, AND incorporated in your theme, but finally integrated by hand. I think you added the css to your theme to make it specific to it. Anyway, I digress.
I would suggest you to restore the original file from a fresh download of the plugin, but removing this css import in your <head>…</head> tags should do the trick :
<link type="text/css" rel="stylesheet" href="http://www.labratsstudio.com/wp-content/themes/boldy/css/nivo-slider.css">
Edit : Don’t know if it’s hard-coded in the header or dynamically hooked to the header by some plugin, so if you don’t find the reference to it in the header, just open the target file, and comment everything
this will reset your images trouble, but you’ll have to redo all the slider positionning. (backup your files before)
If you need help, I can rewrite all the css code for the slider in a few minutes but you’ll have to wait until tomorrow in the evening. Going to bed now.
You’ve seemed to have figured it out quite well. I am amazed by your thinking here. Here is my short story:
This theme is originally a boldy theme with a basic slider included and modified for the theme. I felt that this one was not sufficient so I first tried to install Nivo Slider myself using the nivo slider light plugin. To enable this slider, you need to handcode the slider which works well because the home page is not accessible via WordPress anyway.
But I was having trouble loading the plugin so I installed another one that installs Nivo but is integrated into WordPress. I hoped that it would install the necessary Nivo backend and I could just use the slider by handcoding.
I’m going to try what you said and connect with you after:
UPDATE: I’ve disabled the nivo-slider.css from the original theme , reinstalled the fresh plugin, and gotten rid of all the unnecessary css (the beauty of backing up). Now we’ve got a nice Nivo slider with correct display and proper bullets.
Thanks for all the help.
