Manual controls for slider not showing « Support Forum | Kriesi.at

Support Forum » Brightbox

Manual controls for slider not showing

5 posts from 3 voices

Started 6 months ago by garydarling
Latest reply from garydarling
This topic is closed
This topic is resolved

Tags:

garydarling
Member
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>
</div>
```
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 - http://garydarling.net/cosgrove/a-retrospective/for-book-lovers/
Posted 6 months ago #
Ismael
Moderator

Hi,

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

Regards,
Ismael

Posted 6 months ago #
garydarling
Member

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.

Posted 6 months ago #
Nick
Moderator

Hi,

I found this post relating to your question

http://www.kriesi.at/support/topic/feedback-2d-slider-no-autorotate-target-images-forward-backward-are-too-small

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

Thanks,

Nick

Posted 6 months ago #

garydarling
Member

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)
														 .addClass(options.appendAutoSlideshowControlls)
														 .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.

Posted 5 months ago #

RSS feed for this topic