clickable links to change javascript

Question

I have made a custom background/image fader using javascript in my wordpress home page.

I have made an unordered list of links to accompany the fading images and i would like to make these links clickable.

Once clicked i would like the image fader to jump to that image the user wants, but i dont know where to start (A bit like the navigation on your standard carousel).

I have tried to make the javascript that runs the fader into a function and pass a number to it via an onclick in my a element, but it messed up the fader big time!

Here is the JS that runs the fader:

jQuery(document).ready(function($) {

    window.setInterval(function () {
        // increase by num 1, reset to 0 at 4
        num = (num + 1) % 3;

        switch (num){
            case 1:{
                $('#page').animate( { backgroundColor: '#8D2251' },1500);
                $('#banner_1').fadeIn(1500);
                $('#banner_3').fadeOut(500);
                $('#ecommerce').removeClass('current-fading-nav');
                $('#start-ups').addClass('current-fading-nav');
                break;
            }
            case 2:{
                $('#page').animate( { backgroundColor: '#8D2251' },1500);
                $('#banner_2').fadeIn(1500);
                $('#banner_1').fadeOut(500);
                $('#start-ups').removeClass('current-fading-nav');
                $('#students').addClass('current-fading-nav');
                break;
            }
            case 0:{
                $('#page').animate( { backgroundColor: '#07102D' },1200);
                $('#banner_3').fadeIn(1500);
                $('#banner_2').fadeOut(500);
                $('#students').removeClass('current-fading-nav');
                $('#ecommerce').addClass('current-fading-nav');
                break;
            }
        }
    }, 8000); // repeat forever, polling every 3 seconds
});

And the HTML to accompany it:

<?php if(is_front_page()){ ?>
            <div class="fading-container">
                <div class="fading">
                    <img id="banner_1" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_START_UP.png"/>
                    <img id="banner_2" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_STUDENT.png"/>
                    <img id="banner_3" class="images" src="<?php bloginfo('template_url'); ?>/images/BANNER_ECOMMERCE.png"/>
                </div>

                <div id="fading-nav">
                    <div id="fading-nav-inner">
                        <ul>
                            <li id="start-ups" class="current-fading-nav">Start Up</li>
                            <li id="students">Student CV's</li>
                            <li id="ecommerce">Ecommerce</li>
                        </ul>
                    </div>
                </div>
            </div>
            <?php }?>

Basically the javascript function is an infinite loop the changes the background color of a div and swaps an image overlaying the div every 8 seconds.

Now i would like the make the #fading-nav list to be clickable links where the first one sets the image and background color to case 1 in the switch case and so on

Any ideas will be appreciated

Thanks

Answer 1

Consider using any one of the really well built slideshow plugins available. There are an awful lot of good ones at this point that offer features like hash listening/updating, responsive images, accessibility enhancements. cross browser and mobile tested... With so many good options out there, doing it by hand it should be because you either really need to know the code inside and out or as a challenge/learning opportunity.

or... Keep your HTML and try some JS along these lines. Note that the <image> and <li> id attributes are not actually needed for the js.

function sliderInit($) {
    var totalItems = $('.fading img').length;
    var sliderTimer = window.setInterval(rotateSlider, 4000);

    $("#fading-nav-inner li").on("click", updateSlider);

    function updateSlider(e) {
        // don't need an id if the number of links and number of images are always equal.
        // just show image(n) where n is the index() of the link clicked.
        var $target = $(e.target).index();
        rotateSlider($target);
    }

    function toggleClass(index) {
        $('.current-fading-nav').removeClass('current-fading-nav');
        $('#fading-nav-inner li').eq(index).addClass('current-fading-nav');
    }

    function rotateSlider(index) {
        var $active = $('.fading img:visible');

        // if there is an index, this was triggered by updateSlider()
        if (index) {
            $('.fading img').eq(index).fadeIn(1500);
            toggleClass(index);
        } else { // no index, came from setInterval
            // start from the first if we're at the end
            if ($active.index() === (totalItems - 1)) {
                $('.fading img').eq(0).fadeIn(1500);
                toggleClass(0);
            } else { // otherwise, display the next image
                toggleClass($active.index() + 1);
                $active.next('img').fadeIn(1500);
            }
        }
        $active.fadeOut(500);

        // restart the clock
        window.clearInterval(sliderTimer);
        sliderTimer = window.setInterval(rotateSlider, 4000);
    }
}

jQuery(document).ready(function ($) {

    sliderInit($);

});

http://jsfiddle.net/G5xbL/5/ to try it out.