Q Basic Feature Pagination

Discussion in 'Modifications' started by Wasded, Aug 20, 2014.

  1. Wasded

    Wasded New Member

    Joined:
    May 6, 2014
    Messages:
    86
    Likes Received:
    14
    Hey dudes,

    Decided to add basic 'Show More' pagination to my site and share it with ya's, it's quite simple, yet does the trick.

    First give your featured items a container if they're yet to have one. Then name it something simple that won't interrupt anything else you have going. I always go with CUST_Item-Name, you can be different though. Different is good.

    Then add the bellow code above where your featured items begin, or at the top of your page. Your choice.
    PHP:
     <script>      
     $(
    document).ready(function () {
    $(
    ".CUST_Container-Name").hide();
    $(
    ".CUST_Container-Name).slice(0, 5).show();

    $("
    .CUST_Button-Name").click(function(){
        var showing = $("
    .CUST_Pagination-Control:visible").length;
        $("
    .CUST_Container-Name").slice(showing - 1, showing + 5).show();
        });
    });
    </script>
    What this does is find your container, div, span, class, id, child, monkey, and hides it. and chooses how many you want shown by default with the slice command. After that, it should only show 2 featured items. You can change the number if you wish to what ever you require. I've made it a nice even number so my disco always has a flow to it.

    Next you ill be wanting to add that ever so required 'More' button so you have a bit of control for your users if they want to see what's in the shadows.

    For this all you need to do is find the end of your featured items and add a simple div, or anything you desire, and give it the class name you have selected.

    in this instance I have chosen CUST_Button-Name, so my layout is
    PHP:
    <div class='CUST_Button-Name'Load More </div>
    And that's all you need, now when you select the button it will show more results. The skies the limit.
    Of course, you can style the CSS with what you want for the button so it isn't just text. Let me know if it works for ya, i'll be glad to help.

    Remember, it's only a basic fix for what I was after, so I haven't tested if there will be issues with load times or other stone age problems.

    Here's How it looks for me now

    [​IMG]
    SRC:http://i.imgur.com/oeGE2g8.png

    And after selection

    [​IMG]
    SRC:http://i.imgur.com/8ywYkhQ.png
     
  2. DecoJr

    DecoJr New Member

    Joined:
    Dec 20, 2020
    Messages:
    4
    Likes Received:
    0
    Thank you for your quick solutions @Wasded. Your code works for hiding the featured items to be on our desired numbers. However the load more script below doesn't work for me.
    PHP:
    <div class='CUST_Button-Name'Load More </div>
    Anyone able to to make this working? Thank you in advance.
     

Share This Page