https://usd.ooo/template/USD/js/jquery.spinningGlobe.js

1/**
2 *
3 * Plugin:			Spinning Globe jQuery Plugin
4 * Plugin URI:		http://webplantmedia.com/jquery/2012/08/spinning-globe-jquery-plugin/
5 * Description:		jQuery plugin that turns any div element into a rotating animation of the planet earth.
6 * Version:			1.0.0
7 * Author:			Chris Baldelomar
8 * Author URI:		http://webplantmedia.com
9 * License:			GNU General Public License version 3.0
10 * License URI:		http://www.gnu.org/licenses/gpl-3.0.html
11 *
12 */
13(function( $ ){
14  $.fn.spinningGlobe = function( options ) {  
15		// default options
16		var defaults = {  
17			earthWidth: 1700, // width of the earth map 
18			earthHeight: 450, // height of the earth map
19			prefix: 'img/globe1/', // prefix for your image path
20			logo: false, // if true, will look for image file named 'globe_middleground_{width}x{height}.png'
21			resistance: 30 // value 1-100. The higher the number, the slower the globe spins.
22		};  
23
24		// merge default options with user defined options
25		var options = $.extend(defaults, options);  
26
27		// calculate rest of options 
28		// critical for smooth and accurate rotations
29		options.globeWidth = options.earthHeight,  
30		options.timer = options.earthWidth * options.resistance,  
31		options.earthWidthHalf = Math.round(options.earthWidth / 2),  
32		options.resetWidth = options.earthWidthHalf - 1;
33		options.resetWidthHalf = Math.round(options.earthWidthHalf / 2);
34		options.earthBoundingWidth = options.earthHeight - 2;
35
36		// cache elements
37		var $obj = $(this);
38		var $foregroundEarthImg = null;
39		var $backgroundEarthImg = null;
40
41		// functions for plugin
42		var methods = {
43			// begins plugin process
44			init : function( ) { 
45				// set parent element with style
46				$obj.css('width', options.earthHeight+'px')
47					.css('height', options.earthHeight+'px')
48					.css('position', 'relative')
49					.css('overflow', 'hidden')
50					.css('display', 'none')
51					.css('background-color', 'transparent');
52
53				// build html and images for 3D globe
54				var html = ''+
55				'<div class="globe-background" style="border-radius:50%;position:absolute; top: 0; left: 0;">'+
56					'<img src="'+options.prefix+'globe_background_'+options.earthHeight+'x'+options.earthHeight+'.png" >'+
57				'</div>'+
58				'<div class="earth-background" style="border-radius:50%;position:absolute; top: 1px; left: 1px; overflow: hidden; width:'+options.earthBoundingWidth+'px; height:'+options.earthBoundingWidth+'px;">'+
59					'<img style="border-radius:50%;position: absolute; left: -0px; top: 0px; height: '+options.earthHeight+'px;" src="'+options.prefix+'earth_background_'+options.earthWidth+'x'+options.earthHeight+'.png" width="'+options.earthWidth+'" height="'+options.earthHeight+'">'+
60				'</div>';
61				if (options.logo) {
62				html += ''+
63				'<div class="globe-middleground" style="border-radius:50%;position:absolute; top: 0; left: 0;">'+
64					'<img src="'+options.prefix+'globe_middleground_'+options.earthHeight+'x'+options.earthHeight+'.png">'+
65				'</div>';
66				}
67				html += ''+
68				'<div class="earth-foreground" style="border-radius:50%;border:solid 1px rgba(255,255,255,.62);position:absolute; top: 1px; left: 1px; overflow: hidden; width:'+options.earthBoundingWidth+'px; height:'+options.earthBoundingWidth+'px;">'+
69					'<img style="border-radius:50%;position: absolute; left: -'+options.earthWidthHalf+'px; top: 0px; height: '+options.earthHeight+'px;" src="'+options.prefix+'earth_foreground_'+options.earthWidth+'x'+options.earthHeight+'.png" width="'+options.earthWidth+'" height="'+options.earthHeight+'">'+
70				'</div>'+
71				'<div class="globe-foreground" style="border-radius:50%;position:absolute; top: 0; left: 0;">'+
72					'<img src="'+options.prefix+'globe_foreground_'+options.earthHeight+'x'+options.earthHeight+'.png">'+
73				'</div>';
74
75				// insert 3D globe into parent element
76				$obj.html(html);
77
78				// slowly fade in 3D globe after all images have been loaded
79				// disable dragging. This prevents unsightly behavior when a user drags an image.
80				$obj.children('div').children('img').load(function() {
81					$obj.fadeIn('slow');
82				}).bind('dragstart', function(event) { 
83					event.preventDefault(); 
84				});
85
86				// cache foreground and background of map of earth
87				$foregroundEarthImg = $obj.children('.earth-foreground').children('img');
88				$backgroundEarthImg = $obj.children('.earth-background').children('img');
89
90				// initialize foreground and background animation
91				methods.spinEarthForeground.apply();

92				methods.spinEarthBackground.apply();
93			},
94			// globe should spin from left to right. 
95			spinEarthForeground : function( ) {
96				// animate to the right
97				$foregroundEarthImg.animate({"left": "+="+options.resetWidth+"px"}, options.timer, "linear", function() {
98					$foregroundEarthImg.css('left', '-'+options.earthWidthHalf+'px');
99					methods.spinEarthForeground.apply();
100				});
101			},
102			spinEarthBackground : function( ) {
103				// animate to the left
104				$backgroundEarthImg.animate({"left": "-="+options.resetWidth+"px"}, options.timer, "linear", function() {
105					$backgroundEarthImg.css('left', '-0px');
106					methods.spinEarthBackground.apply();
107				});
108			}
109		};
110
111		// initialize plugin
112		return methods.init.apply( this );
113  };
114})( jQuery );