hi, I’ve done some works on pagination and used easy slider to manage a long list of result pages.
after installing easyslider (
http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding)
here is the code I putted on a chunk named {{easyslider}}. It takes every <li>links</li> and put it in a line whom slide (with two button control).
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/easySlider1.5.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
controlsBefore: '<p id="controls">',
controlsAfter: '</p>',
speed:10,
continuous:true
});
});
</script>
<style>
/* Easy Slider */
#slider ul, #slider li{
margin:0;
padding:0;
list-style:none;
}
#slider li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:20px;
height:15px;
overflow:hidden;
}
p#controls {
margin:0;
position:relative;
}
#prevBtn, #nextBtn {
display:block;
margin:0;
overflow:hidden;
text-indent:-8000px;
width:6px;
height:15px;
position:absolute;
left:-8px;
top: -16px;
}
#nextBtn {
left:800px;
top: -16px;
}
#prevBtn a, #nextBtn a {
display:block;
width:6px;
height:15px;
background:url(assets/images/flechegauche.jpg) no-repeat 0 0;
}
#nextBtn a {
background:url(assets/images/flechedroite.jpg) no-repeat 0 0;
}
/* // Easy Slider */
</style>
after that, modify the code of your ditto snippet line 942 (duplicate and rename it before):
$tplPaginatePage = isset($tplPaginatePage)? $ditto->template->fetch($tplPaginatePage) : "<li><a class='ditto_page' href='[+url+]'>[+page+]</a></li>";
and line 962:
$tplPaginateCurrentPage = isset($tplPaginateCurrentPage)? $ditto->template->fetch($tplPaginateCurrentPage) : "<li><span class='ditto_currentpage'>[+page+]</span></li>";
finally, make a page with a call of your easyslider chunk and you modified ditto snippet. Don’t forget to create the two little pictures for the arrows (flechedroite.jpg and flechegauche.jpg in my script).
it looks like that:
