While implementing any plug-in in JQuery ,Its very much important to understand the HTML structure.And Learn debugging with firebug. Which is very good tool for learning Jquery
JQuery Carousal:Html structure for corousal
Purpose of corousal is to scroll through every one Image with prev and next or bringing the image for which page nummber is clicked.
Pagination in Jquery corousal
(If any one needs the source code , can contact me on same blog)
This corousal shows first 10 images at one time .means display of page numbers is controlled by Jquery with following code.
each li represents one page number
//Follwing function is to identify selected page number is in which slot of 10's
function MakeSlots(n)
7 {
8
9
10 var maxlength = Math.floor(n/10);
11 var mynumbers = new Array(maxlength+1);
12
13 for (i=0; i
28 mynumbers[mynumbers.length-1]=parseInt(mynumbers[maxlength-1])+10;
29 else
30 mynumbers[mynumbers.length-1]=11;
31
32 return mynumbers;
33 }
34
35
36
following function is to display the set of page numbers according to selected page number
37function mycarousel_initCallback(carousel) {
38 jQuery('.jcarousel-control a').bind('click', function() {
39 carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
40 //alert(jQuery.jcarousel.intval(jQuery(this).text()));
41
42 var startPageNo=jQuery.jcarousel.intval(jQuery(this).text());
43 var endPageNo=jQuery.jcarousel.intval(jQuery(this).text())+10;
44
45 jQuery("div[id^='div']").css("display","none");
46 jQuery('.jcarousel-control a').removeAttr("class","active");
47
48 var as = jQuery('.jcarousel-control a');
49//alert(as.length);
50var max=as.length;
51
52
53 var arrSlots=MakeSlots(max);
54 //alert(arrSlots[0]);
55
56 for(var slot=0; slot<=arrSlots.length-1;slot++)
94/*for(var aid=1;aid<=max; aid++) 95{ 96 97 //alert(aid); 98if((aid>=startPageNo)&&(aid<=endPageNo)) 99{ 100 x="#"+aid; 101jQuery(x).css("display","block"); 102 103} 104else 105{ 106 x="#"+aid; 107jQuery(x).css("display","none"); 108 109} 110 111 112 113 114 115}*/ 116 117//for(var i=startPageNo; i
160function highlight(carousel, obejctli,liindex,listate){
161
162//alert(liindex);
163
164/*var startPageNo=liindex;
165var endPageNo=liindex+10;
166//alert(startPageNo);
167//alert(endPageNo);
168var as = jQuery('.jcarousel-control a');
169var max=as.length;
170//alert(max);
171
172
174{
175
176 //alert(aid);
177if((aid>=startPageNo)&&(aid<=endPageNo))
178{
179 x="#"+aid;
180jQuery(x).css("display","block");
181
182}
183else
184
{ 185 x="#"+aid;
186jQuery(x).css("display","none");
187
188}
189}
*/ //alert(liindex);
190
191 jQuery("div[id^='div']").css("display","none");
192 var as = jQuery('.jcarousel-control a');
193 jQuery('.jcarousel-control a').removeAttr("class","active");
194
195//alert(as.length);
196var max=as.length;
197
198
199
var arrSlots=MakeSlots(max);
200 // alert(arrSlots[0]);
201
202 for(var slot=0; slot<=arrSlots.length-1;slot++)
203 {
204 if(liindex=1)&&(startPageNo<=arrSlots[slot]))
208 // {
209
210 // divX='#div1-10'
211
212 // }
213 // else
214 // { 215 divX='#div'+''+arrSlots[slot-1].toString()+''+'-'+(arrSlots[slot]-1).toString();
216
217 // }
218
219 jQuery(divX).css("display","block");
220 var activeId="#"+liindex;
221 jQuery(activeId).attr("class","active");
222 break;
223
224 }
225 }
226
227jQuery('.jcarousel-control a:nth-child('+ liindex +')').attr("class","active");
228
229};
230
231
232
233
234
235function removehighlight(carousel, obejctli,liindex,listate){
236 jQuery('.jcarousel-control a:nth-child('+ liindex +')').removeAttr("class","active");
237};
238
239
240
241
242// Ride the carousel...
243jQuery(document).ready(function() {
244 jQuery("#mycarousel").jcarousel({
245 scroll: 1,
246 itemVisibleInCallback: highlight,
247 itemVisibleOutCallback: removehighlight,
248 initCallback: mycarousel_initCallback,
249 // This tells jCarousel NOT to autobuild prev/next buttons
250 buttonNextHTML: null, 251 buttonPrevHTML: null
252 });
253});
254
Jcorousal structure for page numbers
div class="dvPagi">
1
2
3
4
5
6
7
8
9
10
11-20
1-10
11
12
13
14
15
16
17
18
19
20
-----------------------------------------------------------------------------------
Image Map In Jquery
