WordPress.org

Forums

Gallery pagination and search (17 posts)

  1. grumbirky
    Member
    Posted 5 years ago #

    Hello, I've been playing around with the native gallery, and I can't seem to find solutions to these two problems.

    1) Is it possible to search for images in the main search? I gather it may be a difficult thing to do, and have tried plugins which supposedly search for attachments, but I didn't have much luck.

    2) How could I split a gallery into more than one page, with out manually setting up different galleries?
    I stumbled upon this trac on http://core.trac.wordpress.org/ticket/6455 but it was closed due to lack of community interest..

    Any help please? Anyone? ..hello? :(

  2. esmi
    Forum Moderator
    Posted 5 years ago #

    1. Not with a plugin - although you might be able to search for text associated with images (captions etc).

    2. You can't split a single native gallery over multiple pages.

  3. johnklijnen
    Member
    Posted 5 years ago #

    In reply to grumbirky Q 1.
    I'm glad to see that I'm not the only one who has this problem. Why is searching the image gallery possible for Google (who's indexing the native image gallery much better then my Nextgen gallery) but the internal wordpress search engine can't seem to find anything (and I mean anything) in the WordPress Gallery? Maybe there is a hack for the Image.php or the search.php file that makes this work? Why is it difficult to search attachments? I don't get it. Anyone???

  4. Markol
    Member
    Posted 4 years ago #

    Hi, I am a full-time wordpress plugin developer and I am thinking of writing a plugin to solve these problems (gallery pagination and image search plus some other features like auto lightbox if required and gallery shortcode button in TinyMCE). Do you think that this is a commercially viable plug-in (ie would you be willing to pay a small price $10 - $20 for this plug-in?).

    I appreciate the amazing work of wordpress.org and plugin developers who offer their co0de for free but we all have to make a living and this is my way of doing it. So if there's and interest I will develop it.

    Regards to all,
    Mark

  5. grumbirky
    Member
    Posted 4 years ago #

    Hi Markol,

    I think for all the time I've spent setting up these galleries, I would have much preferred to spend $20 to get it up and running quicker.

    I managed to split the native gallery over pages by using the <--nextpage--> tag, and multiple gallery codes and the 'include' attribute. Not ideal.

    I'd be happy paying for a plugin that would sort out pagination, search, and a lightbox slideshow option (like you get in Flickr).
    Please do it. Go on.

    Cheers!
    Graham

  6. jomccartin
    Member
    Posted 4 years ago #

    Pagination for the native gallery is so necessary. I'd pay for it, and I'm sure my office would, too. Let us know if/when you have something.

  7. snakesmaster
    Member
    Posted 4 years ago #

    Any solution for image.php pagination?

  8. titanas
    Member
    Posted 4 years ago #

    Hey,

    Did any of this actual happened? The paid plugin etc?

  9. rperezmicheli
    Member
    Posted 4 years ago #

    I found this thread while looking up the subject. I need a way to paginate native galleries--much more manageable load times. Les us know!

  10. Markol
    Member
    Posted 4 years ago #

    Hi all,
    I am happy to announce that my plugin is available for FREE download at http://bit.ly/i2K2JU.

    This plugin automatically paginates the built-in wordpress gallery. I have added a Tiny MCE editor button also for adding the gallery shortcode to your pages and posts.

    I have tested this on WordPress 3+ so I don't make any claims about it working on other platforms.

    Please leave comments on the download page.

    If you find this useful please tweet about it and share it online.

    Mark

  11. snakesmaster
    Member
    Posted 4 years ago #

    Can we see any examples? Is the plugin in the WP directory? Thanks in advance for you work!

  12. Markol
    Member
    Posted 4 years ago #

    Hi,

    It's not in repository yet, I want to add a couple of Admin menu options.
    A frontend example can be seen at http://www.secretsbridal.com/bridesmaids/. This shows the paginated gallery and happens automatically when you activate the plugin.

    Mark

  13. snakesmaster
    Member
    Posted 4 years ago #

    Reply us when the plugin is already in the WP directory buddy... :)

  14. jordaniversen
    Member
    Posted 4 years ago #

    Tried to install it and got an error:

    Parse error: syntax error, unexpected '<' in /WWW/xxxxxxx.com/wp-content/plugins/WP3Gallery/wp3_gallery.php on line 10

    I have a jQuery Lightbox plugin installed as well that makes use of the native gallery, not sure if there will be a conflict, but this error seems more like a bad tag structure.

  15. phoenix_decay
    Member
    Posted 4 years ago #

    I haven't made a plugin for this. But changing a few files and adding a little jQuery can do this.

    Would work fine for personal sites. If your interested I can post something up? Would only take a few minutes.

  16. Markol
    Member
    Posted 4 years ago #

    Hi jordaniversen,

    Sorry bout that, I added a GNU licence snippet to the page after testing and used duplicate php tags.

    Removed now and file can be downloaded again from http://www.irishwebhq.com/wordpress-gallery-shortcode-pagination-free-plugin/

  17. phoenix_decay
    Member
    Posted 4 years ago #

    Very quick way to paginate the gallery shortcode. Try at your own risk. (works fine for me wordpress 3.1. back up your files before editing.)

    Open your themes header.php and add this before the last </head>:

    <script type="text/javascript">;(function($){
    /*******************************************************************************************/
    // jquery.pajinate.js - version 0.2
    // A jQuery plugin for paginating through any number of DOM elements
    //
    // Copyright (c) 2010, Wes Nolte (http://wesnolte.com)
    // Liscensed under the MIT License (MIT-LICENSE.txt)
    // http://www.opensource.org/licenses/mit-license.php
    // Created: 2010-04-16 | Updated: 2010-04-26
    /*******************************************************************************************/

    $.fn.pajinate = function(options){
    // Set some state information
    var current_page = 'current_page';
    var items_per_page = 'items_per_page';

    var meta;

    // Setup default option values
    var defaults = {
    item_container_id : '.content',
    items_per_page : 10,
    nav_panel_id : '.page_navigation',
    num_page_links_to_display : 20,
    start_page : 0,
    nav_label_first : 'First',
    nav_label_prev : 'Prev',
    nav_label_next : 'Next',
    nav_label_last : 'Last'
    };
    var options = $.extend(defaults,options);
    var $item_container;
    var $page_container;
    var $items;
    var $nav_panels;

    return this.each(function(){
    $page_container = $(this);
    $item_container = $(this).find(options.item_container_id);
    $items = $page_container.find(options.item_container_id).children();
    meta = $page_container;

    // Initialise meta data
    meta.data(current_page,0);
    meta.data(items_per_page, options.items_per_page);

    // Get the total number of items
    var total_items = $item_container.children().size();

    // Calculate the number of pages needed
    var number_of_pages = Math.ceil(total_items/options.items_per_page);

    // Construct the nav bar
    var more = '<span class="ellipse more">...</span>';
    var less = '<span class="ellipse less">...</span>';

    var navigation_html = ''+ options.nav_label_first +'';
    navigation_html += ''+ options.nav_label_prev +''+ less;
    var current_link = 0;
    while(number_of_pages > current_link){
    navigation_html += ''+ (current_link + 1) +'';
    current_link++;
    }
    navigation_html += more + ''+ options.nav_label_next +'';
    navigation_html += ''+ options.nav_label_last +'';

    // And add it to the appropriate area of the DOM
    $nav_panels = $page_container.find(options.nav_panel_id);
    $nav_panels.html(navigation_html).each(function(){

    $(this).find('.page_link:first').addClass('first');
    $(this).find('.page_link:last').addClass('last');

    });

    // Hide the more/less indicators
    $nav_panels.children('.ellipse').hide();

    // Set the active page link styling
    $nav_panels.find('.previous_link').next().next().addClass('active_page');

    /* Setup Page Display */
    // And hide all pages
    $items.hide();
    // Show the first page
    $items.slice(0, meta.data(items_per_page)).show();

    /* Setup Nav Menu Display */
    // Page number slices

    var total_page_no_links = $page_container.children(options.nav_panel_id+':first').children('.page_link').size();
    options.num_page_links_to_display = Math.min(options.num_page_links_to_display,total_page_no_links);

    $nav_panels.children('.page_link').hide(); // Hide all the page links

    // And only show the number we should be seeing
    $nav_panels.each(function(){
    $(this).children('.page_link').slice(0, options.num_page_links_to_display).show();
    });

    /* Bind the actions to their respective links */

    // Event handler for 'First' link
    $page_container.find('.first_link').click(function(e){
    e.preventDefault();

    movePageNumbersRight($(this),0);
    goto(0);
    });

    // Event handler for 'Last' link
    $page_container.find('.last_link').click(function(e){
    e.preventDefault();
    var lastPage = total_page_no_links - 1;
    movePageNumbersLeft($(this),lastPage);
    goto(lastPage);
    });

    // Event handler for 'Prev' link
    $page_container.find('.previous_link').click(function(e){
    e.preventDefault();
    showPrevPage($(this));
    });

    // Event handler for 'Next' link
    $page_container.find('.next_link').click(function(e){
    e.preventDefault();
    showNextPage($(this));
    });

    // Event handler for each 'Page' link
    $page_container.find('.page_link').click(function(e){
    e.preventDefault();
    goto($(this).attr('longdesc'));
    });

    // Goto the required page
    goto(parseInt(options.start_page));
    toggleMoreLess();
    });

    function showPrevPage(e){
    new_page = parseInt(meta.data(current_page)) - 1;

    // Check that we aren't on a boundary link
    if($(e).siblings('.active_page').prev('.page_link').length==true){
    movePageNumbersRight(e,new_page);
    goto(new_page);
    }

    };

    function showNextPage(e){
    new_page = parseInt(meta.data(current_page)) + 1;

    // Check that we aren't on a boundary link
    if($(e).siblings('.active_page').next('.page_link').length==true){
    movePageNumbersLeft(e,new_page);
    goto(new_page);
    }

    };

    function goto(page_num){

    var ipp = meta.data(items_per_page);

    var isLastPage = false;

    // Find the start of the next slice
    start_from = page_num * ipp;

    // Find the end of the next slice
    end_on = start_from + ipp;
    // Hide the current page
    $items.hide()
    .slice(start_from, end_on)
    .show();

    // Reassign the active class
    $page_container.find(options.nav_panel_id).children('.page_link[longdesc=' + page_num +']').addClass('active_page')
    .siblings('.active_page')
    .removeClass('active_page');

    // Set the current page meta data
    meta.data(current_page,page_num);

    // Hide the more and/or less indicators
    toggleMoreLess();
    };

    // Methods to shift the diplayed index of page numbers to the left or right
    function movePageNumbersLeft(e, new_p){
    var new_page = new_p;

    var $current_active_link = $(e).siblings('.active_page');

    if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){

    $nav_panels.each(function(){
    $(this).children('.page_link')
    .hide() // Hide all the page links
    .slice(parseInt(new_page - options.num_page_links_to_display + 1) , new_page + 1)
    .show();
    });
    }

    }

    function movePageNumbersRight(e, new_p){
    var new_page = new_p;

    var $current_active_link = $(e).siblings('.active_page');

    if($current_active_link.siblings('.page_link[longdesc=' + new_page +']').css('display') == 'none'){

    $nav_panels.each(function(){
    $(this).children('.page_link')
    .hide() // Hide all the page links
    .slice( new_page , new_page + parseInt(options.num_page_links_to_display))
    .show();
    });
    }
    }

    // Show or remove the ellipses that indicate that more page numbers exist in the page index than are currently shown
    function toggleMoreLess(){

    if(!$nav_panels.children('.page_link:visible').hasClass('last')){
    $nav_panels.children('.more').show();
    }else {
    $nav_panels.children('.more').hide();
    }

    if(!$nav_panels.children('.page_link:visible').hasClass('first')){
    $nav_panels.children('.less').show();
    }else {
    $nav_panels.children('.less').hide();
    }
    }

    };

    })(jQuery);</script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('#paging_container1').pajinate();
    });

    $(document).ready(function(){
    $('#paging_container6').pajinate({
    start_page : 0,
    items_per_page : 6
    });
    });

    </script>

    add this to your stylesheet:

    /* Gallery pagination */
    #gallery div{overflow: auto;}
    #gallery ul{list-style: none; padding:0; margin:0;}
    #gallery li{display:block;float:left;}
    #gallery li img{padding:0; margin:0; border:none; display:block;}
    #gallery li a{padding:10px; margin:0 10px 10px; display:block; border:none; background-color:#eff3f5;}
    #gallery li a:hover{ background-color:#d8dfe2;}
    #gallery .container{width: 530px; /* change to width of your pages content aread */margin:0;}
    #gallery .page_navigation , #gallery .alt_page_navigation{padding-bottom: 10px;}
    #gallery .page_navigation a, #gallery .alt_page_navigation a{padding:3px 5px;margin:2px;color:white;text-decoration:none;float: left;font-size: 12px;background-color:#1a87c1;}
    #gallery .active_page{background-color:white !important;color:black !important;}
    #gallery .content, #gallery .alt_content{color: black;}

    Open media.php and find:

    <!-- see gallery_shortcode() in wp-includes/media.php -->";
    $size_class = sanitize_html_class( $size );
    $gallery_div = "<div id='$selector' class='gallery galleryid-{$id} gallery-columns-{$columns} gallery-size-{$size_class}'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

    $output .= "<{$itemtag} class='gallery-item'>";
    $output .= "
    <{$icontag} class='gallery-icon'>
    $link
    </{$icontag}>";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
    $output .= "
    <{$captiontag} class='wp-caption-text gallery-caption'>
    " . wptexturize($attachment->post_excerpt) . "
    </{$captiontag}>";
    }
    $output .= "</{$itemtag}>";
    if ( $columns > 0 && ++$i % $columns == 0 )
    $output .= '<br style="clear: both" />';
    }

    $output .= "
    <br style='clear: both;' />
    </div>\n";

    return $output;
    }

    Replace the above code with:

    <!-- see gallery_shortcode() in wp-includes/media.php -->";
    $size_class = sanitize_html_class( $size );
    $gallery_div = "<div id='gallery'><div id='paging_container6' class='container'>
    <div class='page_navigation'></div>
    <ul class='content'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );

    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
    $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);

    $output .= "

  18. ";
    $output .= "$link";
    if ( $captiontag && trim($attachment->post_excerpt) ) {
    $output .= "
    <div class='caption'>
    " . wptexturize($attachment->post_excerpt) . "
    </div>";
    }
    $output .= "
  19. ";
    if ( $columns > 0 && ++$i % $columns == 0 )
    $output .= '
    ';
    }

    $output .= "

    </div></div>\n";

    return $output;
    }

    Thats it. Works fine for me. Using wordpress 3.1.

    Don't forget if you decided to try this, back up your files before editing.

Topic Closed

This topic has been closed to new replies.

About this Topic