Pagination in Image Jcorousal
To represent page numbers in Image jcorousal following is the html
<div class="dvPagi">
<div class="jcarousel-control">
<a href="#" class="active" id="1">1</a>
<a href="#" id="2">2</a>
<a href="#" id="3">3</a>
<a href="#" id="4">4 </a>
<a href="#" id="5">5</a>
<a href="#" id="6">6</a>
<a href="#" id="7">7</a>
<a href="#" id="8">8</a>
<a href="#" id="9">9</a>
<a href="#" id="10">10</a>
<a href="#" id="11" >11</a>
<a href="#" id="12" >12</a>
<a href="#" id="13" >13</a>
<a href="#" id="14" >14 </a>
<a href="#" id="15">15</a>
<a href="#" id="16" >16</a>
<a href="#" id="17" >17</a>
<a href="#" id="18">18</a>
<a href="#" id="19" >19</a>
<a href="#" id="20" >20</a>
<a href="#">999-9999</a>
</div>
</div>
Page numbers can vary from 1 to 1000.
but at one time only 10 page numbers should be visible starting from clicked page number.
if 3 is clicked page numbers should be visible from
3. 4 5 6 7 8 9 10 11 12 13
if 4 is clicked
4 5 6 7 8 9 10 11 12 13 14 and so on
for this i have modified jcorousal function as follows .
I want to make anchor elements with style ="display:block" in range
var startPageNo=jQuery.jcarousel.intval(jQuery(this).text()); //selected anchor
var endPageNo=jQuery.jcarousel.intval(jQuery(this).text())+10;// next 10 elements from selected element
and rest elements style ="display:none"
I tried writing for loops , but loop dont execute for 2 onward anchor elements.
.Please suggest what to do?
function mycarousel_initCallback(carousel) {
jQuery('.jcarousel-control a').bind('click', function() {
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
alert(jQuery.jcarousel.intval(jQuery(this).text()));
var startPageNo=jQuery.jcarousel.intval(jQuery(this).text());
var endPageNo=jQuery.jcarousel.intval(jQuery(this).text())+10;
//while (endPageNo<=20)
// {
//
// endPageNo="#"+endPageNo;
// jQuery(endPageNo).css("display","none");
// endPageNo=endPageNo+1;
// }
//
//
var as = jQuery('.jcarousel-control a');
alert(as.length);
for(var aid=1;aid<=as.length; aid++)
{
alert(aid);
if(aid<startPageNo)
{
aid="#"+startPageNo;
alert(aid);
alret('Reduce previous');
jQuery(aid).css("display","none");
}
else if(aid>endPageNo)
{
aid="#"+endPageNo;
alert(aid);
jQuery(aid).css("display","none");
}
}
for(var i=startPageNo; i<endPageNo; i++) {
x="#"+i;
jQuery(x).css("display","block")
}
//while (startPageNo<=0)
// {
//
// startPageNo="#"+startPageNo;
// jQuery(startPageNo).css("display","none");
// startPageNo=startPageNo-1;
// alert('here');
// }
alert(startPageNo);
alert(endPageNo);
return false;
});