Forums

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

Home Forums JavaScript Anything slider – custom navigation scrollbar

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #153701
    gopher
    Participant

    Hi, I am trying to add a thumbnail scrollbar that allows slide navigation for the Anything Slider (similar to the thumbnail scrollbar navigation seen here: http://store.steampowered.com/app/249870/)

    I have the scrollbar displaying correctly. My problem is how to change the slide displayed on the Anything Slider when a thumbnail image is selected on the scrollbar navigation. So far I have the following:

    var lis = document.getElementById("slider_nav").getElementsByTagName("img");
    
    for (var i=0; i<lis.length; i++) {
        lis[i].addEventListener("click", dostuff, false);
    }
    
    function dostuff(e) {
        var nav_panel = e.target.id.replace("navpanel_","");
        base.flag = true;
        setTimeout(function(){ base.flag = false; }, 100);
        base.gotoPage( nav_panel );
    };
    

    This simply adds a listener event to each of the thumbnails in the thumbnail navigation scrollbar. These event listeners trigger fine and I can retrieve the index of the thumbnail clicked but I dont know what to do with this value. As you can see I tried to reuse some of the code I found in the anything slider listener but I’m really not sure about the scope of things and where this code should go. Needless to say it doesnt work.

    Anyone any ideas how to integrate this code with the Anythig slider? I’m no javascript expert.

    Many thanks.

    #153792
    gopher
    Participant

    Hi Mottie – thanks for taking interest and taking the time to reply. I’ll give some more details that may clarify what I have – whether its a right or wrong approach I don’t know to be honest.

    In a .js file separate to the anything slider .js file I have the following:

    window.onload=function() {
    
    
    var anchors = document.getElementById('slider_nav').getElementsByTagName('img').length;
     document.getElementById("slider_nav").style.width = (124*anchors) + "px";
    
        var lis = document.getElementById("slider_nav").getElementsByTagName("img");
    
        for (var i=0; i<lis.length; i++) {
            lis[i].addEventListener("click", dostuff, false);
        }
    
        function dostuff(e) {
            var nav_panel = e.target.id.replace("navpanel_","");
            var slider = $('#slider').data('AnythingSlider');
    slider.gotoPage( nav_panel ); }; }
    

    So I am adding listeners to img tags within a block with an id of ‘slider_nav’. Each img has its own id given as ‘navpanel_1’, ‘navpanel_2’ etc. So the only thing I need to get working is the listener function. It triggers fine. The first line of the listener simply strips the ‘navpanel_’ prefix from the panel id to get the number of the panel clicked (indexed from 1 to n). (I call the thumbs in the slider panels).

    I looked at your code and tried to modify it and add it to the listener function as shown above but my attempts didn’t work. My anything slider has an id of ‘slider’ but I dont quite understand what the following line of your (modified) code does exactly: var slider = $('#slider').data('AnythingSlider');

    I am also not sure if I can simply pass the value of the variable ‘nav_panel’ directly to the gotopage() function as I am.

    Like I said, I am a javascript newbie! ;-)

    Any more insight much appreciated.

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