https://eduyonhap.com/_helpers/_js/jquery.cycle2.tile.js

1/*! tile transition plugin for Cycle2;  version: 20140128 */
2(function ($) {
3"use strict";
4
5$.fn.cycle.transitions.tileSlide =
6$.fn.cycle.transitions.tileBlind = {
7
8    before: function( opts, curr, next, fwd ) {
9        opts.API.stackSlides( curr, next, fwd );
10        $(curr).css({
11            display: 'block',
12            visibility: 'visible'
13        });
14        opts.container.css('overflow', 'hidden');
15        // set defaults
16        opts.tileDelay = opts.tileDelay || opts.fx == 'tileSlide' ? 100 : 125;
17        opts.tileCount = opts.tileCount || 7;
18        opts.tileVertical = opts.tileVertical !== false;
19
20        if (!opts.container.data('cycleTileInitialized')) {
21            opts.container.on('cycle-destroyed', $.proxy(this.onDestroy, opts.API));
22            opts.container.data('cycleTileInitialized', true);
23        }
24    },
25
26    transition: function( opts, curr, next, fwd, callback ) {
27        opts.slides.not(curr).not(next).css('visibility','hidden');
28
29        var tiles = $();
30        var $curr = $(curr), $next = $(next);
31        var tile, tileWidth, tileHeight, lastTileWidth, lastTileHeight,
32            num = opts.tileCount,
33            vert = opts.tileVertical,
34            height = opts.container.height(),
35            width = opts.container.width();
36
37        if ( vert ) {
38            tileWidth = Math.floor(width / num);
39            lastTileWidth = width - (tileWidth * (num - 1));
40            tileHeight = lastTileHeight = height;
41        }
42        else {
43            tileWidth = lastTileWidth = width;
44            tileHeight = Math.floor(height / num);
45            lastTileHeight = height - (tileHeight * (num - 1));
46        }
47
48        // opts.speed = opts.speed / 2;
49        opts.container.find('.cycle-tiles-container').remove();
50
51        var animCSS;
52        var tileCSS = { left: 0, top: 0, overflow: 'hidden', position: 'absolute', margin: 0, padding: 0 };
53        if ( vert ) {
54            animCSS = opts.fx == 'tileSlide' ? { top: height } : { width: 0 };
55        }
56        else {
57            animCSS = opts.fx == 'tileSlide' ? { left: width } : { height: 0 };
58        }
59

60        var tilesContainer = $('<div class="cycle-tiles-container"></div>');
61        tilesContainer.css({
62            zIndex: $curr.css('z-index'),
63            overflow: 'visible',
64            position: 'absolute', 
65            top: 0,
66            left: 0,
67            direction: 'ltr' // #250
68        });
69        tilesContainer.insertBefore( next );
70
71        for (var i = 0; i < num; i++) {
72            tile = $('<div></div>')
73            .css( tileCSS )
74            .css({
75                width:  ((num - 1 === i) ? lastTileWidth  : tileWidth),
76                height: ((num - 1 === i) ? lastTileHeight : tileHeight),
77                marginLeft: vert ? ((i * tileWidth)) : 0,
78                marginTop:  vert ? 0 : (i * tileHeight)
79            })
80            .append($curr.clone().css({
81                position: 'relative',
82                maxWidth: 'none',
83                width: $curr.width(),
84                margin: 0, padding: 0,
85                marginLeft: vert ? -(i * tileWidth) : 0,
86                marginTop: vert ? 0 : -(i * tileHeight)
87            }));
88            tiles = tiles.add(tile);
89        }
90
91        tilesContainer.append(tiles);
92        $curr.css('visibility','hidden');
93        $next.css({
94            opacity: 1,
95            display: 'block',
96            visibility: 'visible'
97        });
98        animateTile(fwd ? 0 : num - 1);
99        
100        opts._tileAniCallback = function() {
101            $next.css({
102                display: 'block',
103                visibility: 'visible'
104            });
105            $curr.css('visibility','hidden');
106            tilesContainer.remove();
107            callback();
108        };
109
110        function animateTile(i) {
111            tiles.eq(i).animate( animCSS, {
112                duration: opts.speed,
113                easing: opts.easing,
114                complete: function () {
115                    if (fwd ? (num - 1 === i) : (0 === i)) {
116                        opts._tileAniCallback();
117                    }
118                }
119            });
120
121            setTimeout(function () {
122                if (fwd ? (num - 1 !== i) : (0 !== i)) {
123                    animateTile(fwd ? (i + 1) : (i - 1));
124                }
125            }, opts.tileDelay);
126        }
127    },
128
129    // tx API impl
130    stopTransition: function( opts ) {
131        opts.container.find('*').stop( true, true );
132        if (opts._tileAniCallback)
133            opts._tileAniCallback();
134    },
135
136    // core API supplement
137    onDestroy: function( e ) {
138        var opts = this.opts();
139        opts.container.find('.cycle-tiles-container').remove();
140    }
141};
142
143})(jQuery);