Next Button

is this the link for the next tab?

/frontpage?quicktabs_1=1

you can get the correct link for any tab if you right click on the tab link and "Copy Link Location"..

you should remove the the extra id and class. This should work:

<ul>
    <li>
      <a href="/frontpage?quicktabs_1=1#quicktabs-1"><img src="/next.png"></a>
   </li>
</ul>

You are right, that will make a page reload..

It is not possible to create the next button with a hard coded id and class any more..
But I think it is possible to do it with a little jquery snippet (quick sulution, untested)..
next button

<a id="mynextbutton" href="/frontpage?quicktabs_1=1#quicktabs-1"><img src="/next.png"></a>

additional js code for the next button based on Drupal.quicktabs.prepare

  $('#mynextbutton').each(function() {
    this.myTabIndex = 1;
    this.qtid = 42;
    $(this).bind('click', quicktabsClick);
  });

first tabindex is 0, second is 1..

If you manage to make it work with a general solution, please create a patch or add any comments here #348724: buttons for the next and previous tab as I would like such functionality included in the module..

if you insert this code to line 24 into quicktabs.js and add a css class "previous_tab" and "next_tab" to your buttons then this code may work (untested, possible problem with quicktabs inside quictabs)

  $(el).find('#quicktabs_container_' + this.qtid + ' .previous_tab').each(function(){
    this.myTabIndex = i - 1;
    this.qtid = qtid;
    $(this).bind('click', quicktabsClick);
  });

  $(el).find('#quicktabs_container_' + this.qtid + ' .next_tab').each(function(){
    this.myTabIndex = i + 1;
    this.qtid = qtid;
    $(this).bind('click', quicktabsClick);
  });

+1. i'm gonna give this one a shot.

Okay, I came up with a theme "hack". I am using this to change the drupal books navigation and make it act as back/forth buttons on quicktabs. See this page for an example : http://www.lightworkers-federation.com/content/tutorials

In your theme folder, backup your "script.js" file. Then add the following function (copied from the quicktab.js file).

var quicktabsClick = function() {

  var tab = new Drupal.quicktabs.tab(this);

  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

  // Hide all tabpages.
  tab.container.children().addClass('quicktabs-hide');

  // Show the active tabpage.
  if (tab.tabpage.hasClass('quicktabs_tabpage')) {
    tab.tabpage.removeClass('quicktabs-hide');
  }
  else {
    if ($(this).hasClass('qt_ajax_tab')) {
      tab.startProgress();
      // Construct the ajax tabpage.
      if (tab.tabObj.type != 'view') {
        // construct the ajax path to retrieve the content, depending on type
        var qtAjaxPath = Drupal.settings.basePath + 'quicktabs/ajax/' + tab.tabObj.type + '/';
        switch (tab.tabObj.type) {
          case 'node':
            qtAjaxPath +=  tab.tabObj.nid + '/' + tab.tabObj.teaser + '/' + tab.tabObj.hide_title;
            break;
          case 'block':
            qtAjaxPath +=  tab.tabObj.bid + '/' + tab.tabObj.hide_title;
            break;
          case 'qtabs':
            qtAjaxPath +=  tab.tabObj.qtid;
            break;
        }
        
        $.ajax({
          url: qtAjaxPath,
          type: 'GET',
          data: null,
          success: tab.options.success,
          complete: tab.options.complete,
          dataType: 'json'
        });
      }
      else {
        // special treatment for views
        tab.quicktabsAjaxView();
      }
    }
  }
  return false;
}

Now, edit this code so that :

  // Set clicked tab to active.
  $(this).parents('li').siblings().removeClass('active');
  $(this).parents('li').addClass('active');

Becomes :

  // Set clicked tab to active.
  var tmp = $(this).parents('li');
  tmp.siblings().removeClass('active');
  _next_link = tmp.next().children('a');
  _back_link = tmp.prev().children('a');
  $(this).parents('li').addClass('active');

Then, add this at the top of your script.js file :

var _next_link;
var _back_link;


function _init_page_links(){
  $(".page-up").attr("href","#");
    if(_back_link!=undefined){
      $(".page-previous:last").bind('click',{obj: _back_link},trigger);
    }
    else{
      $(".page-previous:last").css("display","none");
    }
    if(_next_link!=undefined){
      $(".page-next:last").bind('click',{obj: _next_link},trigger);
    }
    else{
      $(".page-next:last").css("display","none");
    }
}

function trigger(event){
  event.data.obj.click();
  return false;
}

And add these functions also. If they already exist in your theme script file, edit them to insert the call to _init_page_links() where appropriate :

$(document).ready(function(){
  if(Drupal.behaviors.quicktabs!=null && Drupal.behaviors.quicktabs!=undefined){
  _init_page_links();
 }
});

// function to call on completed ajax call
// for non-views tabs
Drupal.quicktabs.tab.prototype.complete = function() {
  // stop the progress bar
  this.stopProgress();
  if(Drupal.behaviors.quicktabs!=null && Drupal.behaviors.quicktabs!=undefined){
  _init_page_links();
  }
}

That's it.
This one works for books, but you can use it with elements styled using the class names "page-up, page-next, page-previous". The last elements in such collections will be converted to quicktab navigation links, automatically.

Looking to place links to the various tabs from within the first (overview) tab content.

Not sure how/where the qtid comes in.

Started by binding my links to the tabs on click events to prevent the page reload, and set the tab indexes...

<script>
$('.tab-link').each(function() {
  $(this).bind('click', quicktabsClick);
});
$('#tabLink1').myTabIndex = 1;
$('#tabLink2').myTabIndex = 2;
$('#tabLink3').myTabIndex = 3;
</script>

content blah blah
<a href="MYPAGE?quicktabs_2=1#quicktabs-2" id="tabLink0">View Tab #2</a>
content blah blah
<a href="MYPAGE?quicktabs_2=2#quicktabs-2" id="tabLink0">View Tab #3</a>
content blah blah
<a href="MYPAGE?quicktabs_2=3#quicktabs-2" id="tabLink0">View Tab #4</a>
content blah blah

How might I take care of $('#tabLink0').qtid = XX; etc ?

Update: Duh on the qtid!
But still not working...

<script>
$(document).ready(function() {
 $('.tab-link').each(function() {
    $(this).bind('click', quicktabsClick);
    $(this).qtid = 2;
  });
 $('#tabLink1').myTabIndex = 1;
 $('#tabLink2').myTabIndex = 2;
 $('#tabLink3').myTabIndex = 3;
});
</script>

Same HTML as above.

Feeling spammy sorry! Think perhaps I need to add the qtid and myTabIndex before the bind.

But now getting: Uncaught TypeError: Cannot read property 'tabs' of undefined (quicktabs.js:48)
Seems there is a "tabs" property that never gets attached/created for these link elements.

Final JS...

$().ready(function() {
 $("#tabLink1").myTabIndex = 1;
 $("#tabLink2").myTabIndex = 2;
 $("#tabLink3").myTabIndex = 3;
 $(".tab-link").each(function() {
    $(this).qtid = 2;
    $(this).bind("click", quicktabsClick);
  });
});

Rather than binding the link, you can also click the tab via javascript.
In order to preserve the behavior of not jumping AND non-javascript failover, I wanted to leave the links as they are in the tabs. (Rather than changing the custom links to an #elementId matching the tabID. This meant some parsing non-sense in javascript. But it works, and allows the links to operate normally.

/* Allow custom links to fire QuickTabs */
Drupal.behaviors.tabLinker = function (context) {

  // Utility function to grab variables.
  function parseQuery(p, v) {
    var p = (!p) ? window.location.search.substring(1) : p;
    var vars = p.split("&"); 
    for (var i=0;i<vars.length;i++) { 
      var pair = vars[i].split("="); 
      if (pair[0] == v) { 
	return pair[1];
      } 
    }
  }
  $('.tablink').click(function(e) {
      e.preventDefault(); // Kill normal clicks
      // Pretty round about method, but seems open-ended.
      var hrefFrag = $(this).attr('href').split('#'); // Enable grabbing the QTID.
      var hrefQuery = hrefFrag[0].split('?');  // Enable grabbing the variables.
      var tabNum = parseQuery( hrefQuery[1], hrefFrag[1].replace('-','_') );
      var fragChunks = hrefFrag[1].split('-');
      $( '#quicktabs-tab-' + fragChunks[1] + '-' + tabNum ).click(); // click the tab via ID
  });
  return false;

};

Then your custom HTML links can look just like the tab links...

Check out my <a class="tablink" href="training-new?quicktabs_2=1#quicktabs-2">second tab</a> with stuff in it. Also see the <a class="tablink" href="training-new?quicktabs_2=2#quicktabs-2">third tab</a> because there is lovely content there.

I guess this issue can be marked as fixed..
This is a solution with a little hack, if you can provide a patch with a good solution please add it to: #348724: buttons for the next and previous tab

I included that behavior in my theme scripts.js
Perhaps the module could have a setting (default off) that would add this javascript when QuickTabs are on pages.

Redid this in D7. Little cleaner this time...
Still works by adding a "tablink" class to anchors for processing.

/**
 * Allow custom links to fire QuickTabs.
 */
(function ($) {
  Drupal.behaviors.quicktabs_linker = {
    attach: function (context, settings) {
    
      $('.tablink').click(function(e) {
	  e.preventDefault();
	  // Snag what's needed to create the ID.
	  url_obj = parseURL($(this).attr('href'));
	  tab_namespace = url_obj.hash.replace('qt-','');
	  tab_num = url_obj.params[url_obj.hash];
	  $('#quicktabs-tab-' + tab_namespace + '-' + tab_num).click();
      });
      return false;
    
    }
  };
})(jQuery);

/**
 * Utility function for dealing with URLs in JS.
 * This does not depend on jQuery so it is not namespaced.
 */
function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
	source: url,
	protocol: a.protocol.replace(':',''),
	host: a.hostname,
	port: a.port,
	query: a.search,
	params: (function(){
	    var ret = {},
		seg = a.search.replace(/^\?/,'').split('&'),
		len = seg.length, i = 0, s;
	    for (;i<len;i++) {
		if (!seg[i]) { continue; }
		s = seg[i].split('=');
		ret[s[0]] = s[1];
	    }
	    return ret;
	})(),
	file: (a.pathname.match(/\/([^\/?#]+)$/i) || [,''])[1],
	hash: a.hash.replace('#',''),
	path: a.pathname.replace(/^([^\/])/,'/$1'),
	relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [,''])[1],
	segments: a.pathname.replace(/^\//,'').split('/')
    };
}

Thank you so much for this info! It works perfectly.

I was able to use this to get it working in D7.

    $(document).ready(function(){
    	/* pagiantion */
    	$('.quicktabs-tabpage').each(function(){
    		$('article',this).append('<ul class="tablinks clearfix"><li class="first"><a class="tablink-prev" href="#">« Prev</a></li><li class="second"><a class="tablink-next" href="#">Next »</a></li></ul>')
    	});
        /* remove previous button on first tabbed content*/
    	$('.quicktabs-tabpage:first-child article .tablinks li.first').remove();
        /* remove next button on last tabbed content*/
    	$('.quicktabs-tabpage:last-child article .tablinks li.second').remove();

                /* change "#quicktabs-tab-white_paper-" to the href for your quicktabs links.*/
		$('.tablink-next').each(function(i){
			i++
			$(this).click(function(event){
    			event.preventDefault();
    			$('#quicktabs-tab-white_paper-' + i).click();
    		})
		})
		$('.tablink-prev').each(function(i){
			i++
			var prev = i-1;
			$(this).click(function(event){
    			event.preventDefault();
    			$('#quicktabs-tab-white_paper-' + prev).click();
    		})
		})

    });

my two cents :)

    $('#quicktabs-tabs_homepage .item-list:first').append('<div class="tablinks clearfix"><div class="first"><a class="tablink-prev" href="#">Prev</a></div><div class="second"><a class="tablink-next" href="#">Next</a></div></div>');

    $('.tablink-prev').click(function(){
     var index = $('.quicktabs-tabs li.active').index();
     $('.quicktabs-tabs li').eq(index).removeClass('active');
      if (index == 0) {
        index = 1;
     }
    $('.quicktabs-tabs li').eq(index - 1).addClass('active');
    $('.quicktabs-tabs li').eq(index - 1).find('a').click();
    return false;
    });

    $('.tablink-next').click(function(){
     var length = $('.quicktabs-tabs').first().children().size();;
     var index = $('.quicktabs-tabs li.active').index();
     $('.quicktabs-tabs li').eq(index).removeClass('active');
     if (parseInt(index) == parseInt(length) - 1 ) {
      index = index - 1;
     }
     $('.quicktabs-tabs li').eq(index + 1).addClass('active');
    $('.quicktabs-tabs li').eq(index + 1).find('a').click();
     return false;
    });