Viewing 1 replies (of 1 total)
  • For add pagination on both side change script as below in paginated-effects-gallery.php file

    jQuery(document).ready(function($) {
    
    				//user settings
    				var thumbsPerPage = <?php echo max( get_option( "thumbnails_per_page" ), 1 ); ?>;
    				var maxPaginatedLinks = <?php echo max( get_option( "paginated_links" ), 3 ); ?>;
    				var hideEffect = "<?php echo get_option( "hide_effect" ); ?>";
    				var showEffect = "<?php echo get_option( "show_effect" ); ?>";
    				var effectSpeed = "<?php echo get_option( "effect_speed" ); ?>";
    				var count = 1;
    
    				//handles multiple galleries on page
    				var galleryCount = $( "[id^=gallery-]" ).each( function() {			
    
    					var galleryId = "#" + $( this ).attr( "id" ) + " ";										
    
    					//select initial thumbnails to show
    					var totalThumbs = $( galleryId + ".gallery-item" ).size();
    					var pagination = Math.ceil( totalThumbs / thumbsPerPage );
    					$( galleryId + ".gallery-item" ).hide();
    					$( galleryId + ".gallery-item" ).slice( 0, thumbsPerPage ).show();
    
    					//clean up break tags
    					$( galleryId + " br" ).remove();
    					$( galleryId + ".gallery-item:last" ).after( "<br style='clear:both;' />" );
    
    					//wrap the gallery so it does does not collapse when we hide/show
    					$( galleryId ).wrap( "<div class='gallery-wrap'/>" );
    					$( galleryId ).parent().height( $( galleryId ).height() );	
    
    					//generate our pagination
    					var html = "";
    					html += "<span id='pagination-first'>first</span> ";
    					for ( var i = 1; i < Math.min( maxPaginatedLinks + 1, pagination + 1 ); i++ ) {
    						var id = "pagination-" + i;
    						//determine the current selected page
    							var currentPage = "";
    							if( i == 1 ) {
    								currentPage += "class='current-page'";
    							}
    							html += "<span id='" + id + "' " + currentPage + ">" + i + "</span> ";
    					}
    					html += "<span id='pagination-last'>last</span> ";
    					$( galleryId ).parent().after( "<div id='peg-" +  count +"' class='pagination'>" + html + "</div>" );
    					$( galleryId ).parent().before( "<div id='peg-before-" +  count +"' class='pagination'>" + html + "</div>" );
    
    					//pagination callback function
    					$( "#peg-" + count ).add("#peg-before-" + count).on( "click", "span", function() {
    						var pagination_id = $( this ).attr( "id" ).substr( 11 );
    						var sliceFrom = 0;						
    
    						//Determine thumbnails to show
    						if( pagination_id == "first" ) {
    							sliceFrom = 0;
    							pagination_id = 1;
    						}
    						else if( pagination_id == "last" ) {
    							sliceFrom = ( pagination - 1 ) * thumbsPerPage;
    							pagination_id = pagination;
    						}
    						else {
    							sliceFrom = ( pagination_id - 1 ) * thumbsPerPage;
    						}
    
    						//hide and show the new gallery
    						if( hideEffect == "none" ) {
    							$( galleryId ).hide();
    							$( galleryId + ".gallery-item" ).hide();
    							$( galleryId + ".gallery-item" ).slice( sliceFrom, sliceFrom + thumbsPerPage ).show();
    							if( showEffect == "none" ) {
    								$( galleryId ).show();
    							}
    							else {
    								$( galleryId ).show( showEffect, effectSpeed );
    							}
    						}
    						else {
    							$( galleryId ).hide( hideEffect, effectSpeed, function() {
    								$( galleryId + ".gallery-item" ).hide();
    								$( galleryId + ".gallery-item" ).slice( sliceFrom, sliceFrom + thumbsPerPage ).show();
    								if( showEffect == "none" ) {
    									$( galleryId ).show();
    								}
    								else {
    									$( galleryId ).show( showEffect, effectSpeed );
    								}
    							});
    						}
    
    						//update pagination
    						var html = "";
    						html += "<span id='pagination-first'>first</span> ";
    						for ( var i = Math.max( 1 , Math.min( pagination_id - Math.floor( maxPaginatedLinks / 2 ), pagination - ( maxPaginatedLinks - 1 ) ) ); i < Math.min( Math.max( 1, pagination_id - Math.floor( maxPaginatedLinks / 2) ) + maxPaginatedLinks, pagination + 1 ); i++ ) {
    							var id = "pagination-" + i;
    							//determine the current selected page
    							var currentPage = "";
    							if( pagination_id == i ) {
    								currentPage += "class='current-page'";
    							}
    							html += "<span id='" + id + "' " + currentPage + ">" + i + "</span> ";
    						}
    						html += "<span id='pagination-last'>last</span> ";
    						$( ".pagination").html( html );
    					});
    					count++;
    				});
    			});

Viewing 1 replies (of 1 total)
  • The topic ‘Show pagination both above and under the thumbs’ is closed to new replies.