├── .gitignore
├── Gruntfile.js
├── LICENSE.txt
├── README.md
├── bower.json
├── demos
├── css
│ ├── main.css
│ └── normalize.css
├── demos.html
├── img
│ ├── Thumbs.db
│ ├── slide1.jpg
│ ├── slide2.jpg
│ └── slide3.jpg
└── js
│ ├── main.js
│ └── vendor
│ └── jquery-1.11.1.min.js
├── jquery.pogo-slider.min.js
├── npm-debug.log
├── package.json
├── pogo-slider.min.css
└── src
├── jquery.pogo-slider.js
└── pogo-slider.css
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
1 | module.exports = function(grunt) {
2 |
3 | grunt.initConfig({
4 |
5 | pkg: grunt.file.readJSON('package.json'),
6 |
7 | uglify: {
8 | my_target: {
9 | files: {
10 | 'jquery.pogo-slider.min.js': ['src/jquery.pogo-slider.js']
11 | }
12 | }
13 | },
14 |
15 | cssmin: {
16 | my_target: {
17 | files: {
18 | 'pogo-slider.min.css': ['src/pogo-slider.css']
19 | }
20 | }
21 | },
22 |
23 | autoprefixer: {
24 | my_target: {
25 | src: 'pogo-slider.min.css',
26 | dest: 'pogo-slider.min.css'
27 | }
28 | }
29 |
30 | });
31 |
32 | grunt.loadNpmTasks('grunt-contrib-uglify');
33 | grunt.loadNpmTasks('grunt-contrib-cssmin');
34 | grunt.loadNpmTasks('grunt-autoprefixer');
35 |
36 | grunt.registerTask('default', ['uglify','cssmin','autoprefixer']);
37 |
38 | };
--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
1 | Copyright (c) 2014 Michael Griffin
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Pogo Slider Jquery Plugin
2 |
3 | See http://fluice.com/pogo-slider for demos and further info
4 |
5 | ## About
6 |
7 | Pogo Slider is a jQuery plugin that allows you to create animated image/content sliders. CSS animations are used to transition between slides. A CSS animation can be triggered on element within a slide, after the slide transitions in, and as the slide transitions out.
8 |
9 | ## About this fork
10 | 这里主要修复了一个在preserveTargetSize选项为True的情况下，blocksReveal无法正常工作的问题。
11 | 后续可能进行一些其他的改进。
12 | (pogo-slider.min.js压缩的时候随便找了个压缩工具，所以和原版的不太相似)
13 |
14 | ## Usage
15 |
16 | ### markup
17 |
18 |
19 |
20 |
21 |
Your Content Here!
22 |
23 |
24 |
25 |
26 |
27 | ### Instantiating the plugin and calling the slider methods
28 |
29 | var mySlider = $('.mySlider').pogoSlider(/* opts */).data('plugin_pogoSlider');
30 |
31 | mySlider.pause(); // Pauses the slider on the current slide, only works if autoplay option set to true
32 |
33 | mySlider.resume(); // Resumes the slider back to normal operation
34 |
35 | mySlider.nextSlide(); // Transition to the next slide
36 |
37 | mySlider.prevSlide(); // Transition to the previous slide
38 |
39 | mySlider.toSlide(2); // Transitions to the slide index passes to the method
40 |
41 | mySlider.destroy(); // Destroys the plugin, restoring elements to their default state
42 |
43 | ### Options
44 |
45 | #### autoplay (Boolean)
46 |
47 | When set to true, slides transition between one another automatically
48 |
49 | #### autoplayTimeout (Integer)
50 |
51 | The amount of time between a slide transitioning in ends and slide transition out starts. Only applied when autoplay is set to true
52 |
53 | #### displayProgess (Boolean)
54 |
55 | Creates a progress bar that displays the amount of time left until the current slide transitions out. Only applied when autoplay is set to true
56 |
57 | #### baseZindex (Integer)
58 |
59 | Used when setting the z-index of slides. Raise the Number if you need the slider to overlap another element
60 |
61 | #### onSlideStart (Function)
62 |
63 | Callback function that runs on slide start. Receives the index of the current slide
64 |
65 | #### onSlideEnd (Function)
66 |
67 | Callback function called on slide end. Receives the index of the current slide
68 |
69 | #### onSliderPause (Function)
70 |
71 | Callback function called when the slider has been paused, receives index of current slide
72 |
73 | #### onSliderResume (Function)
74 |
75 | Callback function called when the slider has resumed after being paused. Received the index of the current slide
76 |
77 | #### slideTransition (String)
78 |
79 | Sets the default slide transitions. Only used if the data-transition property has not been set on the slides element
80 |
81 | #### slideTransitionDuration (Integer)
82 |
83 | The default slide transitoins duration. Only used if the data-duration property has not been set on the slides element
84 |
85 | #### elementTransitionStart (Integer)
86 |
87 | The default element transition start time. Only used if the data-start property has not been set on an element
88 |
89 | #### elementTransitionDuration (Integer)
90 |
91 | The default element transition duration. Only used if the data-duration property has not been set on an element
92 |
93 | #### elementTransitionIn (String)
94 |
95 | The default element transition in animation. Only used if the data-in property has not been set on an element
96 |
97 | #### elementTransitionOut (String)
98 |
99 | The default element transition in animation. Only used if the data-out property has not been set on an element
100 |
101 | #### generateButton (Boolean)
102 |
103 | Generates next and previous buttons and sets the click event handlers
104 |
105 | #### buttonPosition (String)
106 |
107 | Where the buttons should be positionsed. Possible values:
108 |
109 | - TopLeft
110 | - TopRight
111 | - BottomLeft
112 | - BottomRight
113 | - CenterHorizontal
114 | - CenterVertical
115 |
116 | #### generateNav (Boolean)
117 |
118 | Generates a clickable nav item for each slide
119 |
120 | #### navPosition (String)
121 |
122 | Where the nav will be positioned. Possible values:
123 |
124 | - Top
125 | - Bottom
126 | - Left
127 | - Right
128 |
129 | #### preserveTargetSize (Boolean)
130 |
131 | Sets if the slider and all the elements should be scaled relative to the target size. Preserves the aspect ratio and allows you to style the slider
132 | and all the elements at a target size and have the that styling be preserved even when scaling to smaller devices.
133 |
134 | #### responsive (Boolean)
135 |
136 | If set to true, sets window resize handler to call the preserveTargetSize method if the slider is resized
137 |
138 | #### targetWidth (Integer)
139 |
140 | Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
141 |
142 | #### targetHeight (Integer)
143 |
144 | Used with the preserveTargetSize method to allow your slider to appear consistently across different screen sizes
145 |
146 | #### pauseOnHover (Boolean)
147 |
148 | Sets events handlers to pause and resume the slider on mouseover
149 |
150 |
151 | ### Slide Transitions
152 |
153 | Transitions can be set on each slide with the data-transition attribute. If no transitions is set on the slide, it will fallback to the transition set with slideTransition option
154 |
155 | - fade
156 | - slide
157 | - verticalSlide
158 | - slideLeft
159 | - slideRight
160 | - slideUp
161 | - slideDown
162 | - slideRevealLeft
163 | - slideRevealRight
164 | - slideOverLeft
165 | - slideOverRight
166 | - expandReveal
167 | - shrinkReveal
168 | - verticalSplitReveal
169 | - horizontalSplitReveal
170 | - zipReveal
171 | - barRevealDown
172 | - barRevealUp
173 | - barReveal
174 | - blocksReveal
175 | - fold
176 | - foldLeft
177 | - foldRight
178 |
179 | ### Element Animations
180 |
181 | Animations can be set on each element with the data-in and data-out attributes. Falls back to the transition set in the elementTransitionIn and elementTransitionOut settings.
182 |
183 | - slideDown
184 | - slideUp
185 | - slideRight
186 | - slideLeft
187 | - expand
188 | - contract
189 | - spin
190 | - sideFall
191 | - horizontal3DFlip
192 | - vertical3DFlip
193 | - 3DPivot
194 | - rollLeft
195 | - rollRight
196 | - glideLeft
197 | - glideRight
198 | - flipX
199 | - flipY
200 |
201 | ### Creating your own element animations
202 |
203 | You can define your own CSS animations to be triggered on an element. Each animation must be namespaced with 'pogoSlider-animation' and have both and in and out variant. The In animation is triggered when the slide transition starts, the Out animation is triggered as the slide transitions out
204 |
205 | .pogoSlider-animation-slideDownIn {
206 | animation-name: animationInName;
207 | }
208 |
209 | .pogoSlider-animation-slideDownOut {
210 | animation-name: animationOutName;
211 | }
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "pogo-slider",
3 | "description": "jQuery animated slider plugin",
4 | "version": "0.7.0",
5 | "homepage": "https://github.com/mdgriffin/pogo-slider",
6 | "authors": [
7 | "Michael Griffin "
8 | ],
9 | "keywords": [
10 | "slider",
11 | "animation"
12 | ],
13 | "main": ["jquery.pogo-slider.min.js","pogo-slider.min.css","LICENSE.txt"],
14 | "repository": {
15 | "type": "git",
16 | "url": "git://github.com/mdgriffin/pogo-slider.git"
17 | },
18 | "license": "MIT",
19 | "ignore": [
20 | "**/.*",
21 | "Gruntfile.js",
22 | "package.json",
23 | "node_modules",
24 | "bower_components",
25 | "src",
26 | "demos"
27 | ],
28 | "dependencies": {
29 | "jquery": ">=1.9.0"
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/demos/css/main.css:
--------------------------------------------------------------------------------
1 |
2 | *,
3 | *:before,
4 | *:after {
5 | -webkit-box-sizing: border-box;
6 | -moz-box-sizing: border-box;
7 | box-sizing: border-box;
8 | }
9 |
10 | body {
11 | background: #f9f9fc;
12 | -webkit-font-smoothing: antialiased;
13 | letter-spacing: .1px;
14 | line-height: 1.23em;
15 | color: #757575;
16 | }
17 |
18 | .container {
19 | width: 1000px;
20 | margin: 115px auto;
21 | border: 1px solid #eaeaea;
22 | border-radius: 5px;
23 | min-height: 500px;
24 | background: #fff;
25 | padding: 2em 0;
26 | }
27 |
28 | .sectionHeading {
29 | display: block;
30 | line-height: 1em;
31 | text-align: center;
32 | font-weight: 600;
33 | color: #212121;
34 | }
35 |
36 | .sectionHeading span {
37 | background: #fff;
38 | padding: 0 20px;
39 | display: inline-block;
40 | }
41 |
42 | .clearfix:before,
43 | .clearfix:after {
44 | content: " ";
45 | display: table;
46 | }
47 |
48 | .clearfix:after {
49 | clear: both;
50 | }
51 |
52 | .clearfix {
53 | *zoom: 1;
54 | }
55 |
56 | .fl {
57 | float: left;
58 | }
59 |
60 | .row {
61 | width: 100%;
62 | }
63 |
64 | .grid12 {
65 | float: left;
66 | padding-left: 0.5em;
67 | padding-right: 0.5em;
68 | }
69 |
70 | .small12 {
71 | width: 100%;
72 | }
73 |
74 | .small3 {
75 | width: 25%;
76 | }
77 |
78 | .slideDemos {
79 | width: 100%;
80 | }
81 |
82 | .slideDemos-single {
83 | -webkit-border-radius: 3px;
84 | border-radius: 3px;
85 | margin-top: 1em;
86 | }
87 |
88 | .slideDemos-single .pogoSlider {
89 | height: 225px;
90 | }
91 |
92 | .slideDemos-single h3 {
93 | text-align: center;
94 | margin-top: 90px;
95 | color: #fff;
96 | font-weight: 700;
97 | }
--------------------------------------------------------------------------------
/demos/css/normalize.css:
--------------------------------------------------------------------------------
1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2 |
3 | /**
4 | * 1. Set default font family to sans-serif.
5 | * 2. Prevent iOS text size adjust after orientation change, without disabling
6 | * user zoom.
7 | */
8 |
9 | html {
10 | font-family: sans-serif; /* 1 */
11 | -ms-text-size-adjust: 100%; /* 2 */
12 | -webkit-text-size-adjust: 100%; /* 2 */
13 | }
14 |
15 | /**
16 | * Remove default margin.
17 | */
18 |
19 | body {
20 | margin: 0;
21 | }
22 |
23 | /* HTML5 display definitions
24 | ========================================================================== */
25 |
26 | /**
27 | * Correct `block` display not defined for any HTML5 element in IE 8/9.
28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
29 | * Correct `block` display not defined for `main` in IE 11.
30 | */
31 |
32 | article,
33 | aside,
34 | details,
35 | figcaption,
36 | figure,
37 | footer,
38 | header,
39 | hgroup,
40 | main,
41 | nav,
42 | section,
43 | summary {
44 | display: block;
45 | }
46 |
47 | /**
48 | * 1. Correct `inline-block` display not defined in IE 8/9.
49 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
50 | */
51 |
52 | audio,
53 | canvas,
54 | progress,
55 | video {
56 | display: inline-block; /* 1 */
57 | vertical-align: baseline; /* 2 */
58 | }
59 |
60 | /**
61 | * Prevent modern browsers from displaying `audio` without controls.
62 | * Remove excess height in iOS 5 devices.
63 | */
64 |
65 | audio:not([controls]) {
66 | display: none;
67 | height: 0;
68 | }
69 |
70 | /**
71 | * Address `[hidden]` styling not present in IE 8/9/10.
72 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
73 | */
74 |
75 | [hidden],
76 | template {
77 | display: none;
78 | }
79 |
80 | /* Links
81 | ========================================================================== */
82 |
83 | /**
84 | * Remove the gray background color from active links in IE 10.
85 | */
86 |
87 | a {
88 | background: transparent;
89 | }
90 |
91 | /**
92 | * Improve readability when focused and also mouse hovered in all browsers.
93 | */
94 |
95 | a:active,
96 | a:hover {
97 | outline: 0;
98 | }
99 |
100 | /* Text-level semantics
101 | ========================================================================== */
102 |
103 | /**
104 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 | */
106 |
107 | abbr[title] {
108 | border-bottom: 1px dotted;
109 | }
110 |
111 | /**
112 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 | */
114 |
115 | b,
116 | strong {
117 | font-weight: bold;
118 | }
119 |
120 | /**
121 | * Address styling not present in Safari and Chrome.
122 | */
123 |
124 | dfn {
125 | font-style: italic;
126 | }
127 |
128 | /**
129 | * Address variable `h1` font-size and margin within `section` and `article`
130 | * contexts in Firefox 4+, Safari, and Chrome.
131 | */
132 |
133 | h1 {
134 | font-size: 2em;
135 | margin: 0.67em 0;
136 | }
137 |
138 | /**
139 | * Address styling not present in IE 8/9.
140 | */
141 |
142 | mark {
143 | background: #ff0;
144 | color: #000;
145 | }
146 |
147 | /**
148 | * Address inconsistent and variable font size in all browsers.
149 | */
150 |
151 | small {
152 | font-size: 80%;
153 | }
154 |
155 | /**
156 | * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 | */
158 |
159 | sub,
160 | sup {
161 | font-size: 75%;
162 | line-height: 0;
163 | position: relative;
164 | vertical-align: baseline;
165 | }
166 |
167 | sup {
168 | top: -0.5em;
169 | }
170 |
171 | sub {
172 | bottom: -0.25em;
173 | }
174 |
175 | /* Embedded content
176 | ========================================================================== */
177 |
178 | /**
179 | * Remove border when inside `a` element in IE 8/9/10.
180 | */
181 |
182 | img {
183 | border: 0;
184 | }
185 |
186 | /**
187 | * Correct overflow not hidden in IE 9/10/11.
188 | */
189 |
190 | svg:not(:root) {
191 | overflow: hidden;
192 | }
193 |
194 | /* Grouping content
195 | ========================================================================== */
196 |
197 | /**
198 | * Address margin not present in IE 8/9 and Safari.
199 | */
200 |
201 | figure {
202 | margin: 1em 40px;
203 | }
204 |
205 | /**
206 | * Address differences between Firefox and other browsers.
207 | */
208 |
209 | hr {
210 | -moz-box-sizing: content-box;
211 | box-sizing: content-box;
212 | height: 0;
213 | }
214 |
215 | /**
216 | * Contain overflow in all browsers.
217 | */
218 |
219 | pre {
220 | overflow: auto;
221 | }
222 |
223 | /**
224 | * Address odd `em`-unit font size rendering in all browsers.
225 | */
226 |
227 | code,
228 | kbd,
229 | pre,
230 | samp {
231 | font-family: monospace, monospace;
232 | font-size: 1em;
233 | }
234 |
235 | /* Forms
236 | ========================================================================== */
237 |
238 | /**
239 | * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 | * styling of `select`, unless a `border` property is set.
241 | */
242 |
243 | /**
244 | * 1. Correct color not being inherited.
245 | * Known issue: affects color of disabled elements.
246 | * 2. Correct font properties not being inherited.
247 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 | */
249 |
250 | button,
251 | input,
252 | optgroup,
253 | select,
254 | textarea {
255 | color: inherit; /* 1 */
256 | font: inherit; /* 2 */
257 | margin: 0; /* 3 */
258 | }
259 |
260 | /**
261 | * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 | */
263 |
264 | button {
265 | overflow: visible;
266 | }
267 |
268 | /**
269 | * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 | * All other form control elements do not inherit `text-transform` values.
271 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 | * Correct `select` style inheritance in Firefox.
273 | */
274 |
275 | button,
276 | select {
277 | text-transform: none;
278 | }
279 |
280 | /**
281 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 | * and `video` controls.
283 | * 2. Correct inability to style clickable `input` types in iOS.
284 | * 3. Improve usability and consistency of cursor style between image-type
285 | * `input` and others.
286 | */
287 |
288 | button,
289 | html input[type="button"], /* 1 */
290 | input[type="reset"],
291 | input[type="submit"] {
292 | -webkit-appearance: button; /* 2 */
293 | cursor: pointer; /* 3 */
294 | }
295 |
296 | /**
297 | * Re-set default cursor for disabled elements.
298 | */
299 |
300 | button[disabled],
301 | html input[disabled] {
302 | cursor: default;
303 | }
304 |
305 | /**
306 | * Remove inner padding and border in Firefox 4+.
307 | */
308 |
309 | button::-moz-focus-inner,
310 | input::-moz-focus-inner {
311 | border: 0;
312 | padding: 0;
313 | }
314 |
315 | /**
316 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 | * the UA stylesheet.
318 | */
319 |
320 | input {
321 | line-height: normal;
322 | }
323 |
324 | /**
325 | * It's recommended that you don't attempt to style these elements.
326 | * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 | *
328 | * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 | * 2. Remove excess padding in IE 8/9/10.
330 | */
331 |
332 | input[type="checkbox"],
333 | input[type="radio"] {
334 | box-sizing: border-box; /* 1 */
335 | padding: 0; /* 2 */
336 | }
337 |
338 | /**
339 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 | * `font-size` values of the `input`, it causes the cursor style of the
341 | * decrement button to change from `default` to `text`.
342 | */
343 |
344 | input[type="number"]::-webkit-inner-spin-button,
345 | input[type="number"]::-webkit-outer-spin-button {
346 | height: auto;
347 | }
348 |
349 | /**
350 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 | * (include `-moz` to future-proof).
353 | */
354 |
355 | input[type="search"] {
356 | -webkit-appearance: textfield; /* 1 */
357 | -moz-box-sizing: content-box;
358 | -webkit-box-sizing: content-box; /* 2 */
359 | box-sizing: content-box;
360 | }
361 |
362 | /**
363 | * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 | * Safari (but not Chrome) clips the cancel button when the search input has
365 | * padding (and `textfield` appearance).
366 | */
367 |
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 | -webkit-appearance: none;
371 | }
372 |
373 | /**
374 | * Define consistent border, margin, and padding.
375 | */
376 |
377 | fieldset {
378 | border: 1px solid #c0c0c0;
379 | margin: 0 2px;
380 | padding: 0.35em 0.625em 0.75em;
381 | }
382 |
383 | /**
384 | * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 | * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 | */
387 |
388 | legend {
389 | border: 0; /* 1 */
390 | padding: 0; /* 2 */
391 | }
392 |
393 | /**
394 | * Remove default vertical scrollbar in IE 8/9/10/11.
395 | */
396 |
397 | textarea {
398 | overflow: auto;
399 | }
400 |
401 | /**
402 | * Don't inherit the `font-weight` (applied by a rule above).
403 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 | */
405 |
406 | optgroup {
407 | font-weight: bold;
408 | }
409 |
410 | /* Tables
411 | ========================================================================== */
412 |
413 | /**
414 | * Remove most spacing between table cells.
415 | */
416 |
417 | table {
418 | border-collapse: collapse;
419 | border-spacing: 0;
420 | }
421 |
422 | td,
423 | th {
424 | padding: 0;
425 | }
--------------------------------------------------------------------------------
/demos/demos.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
18 |
19 |