Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #15626

    I assume the avia slider in Brightbox has the ability to show and use manual controls, like back, play/pause, forward, since they appear in the html. But I cannot seem to get them to work properly

    1) By default, they are invisible no matter what color I choose for the background

    2) The html anchor elements are empty, no characters or images, unless they are supposed to be added by jQuery. I assume this is why I see nothing on the screen.

    <div class="autoslidecontrolls" style="visibility: visible; opacity: 1; ">
    <a class="ctrl_fwd" href=""></a>
    <a class="ctrl_pause ctrl_play" href=""></a>
    <a class="ctrl_back" href=""></a>

    3) I can locate and outline them using Chrome’s Developer Tools, and if I click on either of the elements I get a full page refresh.

    What am I doing wrong? The site I’m developing is here –



    Brightbox slider doesn’t have the play/pause capability. You can only have the previous and next button with the pagination.




    Okay, I would settle for previous and next. But as you can see in the development site, the Prev/Next navigation is not visible, although the html is there. And when I click either one it still performs a full page refresh, it does not navigate forward or back.



    I found this post relating to your question (Purchase code hidden if logged out)(Purchase code hidden if logged out) -too-small

    I think that is part of the design and avia.js would need to be modified from lines 790-1600




    I spent a couple days playing with avia.js, I finally figured out the problem. I inserted or modified (depending which version of avia.js you have) this code at the end of the “appenControlls” function:

    //slideshow controll buttons
    if(options.appendAutoSlideshowControlls && options.appendControlls && slideCount > 1)
    slideControlls = $('<div></div>').appendTo(container)
    .css({visibility:'visible', opacity:1});
    var status = 'ctrl_pause';

    if(options.autorotation) status += ' ctrl_play';

    slideControlls.html('<a class="ctrl_fwd" href="">></a><a class="'+status+'" href=""> |< </a><a class="ctrl_back" href=""><</a>');

    $('.ctrl_back', slideControlls).bind('click', {show: 'prev'}, helper.setSlideNumber);
    $('.ctrl_fwd', slideControlls).bind('click', {show: 'next'}, helper.setSlideNumber);
    $('.ctrl_pause, .ctrl_play', slideControlls).bind('click', helper.toggleAutoRotation);

    The part that was missing or not working was the setSlideNumber function, as they were mistakenly preceded with “method” instead of “helper”. I then populated the anchor elements with back and forward indicators, and changed the visibility to “visible” and opacity to “1”. I’ll play around with those some more to see what the default code does.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Manual controls for slider not showing’ is closed to new replies.