I see no function in tabs documentation, neither in slideshow documentation to let us manually choose a specific tab / slide.
There ARE next()
and prev()
, but not something like a goTo( slideIndex )
.
UPDATE 1 after Spokey's answer:
As I have activated slide change on mouseover
, the code $('#accordion img:eq(0)').mouseover();
had to do the trick for me, but it doesn't.
The complete code:
$("#accordion").tabs("#accordion div", {
tabs: 'img.tab',
effect: 'fade', /*horizontal*/
event: 'mouseover'
});
$('#accordion').mouseleave(function(){
// Following line doesn't act
$('#accordion img:eq(0)').mouseover();
// While the following alert() states that the selector is ok
alert($('#accordion img:eq(0)').attr('src'));
})
UPDATE 2
We know that there are some tabs that user can see each one by mouseover. In this place WHAT EXACTLY I WANT is that if the user leaves the whole tabs (div#accordion
in this example), only a special tab (called default tab) to be activated. In other words the last active tab should change to the default tab on mouseleave.
Please tell me what exactly should be in $('#accordion').mouseleave(function(){
and });
?
These tools don't seem to have the best documentation, but the slideshow most definitely has a manual slide tab selector.
From: the standalone demo
For a better view: http://jsfiddle.net/upbzy/3/
<!-- the tabs -->
<!-- IMPORTANT BIT -->
<div class="slidetabs"> <a href="#">slide 1</a>
<a href="#">slide 2 </a>
<a href="#">slide 3</a>
</div>
$(function () {
$(".slidetabs").tabs(".images > div", {
// enable "cross-fading" effect
effect: 'fade',
fadeOutSpeed: "slow",
// start from the beginning after the last tab
rotate: true
// use the slideshow plugin. It accepts its own configuration
}).slideshow();
//added for demo purposes only
$('.slidetabs a').click( function(){
$('body').toggleClass('green');
});
});
Update:
I think you may be looking for something like this:
$(function () {
$("#accordion").tabs("#accordion > div", {
tabs: 'img.tab',
effect: 'fade',
event: 'mouseover'
});
$('#accordion').mouseleave(function () {
$('#accordion img:eq(0)').tabs("#accordion > div");
$('.tab').first().addClass('current').siblings().removeClass('current');
});
});