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

Will · Accepted Answer · 2014-01-13 07:23:35Z

2

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.

answered Jan 13, 2014 at 7:23

Will

4,1651 gold badge19 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tom Burman Over a year ago

Thanks this works lovely, except one bug which can be seen on your fiddle and on my website where i noticed it, when on the 2nd image and link, if you try to click back to the first slide for some reason it goes to the last slide, any ideas? thanks

Tom Burman Over a year ago

Also how do i build my fading background in with this fader function? thanks

Tom Burman Over a year ago

Dont worry i have figured out the background problem, but not the clicking issue. Using firebug i can see that index is never being set to 0 on the first if statement in rotate slider. Not sure how to fix it though!

Collectives™ on Stack Overflow

clickable links to change javascript

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related