Forums

esquisse

Hi there!

I'm creating a website for a client, using css and bits of jquery (this one makes me pull my hair off everyday...)
I use Jquery's AnythingSlider plugin to display texts and images, makes me save lots of space on everypage. I have managed to change the navigation buttons and show custom png images instead but my client would like the buttons to "light up" when hovered and active. As my images are called through the formatText function, how can I make them swap for another image?

I'm using the same wanted effect on other menus and submenus of the website, using desaturated images that fade to shiny glossy ones, using css and fadeto.. but I'm really stuck on the slider navigation links as the images are directly called from the script... any ideas on this one?

Here's the code:

// DOM Ready
var slider = ['1', '2'];
function formatText(index, panel) {
return "< im g src='menus/naviaccueil" + index + ".png' />";
}
jQuery(function(){
jQuery('#slider').anythingSlider({
appendNavigationTo: $('#nav'),
navigationFormatter : formatText,
startText: null,
stopText: null,
resizeContents: false,
});
});

and here's the effect I'm trying to achieve (mouse over the dog "sign" image):
http://www.esquisse-designs.com/Cavalandals/males.html

but on the two navigation buttons of this slider:
http://www.esquisse-designs.com/Cavalandals/accueil.html

Mottie

Hi esquisse!

Instead of writing extra code to swap out the image source, it would be much easier to just add the images to the background and swap them out with css. Here is the extra css (I couldn't find the hover image, so I just added "hover" to the end of the file name).

CSS

<style>
#nav .panel1, #nav .panel2 {
	background: transparent no-repeat;
	display: block;
	width: 280px;
	height: 160px;
}
#nav .panel1 { background-image: url(menus/naviaccueil1.png); }
#nav .panel2 { background-image: url(menus/naviaccueil2.png); }
#nav .panel1:hover { background-image: url(menus/naviaccueil1hover.png); }
#nav .panel2:hover { background-image: url(menus/naviaccueil2hover.png); }
</style>

and the modified initialization code:

jQuery(function(){
	jQuery('#slider').anythingSlider({
	appendNavigationTo: $('#nav'),
	buildStartStop: false,
	navigationFormatter : function(){ return ''; },
	resizeContents: false,
	});
});

esquisse

Thank you! I'm trying this right now! :)

esquisse

Thanks a lot Mottie, problem resolved!
But I still have another (last) question: can the current tab be "coloured" when the page is initialized?
My normal tabs are grey, and when focused and active they swap for the coloured version. but when you first get on the page both tabs are grey... any way to change that?

CSS:


#nav .panel1, #nav .panel2{
background: transparent no-repeat;
display: block;
width: 280px;
height: 160px;}
#nav .panel1{
background-image: url(menus/naviaccueil1.png);}
#nav .panel2{
background-image: url(menus/naviaccueil2.png);}
#nav .panel1:active,#nav .panel1:focus, #nav .panel1.playing{
background-image: url(menus/naviaccueil1hover.png);}
#nav .panel2:active,#nav .panel2:focus, #nav .panel2.playing{
background-image: url(menus/naviaccueil2hover.png);}

Mottie

To color the inactive slider current tab, just add a bit of css:

.anythingSlider .anythingControls ul li a.cur {
    background: #cc0;
}

The following would be for an active slider current tab:

.anythingSlider.activeSlider .anythingControls ul li a.cur {
    background: #00c;
    color: #fff;
}

And here is a demo to show it in action!

treehouse : what would you like to learn today?

Forums

AnythingSlider-stuck with formatText options