WordPress.org

Ready to get started?Download WordPress

Forums

GC Testimonials
Pagination at top and bottom of each page? (12 posts)

  1. 13shadesofgray
    Member
    Posted 11 months ago #

    This plugin has been a lifesaver for many of my clients, thanks! One request that has come up more than once is to have the pagination appear at the top and bottom of the testimonials page(s). Is this a feature that can be implemented? And/Or can you provide us with the code to update to get this feature in place on our sites that are using the plugin?

    Thanks!

    http://wordpress.org/plugins/gc-testimonials/

  2. devnz
    Member
    Plugin Author

    Posted 11 months ago #

    Hi there,

    This is a feature we are looking to implement at some point. The pagination script the plugin uses does not allow paging links at the top and bottom, so we will be changing to another script down the track that does.

    Thanks

  3. michael1023
    Member
    Posted 8 months ago #

    Hey i am using the oxygen theme and wanted pagination on the top and bottom of my post. Also i don't want it to have the page number, but a next and previous button. Can anyone help me?

    Thank you

  4. Chris Dillon
    Member
    Posted 8 months ago #

  5. michael1023
    Member
    Posted 8 months ago #

    Hey, thanks for the respond, but i'm look for something like this where it said next and previous on top and bottom of my page break. http://bossip.com/887931/pure-comedy-funniest-tweets-of-2013/

  6. Chris Dillon
    Member
    Posted 8 months ago #

    I couldn't find any jQuery plugins that only do Prev/Next so I modified the one packaged with GC Testimonials. I can post the code here. You will need to save it as a new file, upload to your server, and make 2 small changes to testimonials.php. Do you have FTP access to your server?

  7. michael1023
    Member
    Posted 8 months ago #

    Wow that shocking that a prev/Next plugin can't be found any where. If you could post the code here that would be great. Thank you for all your help.

  8. Chris Dillon
    Member
    Posted 8 months ago #

    Well, I gave up after trying 3 :)

    Save this as quickpager2.jquery.js in your /wp-content/plugins/gc-testimonials/assets/js directory:

    /**
     * Quick Pager 2
     * Based on Quick Pager by Dan Drayne
     */
    
    (function($) {
    
      $.fn.quickPager2 = function(options) {
    
        var defaults = {
          pageSize: 10,
          currentPage: 1,
          holder: null,
          pagerLocation: "after"
        };
    
        var options = $.extend(defaults, options);
    
        return this.each(function() {
    
          var selector = $(this);
          var pageCounter = 1;
    
          selector.wrap("<div class='simplePagerContainer'></div>");
    
          selector.children().each(function(i){
    
            if(i < pageCounter*options.pageSize && i >= (pageCounter-1)*options.pageSize) {
              $(this).addClass("simplePagerPage"+pageCounter);
            }
            else {
              $(this).addClass("simplePagerPage"+(pageCounter+1));
              pageCounter ++;
            } 
    
          });
    
          // show/hide the appropriate regions
          selector.children().hide();
          selector.children(".simplePagerPage"+options.currentPage).show();
    
          if(pageCounter <= 1) {
            return;
          }
    
          // Build pager navigation
          var pageNav = "<ul class='simplePagerNav'>";
          var liClasses = '';
          for (i=1;i<=pageCounter;i++){
            if (i==options.currentPage) {
              liClasses += "previousPage simplePageNav"+i;
              if (i==1 && options.currentPage==1) {
                liClasses += " disabledPage";
              }
              pageNav += "<li class='"+liClasses+"'><a rel='"+i+"' href='#'>Prev</a></li>"; // [Prev] link
            }
            else {
              if (i==options.currentPage+1){
                liClasses = "nextPage simplePageNav"+i;
                pageNav += "<li class='"+liClasses+"'><a rel='"+i+"' href='#'>Next</a></li>"; // [Next] link
              }
            }
          }
          pageNav += "</ul>";
    
          if(!options.holder) {
            switch(options.pagerLocation)
            {
            case "before":
              selector.before(pageNav);
            break;
            case "both":
              selector.before(pageNav);
              selector.after(pageNav);
            break;
            default:
              selector.after(pageNav);
            }
          }
          else {
            $(options.holder).append(pageNav);
          }
    
          //pager navigation behaviour
          selector.parent().find(".simplePagerNav a").click(function() {
    
            //grab the REL attribute
            var clickedLink = $(this).attr("rel");
            var clickedPrev = $(this).parent("li").hasClass("previousPage");
            var clickedNext = $(this).parent("li").hasClass("nextPage");
            options.currentPage = clickedLink;
    
            if(options.holder) {
              $(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");
              $(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");
            }
            else {
              // Changed to [Prev] + [Next] links
    
              $(this).parent("li").parent("ul").find("li.disabledPage").removeClass("disabledPage");
    
              // [Next] clicked
              if (clickedNext) {
    
                // change [Next] link
                if ( clickedLink == pageCounter ) {
                  // leave as link to last page, but change appearance (optional)
                  $(this).parent("li").addClass("disabledPage");
                } else {
                  // change target
                  $(this).attr("rel",parseFloat(clickedLink)+1);
                  $(this).parent("li").addClass("nextPage");
                }
    
                // change [Prev] target
                $(this).parent("li").parent("ul").find("li.previousPage").find("a").attr("rel",parseFloat(clickedLink)-1);
    
              }
    
              // [Prev] clicked
              if ( clickedPrev ) {
    
                // change [Prev] link
                if ( clickedLink == 1 ) {
                  // leave as link to first page, but change appearance (optional)
                  $(this).parent("li").addClass("disabledPage");
                } else {
                  // change [Prev] target
                  $(this).attr("rel",parseFloat(clickedLink)-1);
                  $(this).parent("li").addClass("previousPage");
                }
    
                // change [Next] target
                $(this).parent("li").parent("ul").find("li.nextPage").find("a").attr("rel",parseFloat(clickedLink)+1);
    
              }
    
            }
    
            //hide and show relevant links
            selector.children().hide();
            selector.find(".simplePagerPage"+clickedLink).show();
    
            // Scroll to top for any click
            $("html, body").animate({ "scrollTop": $("div.content").offset().top }, 800);
    
            return false;
          });
        });
      }
    
    })(jQuery);

    Then change the 2 instances of quickPager in testimonials.php to quickPager2.

    I added a CSS class called disabledPage if you want to style that in your theme. If you're on the first page, the [Prev] link has disabledPage and likewise for the [Next] link if you're on the last page. The link still works, I just made it grayed out in my case.

    For pagination both above and below, change pagerLocation to both like this:

    $output .= '$("#testimonials_container").quickPager2({ pageSize: '.$no.', currentPage: 1, pagerLocation: "both" });';

    Let me know how that works for you.

  9. royalpools
    Member
    Posted 6 months ago #

    Chris Dillon's method does work! Is there any way to get the disabledPage to automatically set both and not just the one you click? For example when the property is set to both, and you click the bottom Next link, the top Next link does not "grey out" or change only the bottom. I have messed around a bit with it and I can not get it accomplished. Thanks for the fix Chris, it is a welcome addition to GC Testimonials.

  10. Chris Dillon
    Member
    Posted 6 months ago #

    Sorry for not testing that. Here's the updated javascript:
    https://gist.github.com/cdillon/8926809

  11. royalpools
    Member
    Posted 6 months ago #

    Works beautifully Chris. Thank you. It is a real nice enhancement to this plug-in.

  12. royalpools
    Member
    Posted 6 months ago #

    Also, a helpful hint for those using Dillon's great method. If you add this code to your in your .disabledPage CSS class you can easily disable those last and first page links.

    .disabledPage {
         pointer-events:none;
    }

    It is supported in most current browsers now.

Reply

You must log in to post.

About this Plugin

About this Topic