Search code examples
jquerytabsslideshowjquery-tools

How to navigate to a special tab in jquerytools tab / slide?


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 });?


Solution

  • These tools don't seem to have the best documentation, but the slideshow most definitely has a manual slide tab selector.

    enter image description here
    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:

    Working Example

    $(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');
        });
    
    });