Posts category filter for each slide

denis_rowe's Avatar

denis_rowe

11 Feb, 2017 10:45 PM

Thanks for an excellent slider, I am new to Royal Slider. I have tried 4 others and this is the best.

I am trying to create a post slider with 4 slides.

The first slide has latest 3 posts from category “A”, the second slide has latest 3 posts from category “B”, the third slide has latest 3 posts from category “C” etc.

The links at the top of the picture would be external hyperlinks to the 4 slides.

Thoughts, Thanks

  1. 1 Posted by denis_rowe on 12 Feb, 2017 03:44 AM

    denis_rowe's Avatar

    After any hours and research I worked this out by having 4 tabs and 4 sliders with 3 posts each slide, show nearest and starting on 2nd slide, and making them all 1/3 width

    I now have two issues remaining on the page.
    1. I cannot work out why I am getting so much space above and below each post article, as they are all the same height. I played with all general settings

    2. I found this page - http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/slider-content-area-shrinks

    I do have that issue, and although I do not understand jquery etc, I added the suggest code to custom functions but I did not work. Is the code I copied correct

    /* Fix slider load on change tab */
    function royalslider_fix_tabs() {
    ?>
    jQuery(".et_pb_tabs_controls").on("tabsactivate", function(event, ui) {
      var slider = ui.newPanel.find('.royalSlider');
      if(slider.length) {
          slider.royalSlider('updateSliderSize', true);
      }
    });
    <?php
    }
    add_action('new_rs_after_js_init_code', 'royalslider_fix_tabs');

    The test page is http://8b6.4a5.myftpupload.com/slider-blog/

  2. Support Staff 2 Posted by Dmitry Semenov on 12 Feb, 2017 07:04 PM

    Dmitry Semenov's Avatar

    Hello,

    I cannot work out why I am getting so much space above and below each post article, as they are all the same height. I played with all general s...

    If you're looking for fixed height - disable auto-scale-slider option in General Options and set fixed height (e.g. 200px) http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

    I do have that issue, and although I do not understand jquery etc, I added the suggest code to custom functions but I did not work. Is the code I copied correct

    The code provided is for jQuery UI tabs, it doesn't look like that you're using jQuery UI tabs. If you link to documentation of tabs script that your theme uses (or let me know event that triggers after tabs change) - I'd be able to assist.

  3. Support Staff 3 Posted by Dmitry Semenov on 12 Feb, 2017 07:14 PM

    Dmitry Semenov's Avatar

    Also note that width/height options control size of the whole slider viewport, not "center" slide. If you want them to control just center slide, you may use this technique - http://help.dimsemenov.com/discussions/problems/4068-visiblenearby-...

  4. 4 Posted by denis_rowe on 13 Feb, 2017 08:11 PM

    denis_rowe's Avatar

    Thanks, I have all the sizing, and sliding now working.

    Just need to get script working, on tab change. Is there an alternate method.

  5. Support Staff 5 Posted by Dmitry Semenov on 13 Feb, 2017 10:06 PM

    Dmitry Semenov's Avatar

    Browser can not calculate size of an element when it's hidden. Instead of triggering updateSliderSize method for the slider itself, you may trigger $(window).trigger('resize');, it's the only possible alteration.

  6. 6 Posted by denis_rowe on 14 Feb, 2017 06:30 PM

    denis_rowe's Avatar

    Sorry, I need help. I spent many hours trying various alternatives. I am not a programmer, so difficult. I tried to trigger by copying someone else's code. But no luck. What is wrong with function. It is my last step to get the slider to refresh. Was the JS file I sent from the Theme of any user. But I am happy with the below if I can get it to work. Thanks, Denis

    function royalslider_fix_tabs() {
    ?>
      $(document).change(function() {
      $(window).trigger('resize');
    });
    <?php
    }
    add_action('new_rs_after_js_init_code', 'royalslider_fix_tabs');

  7. Support Staff 7 Posted by Dmitry Semenov on 14 Feb, 2017 06:49 PM

    Dmitry Semenov's Avatar

    You need to find an event that triggers when your tabs change. I can't assist you with that, as your theme uses some private tabs script with no public documentation (or at least I can't find it). Contact your theme developer and ask how to trigger $(window).trigger('resize'); after tab is switched and fading animation finished.

  8. 8 Posted by denis_rowe on 14 Feb, 2017 07:53 PM

    denis_rowe's Avatar

    Way out of depth here but added a chrome event listner. I dont understand the below, but it seems to add/remove active class tab... Is this what I need to provide you

    if ( $et_pb_tabs.length || is_frontend_builder ) {
    window.et_pb_tabs_init = function( $et_pb_tabs ) {
    var $et_pb_tabs_li = $et_pb_tabs.find( '.et_pb_tabs_controls li' );

    $et_pb_tabs.et_pb_simple_slider( {
    use_controls : false,
    use_arrows : false,
    slide : '.et_pb_all_tabs > div',
    tabs_animation : true
    } ).on('et_hashchange', function( event ){
    var params = event.params;
    var $the_tabs = $( '#' + event.target.id );
    var active_tab = params[0];
    if ( !$the_tabs.find( '.et_pb_tabs_controls li' ).eq( active_tab ).hasClass('et_pb_tab_active') ) {
    $the_tabs.find( '.et_pb_tabs_controls li' ).eq( active_tab ).click();
    }
    });

    $et_pb_tabs_li.click( function() {
    var $this_el = $(this),
    $tabs_container = $this_el.closest( '.et_pb_tabs' ).data('et_pb_simple_slider');

    if ( $tabs_container.et_animation_running ) return false;

    $this_el.addClass( 'et_pb_tab_active' ).siblings().removeClass( 'et_pb_tab_active' );

    $tabs_container.data('et_pb_simple_slider').et_slider_move_to( $this_el.index() );

    if ( $this_el.closest( '.et_pb_tabs' ).attr('id') ) {
    var tab_state = [];
    tab_state.push( $this_el.closest( '.et_pb_tabs' ).attr('id') );
    tab_state.push( $this_el.index() );
    tab_state = tab_state.join( et_hash_module_param_seperator );
    et_set_hash( tab_state );
    }

    return false;
    } );
    }
    window.et_pb_tabs_init( $et_pb_tabs );
    }

  9. 9 Posted by denis_rowe on 14 Feb, 2017 08:03 PM

    denis_rowe's Avatar

    I think this may be it.

    $et_pb_tabs_li.click

  10. Support Staff 10 Posted by Dmitry Semenov on 15 Feb, 2017 07:08 AM

    Dmitry Semenov's Avatar

    You may try something like:

    $('.et_pb_tabs_controls li').click(function() {
      console.log('c');
      setTimeout(function() {
         $(window).trigger('resize');
      }, 1000);
    });
    

    modify 1000ms to fit your needs.

    Though, I'm not sure how bulletproof the solutions is, as that tabs script may change in future.

  11. 11 Posted by denis_rowe on 15 Feb, 2017 07:18 AM

    denis_rowe's Avatar

    Worked, Brilliant. Thanks.

    Such a supporter of you.

    I'm in Australia. How do I post a support message to recommend you.

    Yea Yea Yea

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • Picture1.png 69.4 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac