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

  • Resolved jinch

    (@jinch)


    Hope I can explain this ok…

    I have a single page which has a number of JQuery UI tabs.

    On tab1, I have 3 links to slides on tab2 and 3 links to slides on tab3 i.e. on tab1 there are the following links:
    > see slide one on tab2
    > see slide two on tab2
    > see slide three on tab2
    > see slide one on tab3
    > see slide two on tab3
    > see slide three on tab3

    I’m checking which tab to open and which slide to display like this:
    [Code moderated as per the Forum Rules. The maximum number of lines of code that you can post in these forums is ten lines. Please use the pastebin]

    The first 3 links work great, opening tab2 and showing the right slide.

    But, the last 3 links don’t, opening tab3 fine but always showing the same slide (the last one I clicked on previously).

    Can you tell me what I’m doing wrong, and what what I need to do to achieve this?

    http://wordpress.org/extend/plugins/anythingslider-for-wordpress/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Jacob Dubail

    (@jacobdubail)

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

    Thanks,
    Jacob

    Thread Starter jinch

    (@jinch)

    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!

    Plugin Contributor Mottie

    (@mottie)

    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();
        });
    });
    Thread Starter jinch

    (@jinch)

    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.

    Plugin Contributor Mottie

    (@mottie)

    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();
    });
    Thread Starter jinch

    (@jinch)

    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!

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘[Plugin: AnythingSlider for WordPress] static links to two sliders on two separate tabs’ is closed to new replies.