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++;
});
});