[Plugin: AnythingSlider for WordPress] static links to two sliders on two separate tabs

Could you post the code at pastebin, or share a link to the site?

Thanks,
Jacob

Hi Jacob –

Site is just on my local pc, but here’s the code for the page with the tabs and sliders on:

<script>
jQuery("document").ready(function() {
    jQuery( "#tabs" ).tabs();
	jQuery("#web_review").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-2");
		jQuery('.anythingSlider').anythingSlider(1);
		e.preventDefault();
		});
	jQuery("#web_test").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-2");
		jQuery('.anythingSlider').anythingSlider(2);
		e.preventDefault();
		});
	jQuery("#web_design").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-2");
		jQuery('.anythingSlider').anythingSlider(3);
		e.preventDefault();
		});
	jQuery("#words_create").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-3");
		jQuery('.anythingSlider').anythingSlider(4);
		e.preventDefault();
		});
	jQuery("#words_check").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-3");
		jQuery('.anythingSlider').anythingSlider(5);
		e.preventDefault();
		});
	jQuery("#words_proofread").click(function(e){
		jQuery("#tabs").tabs("select","#tabs-3");
		jQuery('.anythingSlider').anythingSlider(6);
		e.preventDefault();
		});
});
</script>

<div class="homePage">

<div id="tabs" class="ui-tabs ui-widget ui-widget-content ui-corner-all">
	<ul class="ui-tabs-nav ui-helper-reset ui-helper-clearfix ui-widget-header ui-corner-all">
		<li class="ui-state-default ui-corner-top ui-tabs-selected ui-state-active"><a href="#tabs-1">Home</a></li>
		<li class="ui-state-default ui-corner-top"><a href="#tabs-2">Websites</a></li>
		<li class="ui-state-default ui-corner-top"><a href="#tabs-3">Words</a></li>
	</ul>
	<div id="tabs-1" class="ui-tabs-panel ui-widget-content ui-corner-bottom">

		<div id="homeContentWeb">
		<ul>
			<li><a href="#" id="web_review" class="highlight">link to tab2, slide1</a></li>
			<li><a href="#" id="web_test" class="highlight">link to tab2, slide2</a></li>
			<li><a href="#" id="web_design" class="highlight">link to tab2, slide3</a></li>
		</ul>
		</div>

		<div id="homeContentWords">
		<ul>
			<li><a href="#" id="words_create" class="highlight">link to tab3, slide1</a></li>
			<li><a href="#" id="words_check" class="highlight">link to tab3, slide2</a></li>
			<li><a href="#" id="words_proofread" class="highlight">link to tab3, slide3</a></li>
		</ul>
		</div>
	</div>
	<div id="tabs-2" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
		[anything_slides navFormat="true" orderby="menu_order" order="ASC" cat="web"]
	</div>
	<div id="tabs-3" class="ui-tabs-panel ui-widget-content ui-corner-bottom ui-tabs-hide">
		[anything_slides navFormat="true" orderby="menu_order" order="ASC" cat="words"]
	</div>
</div>
</div>

Each slide is just a slide with text in so nothing really to show you. I have the first three slides numbered 1,2 and 3 and categorised as “web”, and the remaining three slides numbered 4,5 and 6 and categorised as “words” so that each slider picks up the right slides to display.

Really appreciate any advice you can hive with this as it’s urgent!

p.s. if you can suggest any improvements to the code please do – I’m new to this sort of thing!

Hi Jinch!

Try this code… and I made a basic demo of it in action here

jQuery("document").ready(function() {

    var setTab = function(tab, slide) {
        tab = "#tabs-" + tab;
        jQuery('#tabs').tabs("select", tab);
        jQuery(tab + ' .anythingBase').anythingSlider(slide);
    };

    jQuery("#tabs").tabs();
    jQuery("#web_review").click(function(e) {
        setTab(2, 1);
        e.preventDefault();
    });
    jQuery("#web_test").click(function(e) {
        setTab(2, 2);
        e.preventDefault();
    });
    jQuery("#web_design").click(function(e) {
        setTab(2, 3);
        e.preventDefault();
    });
    jQuery("#words_create").click(function(e) {
        setTab(3, 4);
        e.preventDefault();
    });
    jQuery("#words_check").click(function(e) {
        setTab(3, 5);
        e.preventDefault();
    });
    jQuery("#words_proofread").click(function(e) {
        setTab(3, 6);
        e.preventDefault();
    });
});

Hi Mottie –

Many thanks for that. It doesn’t seem to work on my site, though. As with my previous code attempt, it works fine for the three on tab-2 but always goes to the last selected slide on tab-3.

I’ve inserted the code above into the HEAD section of the header.php file for my theme: is that the right place? When I tried it in the page itself it just wrapped it in <p> tags.

I was curious as to why the last three links go to slides 4, 5 and 6 in the third tab instead of 1, 2 and 3 since it is a completely new tab and a new slider. Was that intentional?

Maybe try this for the last three links:

jQuery("#words_create").click(function(e) {
    setTab(3, 1);
    e.preventDefault();
});
jQuery("#words_check").click(function(e) {
    setTab(3, 2);
    e.preventDefault();
});
jQuery("#words_proofread").click(function(e) {
    setTab(3, 3);
    e.preventDefault();
});

You did it!!!

I officially love you and / or owe you a beer!

Thanks Mottie, you’ve solved a problem that’s been bugging my progress for weeks. I really appreciate it.

Cheers again!