jQuery: Slideshow Pagination Part2 & Part3

script.js – Part 2

01	var maxHeight = 0;

02	var totalWidth = 0;

03

04	var swPage = ul.find('.swPage');

05	swPage.each(function(){

06

07	// Looping through all the newly created pages:

08

09	var elem = $(this);

10

11	var tmpHeight = 0;

12	elem.find('li').each(function(){tmpHeight+=$(this).data('height');});

13

14	if(tmpHeight>maxHeight)

15	maxHeight = tmpHeight;

16

17	totalWidth+=elem.outerWidth();

18

19	elem.css('float','left').width(ul.width());

20

});

21

22	swPage.wrapAll('<div class="swSlider" />');

23

24	// Setting the height of the ul to the height of the tallest page:

25	ul.height(maxHeight);

26

27	var swSlider = ul.find('.swSlider');

28	swSlider.append('<div class="clear" />').width(totalWidth);

29

30	var hyperLinks = ul.find('a.swShowPage');

31

32	hyperLinks.click(function(e){

33

34	// If one of the control links is clicked, slide the swSlider div

35	// (which contains all the pages) and mark it as active:

36

37	$(this).addClass('active').siblings().removeClass('active');

38

39	swSlider.stop().animate({'margin-left': -(parseInt($(this).text())-1)*ul.width()},'slow');

40	e.preventDefault();

41

});

42

43	// Mark the first link as active the first time the code runs:

44	hyperLinks.eq(0).addClass('active');

45

46	// Center the control div:

47	swControls.css({

48	'left':'50%',

49	'margin-left':-swControls.width()/2

50

});

51

52	return this;

53

54	}})(jQuery);

In the second part of the script, we loop through the newly created pages, set their sizes and float them to the left. In the process we also find the tallest page, and set the height of the ul accordingly.

We also wrap the pages inside a swSlider div, which is wide enough to display them side by side. After this we listen for the click event on the control links, and slide the swSlider div with the animate method. This creates the slide effect that, observed in the demo.

script.js – Part 3

01	$(document).ready(function(){

02	/* The following code is executed once the DOM is loaded */

03

04	// Calling the jQuery plugin and splitting the

05	// #holder UL into pages of 3 LIs each:

06

07	$('#holder').sweetPages({perPage:3});

08

09	// The default behaviour of the plugin is to insert the

10	// page links in the ul, but we need them in the main container:

11

12	var controls = $('.swControls').detach();

13	controls.appendTo('#main');

14

15

});

In the last part of the code, we just a call to the plugin and passing the perPage setting . Also notice the use of the detach method, introduced in jQuery 1.4. It removes elements from the DOM, but leaves all the event listeners intact. It enables us to move the controls outside of the UL they were originally inserted in, keeping the click functionality in place.

With this our sweet pagination solution with jQuery and CSS3 is complete!

Conclusion

With this plugin you can power any kinds of comment threads, slideshows, product pages or other kinds of data. The advantage is that if JavaScript is disabled you still end up with a semantic and SEO friendly code. However if you plan to display huge chunks of data, it is still best to implement a back-end solution, as with the plug-in all the content is transferred to the visitor’s browser.