Pass Custom URL Variables to display particular content

paginationintemplate.vm

<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>

template.vm

#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