Home › Forums › JavaScript › AnythingSlider-stuck with formatText options
- This topic is empty.
-
AuthorPosts
-
April 15, 2012 at 7:10 am #37631esquisseMember
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:
and here’s the effect I’m trying to achieve (mouse over the dog “sign” image):
http://www.esquisse-designs.com/Cavalandals/males.htmlbut on the two navigation buttons of this slider:
http://www.esquisse-designs.com/Cavalandals/accueil.htmlApril 15, 2012 at 8:20 am #101189MottieMemberHi 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
and the modified initialization code:
jQuery(function(){
jQuery('#slider').anythingSlider({
appendNavigationTo: $('#nav'),
buildStartStop: false,
navigationFormatter : function(){ return ''; },
resizeContents: false,
});
});April 15, 2012 at 9:27 am #101192esquisseMemberThank you! I’m trying this right now! :)
April 16, 2012 at 7:33 am #101248esquisseMemberThanks 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);}
April 16, 2012 at 12:54 pm #101250MottieMemberTo 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!
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.