YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar jogostudios asked

Image Wall Gallery With Pagination


I have been using the Image wall style for the gallery widget and it works pretty well until you have a dozen or more images. The page becomes rather large and sometimes difficult to focus on the images. It would be nice if you were able to create a pagination for the image wall by setting how many images display per page and then have the page navigation controls at the bottom and/or top.

The only way i can see doing it right now is by having to first divide your images into appropriate folders then create separate gallery widgets for each page you need then create a separate slideshow widget to place your gallery pages into, one gallery widget per slide. That is a cumbersome process and creates a lot of steps and seemingly unnecessary elements when you should be able to do it all from the one gallery widget. So if there is not way to modify the gallery widget to make this work i propose this as a feature request for the next update.


  • Widgetkit
  • Feature Request
  • General Question

16 Answers


Avatar shane.french answered

Yes, this would be great - making awesome galleries with widgetkit and zoo would be SO EASY!


Avatar manege answered

PLease ! implement pagination to wall gallery!


Avatar chiodi.marco answered

when it is possible to dream of this implementation?


Avatar stefan.reddigau answered

Yes this feature would be very nice.
At the moment the Gallery Wall is not very useable with more than 20 images.

Cause of Browser and server overload.


Avatar kutt.niinepuu answered

I second to that - I have a category blog layout where I'd like to show a row of images from the gallery. It would even suffice if there was a way to limit the number ow images in the wall layout. Say 8 or 12, 16 and when lightbox is invoked all images can be browsed with the < and > controls.
Currently the "wall" concept does not work up to expectations performance-wise, although it does look impressive if the preview image sizes are some 25-40px square :)


Avatar alainbesnard answered

I cannot understand that this feature is still missing. Is it so difficult or so long to implement?
I would also appreciate to be able to show, let say, 20 random images out of 100.

Thanks in advance.


Avatar thomas.braun answered

Is there any progress or news to this item?
The image wall is the only way to present landscape and portrait orientated photos together in a good and pretty way with the widgekit, but it is bad that there is no pagination. I would really like to move away from sigplus (http://hunyadi.info.hu/levente/en/sigplus), they solved the problem, I have galleries with more than 50 photos.

Regards, Thomas


Avatar kevin.hertenweg answered

Would like to have this feature too. I don't understand that an image gallery like the image wall doesn't have pagination available.


Avatar marian.ferko answered

there is someone from technical support who will give us a competent answer ?

Thanks in advance


Avatar carl.gerhard.wieners answered

This feature should have been there since the beginning. I always have to use 3rd party galleries for more than 16 pictures...


Avatar muckypuddle answered

This is a bit hacky and was written in 30 minutes, but seems to do the job - include in the jQuery doc ready call in theme.js:

var page = 1;  
var perPage = 10; // Number of items per page - change to suit  
var p = $('<div class="wk-gallery-page gus-page-'+page+' active-page" data-page="'+page+'"></div>'); // Create a 'pages' div to contain the a elements  
$('.wk-gallery.wk-gallery-wall > a').each(function(i){  
    p.append($(this)); // Add a element to current page  
    if(i % perPage == (perPage-1)){ // Page now has max number of items  
        $('.wk-gallery.wk-gallery-wall').append(p); // Add page to the gallery  
        p = $('<div class="wk-gallery-page gus-page-'+(++page)+'" data-page="'+page+'"></div>'); // Create a new page  
if($("a", p).length > 0) { // Last page has some items, but hasn't been added yet. Add to pages div  
} else { // Last page has no items. Reduce page counter  
var tabs = $('<div class="wk-gallery-pagination"></div>'); // Create pagination buttons  
for(var i = 1; i <= page; i++){  
        if(i == 1) // First button - should be active  
                tabs.append($("<a class='uk-button uk-button-large uk-button-primary wk-gallery-pagebutton' data-page='"+(i)+"'>"+(i)+"</a>"));  
         else // Other buttons - currently inactive  
                tabs.append($("<a class='uk-button uk-button-large uk-button wk-gallery-pagebutton' data-page='"+(i)+"'>"+(i)+"</a>"));  
$('.wk-gallery.wk-gallery-wall').append(tabs); // Add pagination to the gallery  
$('.wk-gallery-pagebutton').on('click', function(){ // Set click handler for pagination buttons  
    var page = $(this).data('page');  
    if(page == $('.active-page').data('page'))  
        return; // Page selected is the current page - ignore  
    $('.active-page').fadeOut(function(){ // Fade current page out, bring new page in  



Avatar funeralmetal answered

+1. This is a really important feature.


Where should I out that code and how to set up the gallery with it?


Avatar corrado.conti answered

Well, let me add my $0.02 on this topic. How was this designed without a pagination?

I have a client with about 2000 images per category. I want to give him the easiest user experience possible, i.e. a simple FTP upload I can set on his computer to mirror his local folders.

When I realized widgetkit didn't have a pagination feature I was stunned.
It's not a problem for me. I can easily create multiple widgetkits with 50 photos each and create more as I go along, but I doubt I can teach my 80+ years old photographer client how to handle something like that.

And why? Why would I do that? Even if I can manage it in such a cumbersome way, why would I want to do that? Is Pagination such a new concept?


Is there a simple gallery with similar functionality I can install instead? It would need to be Responsive and work very similarly to the widgetkit one, but (obviously) feature pagination.

Thank you.


Avatar greg answered

Hi all.

You can do this easily using http://listjs.com.

You need to wrap your gallery first

$('.wk-grid-width-1-1').wrap('<div id="wrapper"></div>');

then add pagination

var listWrapper = document.querySelector('#wrapper');  
$('#wrapper').append("<ul class='pagination'></ul>");

then use the listjs library

var options = {  
        listClass: 'wk-grid-width-1-1',  
        pagination: true,  
        page: 6,  
    var list = new List(listWrapper, options);  

I can help if needed.



Know someone who can answer? Share a link to this question via email or twitter.