https://www.vzome.com/j360-loop.js

1/**
2 * j360 jQuery plugin
3 * author     Stable Flow
4 * copyright  (c) 2009-2010 by StableFlow
5 * link       http://www.stableflow.com/downloads/jquery-plugins/360-degrees-product-view/
6 *
7 * Version: 1.0.0 (12/13/2010)
8 * Requires: jQuery v1.3+
9 *
10 * Dual licensed under the MIT and GPL licenses:
11 * http://www.opensource.org/licenses/mit-license.php
12 * http://www.gnu.org/licenses/gpl.html
13 */
14(function($){
15    $.fn.j360 = function(options) {
16        var defaults = {
17            clicked: false,
18            currImg: 1
19        }
20        var options = jQuery.extend(defaults, options);
21        return this.each(function() {
22            var $obj = jQuery(this);
23            var aImages = {};
24            $obj.css({
25                'margin-left' : 'auto',
26                'margin-right' : 'auto',
27                'text-align' : 'center',
28                'overflow' : 'hidden'
29            });
30            // $obj.prepend('<img src="/images/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
31
32            $overlay = $obj.clone(true);
33            $overlay.html('<img src="img/loader.gif" class="loader" style="margin-top:' + ($obj.height()/2 - 15) + 'px" />');
34            $overlay.attr('id', 'view_overlay');
35            $overlay.css({
36                'position' : 'absolute',
37                'z-index': '5',
38                'top' : $obj.offset().top,
39                'left' : $obj.offset().left,
40                'background' : '#fff'
41            });
42            $obj.after($overlay);
43            $obj.after('<div id="colors_ctrls"></div>');
44            jQuery('#colors_ctrls').css({
45                'width' : $obj.width(),
46                'position' : 'absolute',
47                'z-index': '5',
48                'top' : $obj.offset().top + $obj.height - 50,
49                'left' : $obj.offset().left
50            });
51
52            var imageTotal = 0;
53            jQuery('img', $obj).each(function() {
54                aImages[++imageTotal] = jQuery(this).attr('src');
55                preload(jQuery(this).attr('src'));
56            })
57            var imageCount = 0;
58            jQuery('.preload_img').load(function() {
59                if (++imageCount == imageTotal) {
60                    $overlay.animate({
61                        'filter' : 'alpha(Opacity=0)',
62                        'opacity' : 0
63                    }, 500);
64                    $obj.html('<img src="' + aImages[1] + '" />');
65                    $overlay.bind('mousedown touchstart', function(e) {
66                        if (e.type == "touchstart") {
67                            options.currPos = window.event.touches[0].pageX;
68                        } else {
69                            options.currPos = e.pageX;
70                        }
71                        options.clicked = true;
72                        return false;
73                    });
74                    jQuery(document).bind('mouseup touchend', function() {
75                        options.clicked = false;
76                    });
77                    jQuery(document).bind('mousemove touchmove', function(e) {
78                        if (options.clicked) {
79                            var pageX;
80                            if (e.type == "touchmove") {
81                                pageX = window.event.targetTouches[0].pageX;
82                            } else {
83                                pageX = e.pageX;
84                            }
85
86                            var width_step = 4;
87                            if (Math.abs(options.currPos - pageX) >= width_step) {
88                                if (options.currPos - pageX >= width_step) {
89                                    options.currImg++;
90                                    if (options.currImg > imageTotal) {
91                                        options.currImg = 1;
92                                    }
93                                } else {
94                                    options.currImg--;
95                                    if (options.currImg < 1) {
96                                        options.currImg = imageTotal;
97                                    }
98                                }
99                                options.currPos = pageX;
100                                $obj.html('<img src="' + aImages[options.currImg] + '" />');
101                            }
102                        }
103                    });
104                }
105            });
106
107            if (jQuery.browser.msie || jQuery.browser.mozilla || jQuery.browser.opera || jQuery.browser.safari ) {
108                jQuery(window).resize(function() {
109                    onresizeFunc($obj, $overlay);
110                });
111            } else {
112                var supportsOrientationChange = "onorientationchange" in window,
113                orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
114                window.addEventListener(orientationEvent, function() {
115                    onresizeFunc($obj, $overlay);
116                }, false);
117            }
118            onresizeFunc($obj, $overlay)
119
120        });
121    };
122})(jQuery)
123
124function onresizeFunc($obj, $overlay) {
125    /*
126	$obj.css({
127        'margin-top' : $(document).height()/2 - 150
128    });*/
129    $overlay.css({
130        'margin-top' : 0,
131        'top' : $obj.offset().top,
132        'left' : $obj.offset().left
133    });
134
135    jQuery('#colors_ctrls').css({
136        'top' : $obj.offset().top + $obj.height - 50,
137        'left' : $obj.offset().left
138    });
139}
140
141function preload(image) {
142    if (typeof document.body == "undefined") return;
143    try {
144        var div = document.createElement("div");
145        var s = div.style;
146        s.position = "absolute";
147        s.top = s.left = 0;
148        s.visibility = "hidden";
149        document.body.appendChild(div);
150        div.innerHTML = "<img class=\"preload_img\" src=\"" + image 

150+ "\" />";
151    } catch(e) {
152    // Error. Do nothing.
153    }
154}