Loading...

Jquery for Sharepoint In Details-- New

Jquery Plugin

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; i0)
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++) 

57 

58
if(startPageNo=1)&&(startPageNo<=arrSlots[slot])) 62 // { 63 64 // divX='#div1-10' 65 66 // } 67 // else 68 // { 69 divX='#div'+''+arrSlots[slot-1].toString()+''+'-'+(arrSlots[slot]-1).toString(); 70 71 // } 72 73 jQuery(divX).css("display","block"); 74 var activeId="#"+startPageNo; 75 jQuery(activeId).attr("class","active"); 76 break; 77 78 } 79 } 87// 88// 89 90 91//alert(startPageNo); 92//alert(endPageNo); 93 //This for loop is for another approach( where set of numbers start from current page number i.e if selected page number is 2 then 2 3 ...12
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<=0) 126// { 127// 128// startPageNo="#"+startPageNo; 129// jQuery(startPageNo).css("display","none"); 130// startPageNo=startPageNo-1; 131// alert('here'); 132// } 133 134 135 //alert(startPageNo); 136 //alert(endPageNo); 137 return false; 138 }); 139 140 jQuery('.jcarousel-scroll select').bind('change', function() { 141 carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value); 142 143 return false; 144 }); 145 146 jQuery('#mycarousel-next').bind('click', function() { 147 carousel.next(); 148 return false; 149 }); 150 151 152 153 154 jQuery('#mycarousel-prev').bind('click', function() { 155 carousel.prev(); 156 return false; 157 }); 158};  


159//Following function highlights current page number on click of prev , next
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
173for(var aid=1;aid<=max; aid++)
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