Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript AnythingSlider-stuck with formatText options

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #37631
    esquisse
    Member

    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.html

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

    #101189
    Mottie
    Member

    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

    and the modified initialization code:

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

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

    #101248
    esquisse
    Member

    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);}
    #101250
    Mottie
    Member

    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!

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.