Trible Pager

Introduction

TriblePager is a new method of showing a list of pictures in a slider view. It's main element always has three item elements. One is the current page, one is the previous and one is the next. I invented this for making slider view easier to be responsive.

Here are some features:

• Update list without update view.
• Responsive for screen size.
• Designed for mobile
• Flexible callbacks.

This is my first js widget. And there must be a lot of stains in this. I will be appreciative if you could improve it.

Click here to view the demo

Dependencies

• jQuery 1.9.0 or later

Get start

Include trible-pager.css as a CSS stylesheet. Then you must include jquery.js or jquery.min.js into your html document. With jquery included, include trible-pager.js or trible-pager.min.js.

Just a single sentence to make a pager view: var pv = new PagerView(list, 0). list must be an array of which each element object has a property named url. The second argument specifies the index of the picture in list to show when the pager view is initialized.

More complex example

The constructer of TriblePager can has a third argument, named config. It's a JSON object that specifies more complex performances and event callbacks of TriblePager. Here comes a more complex example to show the usage of config argument.

pagerView = new TriblePager(pictures, 0, {
  animateDuration: 500,
  animateEasing: "linear",
  imageAdjustment: "auto",
  pageSize: {
    width: "50%",
    height: "50%"
  },
  loadingIndicator: "<i class=\"fa fa-spinner\"></i>",
  closeButton: "<i class=\"fa fa-spinner\"></i>,
  clickListener: function(event,pagerview){
    pagerview.destroy();
  },
  pagingRegion: "50%",
  sensitivity: 0.3
});

This example create a pager view with some specified configurations. You can try it by yourself. As I think many of them are very easy to understand.

I will show you all available configurations in the next chapter.

Configuration fields

This table shows all available configuration fields of the config argument.

Field	Instruction	Default
animateDuration	Integer. Duration of the page slide animation.	200
animateEasing	String. Easing style of the page slide animation. This is a type of jquery animation easing.	"swing"
imgSrcKey	String. Name of the property indication the img's src of the list's elements	"url"
defaultImgSrc	String. Url of the image to be loaded on original image loading failed	null
clickListener	click event callback. When page is clicked, emit click event @param [Event] touchend event @param [TriblePager] this TriblePager object	null
clickDelay	Integer. The maximum delay to emit click event	300
longTouchListener	longTouch event callback. When page is longtouched, emit longTouch event @param [Event] touchstart event @param [TriblePager] this TriblePager object	null
longTouchDelay	Integer. The minimum delay time to emit longTouch event	2000
sensitivity	Float. If slide length is larger than (page's width)×sensitivity, turn page	0.5
pageSize	Configure size of a single page, it should be like this: {   width: '10px',   height: '10px' } width or height can be a percentage('xx%'), a pixel length('xxpx') or a number	{   width: '90%',   height: '90%' }
imageAdjustment	Configure the adjustment of the image, this can be one of these strings: 'proportion': Image is resized to fit the page size with the aspect ratio not changed 'cut': Image is cut to fill the page size with the aspect ratio not changed 'fill': Image is resized to fill the page size exactly 'auto': Image use its original size 'proportion|auto' or 'cut|auto': Image is adjusted by 'proportion' or 'cut' option unless it needs to be scale larger	"proportion"
loadingIndicator	String. The inner html of image loading indicator. If set null, there is no loading indicator.	null
closeButton	String. The inner html of close button. If set null, there is no close button.	null
destroyCallback	Function. Called after the view is closed @param [TriblePager] this TriblePager object	null
createCallback	Function. Called after the view is created @param [TriblePager] this TriblePager object	null
immediately	Boolean. Specifies if the view is showed immediately after allocated	true
elementId	The id of the container element. If set null, the container element doesn't has id attribute.	null
pagingRegion	Paging regions are to region in the left and right side of the pager, click on them will navigate on left or right The width of paging region, this can be a percentage('xx%'), a pixel length('xxpx') or a number. If set to "0px" or 0 or "0%", this region is not shown.	0%

Contact me

As I mentioned before, this is my first js widget and there must be a lot of stains in this. I will be appreciative if you could improve it.

If you have any question, or if you have found any bug, or if you think this widget can be better, or, if you are interested about any thing about me and my projects, I will be very glad to be contacted.

Here are my contacts:

Email: [email protected]
Tel: +86 18610965714
Github: cosmozhang1995

Cosmo Zhang
Beijing University of Posts and Telecommunications
Sep 9th, 2014