Ever wanted to explicitly define what page to display on the current pagination content from a url password?
This code should aim you in the right direction. Logic: -Get url variable ("page") value.
-set $total to the size of the pagination repeatable structure.
-If $pageId is set and is less than or equal to $total then use $pageId; else use the latest item.
#set ($friendlyURL = $request.get('attributes').get('CURRENT_COMPLETE_URL')) #set ($pageId = $httpUtil.getParameter($friendlyURL, 'page")) #set ($total = $image.siblings.size()) #if($pageId != "" && $getterUtil.getInteger($pageId) <= $total) #set($targetPage = $pageId) #else #set($targetPage = $total) #end #foreach($image in $image.siblings) <img src="${image.data}" /> #end
Pagination JS that can be included in the velocity file
- define page: to be $targetPage
<script type="text/javascript"> AUI().ready('aui-paginator', function(A) { var pgA = new A.Paginator({ page: ${targetPage}, containers: '.paginatorA', total: 10, maxPageLinks: 10, rowsPerPage: 1, circular: true, rowsPerPageOptions: [ 1, 3, 5, 7 ], on: { changeRequest: function(event) { var instance = this; var newState = event.state; var page = newState.page; // newState.total = 100; if (newState.before) { var lastPage = newState.before.page; A.one('.contentA .page' + lastPage).setStyle('display', 'none'); } A.one('.contentA .page' + page).setStyle('display', 'block'); // IMPORTANT! // we need to .setState(newState) or .set(STATE, newState) // to update the UI instance.setState(newState); } } }) .render(); }); </script>
*note: Have the Pagination JS code in the same template velocity file as the web content.
link