360° Nude References (Boobs ahoy!)

1
polycounter lvl 10
Offline / Send Message
Swizzle polycounter lvl 10
http://www.page3.com/page360/

Just stumbled across this and thought the character guys around here might find it useful. It's a bunch of 360° turnarounds of nude models that you can click and drag on to rotate them.

Most of the models are in kind of goofy poses, but this one, for example, is in something pretty close to a T-pose.

Replies

  • LRoy
    Offline / Send Message
    LRoy polycounter lvl 8
    going into my... reference folder
  • Mrskullface
    i love watching their eyes go crazy!
  • Bigjohn
    Offline / Send Message
    Bigjohn polycounter lvl 7
    wow this is nice. Two things, I wonder if there's a way to rip this locally, and I also wonder if they (or someone else) has this for males.

    Thanks for sharing
  • Isaiah Sherman
    Offline / Send Message
    Isaiah Sherman polycounter lvl 9
    errmerguuuuuuurd


    My wife just walked in while I was looking at that and I had to explain to her it wasn't fap material. She wasn't happy.


    XD
  • Selaznog
    Offline / Send Message
    Selaznog polycounter lvl 5
    Bigjohn wrote: »
    wow this is nice. Two things, I wonder if there's a way to rip this locally, and I also wonder if they (or someone else) has this for males.

    Thanks for sharing


    Extreme Picture Finder should do the trick.
  • Lamont
    Offline / Send Message
    Lamont polycounter lvl 9
    Haiasi wrote: »
    errmerguuuuuuurd


    My wife just walked in while I was looking at that and I had to explain to her it wasn't fap material. She wasn't happy.


    XD
    I just yell over my shoulder "You waiting for an invitation? Get over here!! Don`t make that face..."
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 6
    Awesome, but it's kinda lost potential since none of the ladies stretch or do anything interesting that would allow someone to study 'stress anatomy', kinda like body builder lifting, etc, the poses are simply too mundane or silly.

    Also, Katie is the only one that is even close to a 'neutral' pose as was noted, there is also the last couple of sets from Amii too, but that's about it?

    I guess there is solace in the fact that all the ladies I looked through are natural? Hopefully this will teach some young artists on what real curves look like as opposed the plastic ones I keep on seeing even from married peeps :P

    PS: Also, what the hell? What about men? Even a couple of them would have been awesome, I hate having to stare at my hairy arse when I'm sculpting before crying and eat a butter-stick.
  • moof
    Offline / Send Message
    moof polycounter lvl 7
    badass, thanks swiz :D
  • daphz
    Offline / Send Message
    daphz polycounter lvl 7
    cool find man, this is super useful!
  • bounchfx
    wow, awesome find!

    I agree though, they need to expand this into more poses, then it would be gold.
  • D4V1DC
    Offline / Send Message
    D4V1DC polycounter lvl 13
    :'(
    Thank you!

    Very inspirational references right here.


    Hellllooo Vikki blows!
  • Autocon
    Offline / Send Message
    Autocon polycounter lvl 10
    Nice find! really great uhhhhh...."reference"....*closes door*... :P
  • Steve Schulze
    Offline / Send Message
    Steve Schulze polycounter lvl 13
    Ace-Angel wrote: »
    PS: Also, what the hell? What about men? Even a couple of them would have been awesome, I hate having to stare at my hairy arse when I'm sculpting before crying and eat a butter-stick.
    I don't think they have many "Page 3 Boys".
  • ErichWK
    Offline / Send Message
    ErichWK polycounter lvl 7
    I am very inspired. I wish I was a character artist at Psyonix, that way I can be inspired all the time. all I look at is dirt and grime all day..sigh.
  • WarrenM
    Offline / Send Message
    WarrenM Polycount Sponsor
    Definitely a cool thing but they're all in basically the same pose which is unfortunate. I know it's not really an artists reference site, but ... well, it's cool for what it is!
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 6
    Jackablade wrote: »
    I don't think they have many "Page 3 Boys".
    They should name them Page 6 boys :P

    You know, because Penus...
  • Dudestein
    I'm enjoying spinning them around really fast while listening to the Benny Hill theme song.

    [ame=" Hill music video - YouTube[/ame]
  • Rick Stirling
    Offline / Send Message
    Rick Stirling polycounter lvl 13
    Ace-Angel wrote: »
    They should name them Page 6 boys :P

    You know, because Penus...



    They tried it back in the 80s in the same newspaper, they were called Page 7 Fellas. They were on..page 7.
  • conte
    Offline / Send Message
    conte polycounter lvl 12
  • ErichWK
    Offline / Send Message
    ErichWK polycounter lvl 7
    Real Quick..I'm American and know not much of The Sun or Page3. Why does a tabloid magazine have nude 360 spins? Does it have actual nude models in the paper magazine?
  • S_ource
    Could be useful as skin material reference to.
  • nyx702
    Offline / Send Message
    nyx702 Polycount Sponsor
    Great find!

    This girl has a pretty neutral pose too.

    I am going to rip some of these and see about uploading a zip if its not too big.
  • ScottP
    Offline / Send Message
    ScottP polycounter lvl 5
    I'm inspired... and im not even a Character Artist!
  • ZacD
    Online / Send Message
    ZacD interpolator
    Mutters something about this is why all female video game characters have massive breasts...
  • Paradan
    wonder how much it costs for them to do one of those. would be interesting to see if they could do a couple special ones for game artists. like a T-pose, more natural standing, etc.

    perhaps someone with a strong background could send an email...

    "Im __ __, and Ive worked at ___,___,and ___. We here in the game artist community were wondering..."

    Hope thats not too naive.
  • wasker
    Offline / Send Message
    wasker polycounter lvl 7
    "Now spin for me little meat puppet! Spin! Spin like you've never spun before!"
  • Torch
    Offline / Send Message
    Torch polycounter lvl 8
    Good reference, oh yes....heh heh heh......
  • SsSandu_C
    Offline / Send Message
    SsSandu_C polycounter lvl 8
    sure sure going into the reference bookmarks:poly121:
  • Steve Schulze
    Offline / Send Message
    Steve Schulze polycounter lvl 13
    Paradan wrote: »
    wonder how much it costs for them to do one of those. would be interesting to see if they could do a couple special ones for game artists. like a T-pose, more natural standing, etc.

    perhaps someone with a strong background could send an email...

    "Im __ __, and Ive worked at ___,___,and ___. We here in the game artist community were wondering..."

    Hope thats not too naive.
    I suspect you might be better off just making your own. It wouldn't be particularly difficult so long as you could find or hire a girl who didn't mind getting her kit off for the sake of art.
  • ZacD
    Online / Send Message
    ZacD interpolator
    You could always photo creepy craigslist ads about doing a 15 minute photoshoot for $50.
  • Aga22
    Offline / Send Message
    Aga22 polycounter lvl 6
    Jackablade wrote: »
    I suspect you might be better off just making your own it wouldn't be particularly difficult so long as you could find or hire a girl who didn't mind getting her kit off for the sake of art.

    been there, done that. though they're afraid i'm gonna be doing 3d porn with their "bodies" later... :poly142:
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 6
    Aga22 wrote: »
    been there, done that. though they're afraid i'm gonna be doing 3d porn with their "bodies" later... :poly142:
    Just show them your name on the local offenders list and they should feel better :D
  • Lamont
    Offline / Send Message
    Lamont polycounter lvl 9
    Aga22 wrote: »
    been there, done that. though they're afraid i'm gonna be doing 3d porn with their "bodies" later... :poly142:
    You pay, they will do. There are people who will do it. Just make the contract to outline as such and the uses for the images.
  • JohnnyRaptor
    Offline / Send Message
    JohnnyRaptor polycounter lvl 9
    people not using 3d.sk anymore?
  • urgaffel
    Offline / Send Message
    urgaffel polycounter lvl 12
    Something tells me that the link will be blocked by Barracuda at work...
  • slipgatecentral
    Offline / Send Message
    slipgatecentral polycounter lvl 9
    bitches be spinnin' yo
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 6
    people not using 3d.sk anymore?
    They don't have a large variety of bodies in stock last I checked, and recently started to do more 'clothes' kinda deal pictures?

    I mean they do have females and males with different body types, but they don't have different 'mass' to them, like say a bodybuilder in T-Pose as opposed to some random guy that is a little toned.
  • JohnnyRaptor
    Offline / Send Message
    JohnnyRaptor polycounter lvl 9
    Yeah your right. My subscription is pretty old so I don't have the latest models, but I do have a few bulky bodybuilders vs scrawny builds. But definitely not enough. And just today I realised most of the women aren't very attractive, which means you got to do a lot of restructuring of the faces before they're usable. Don't wanna turn it in to a bashin of 3d.sk tho, but yeah if we can get more hq anatomy ref I'm all for it!

    Those page3 girls are the kind of attractive we need in the way 3d.sk does it!
  • ebagg
    Offline / Send Message
    ebagg polycounter lvl 11
    Very nice reference material! Great find!
  • Kot_Leopold
    Offline / Send Message
    Kot_Leopold polycounter lvl 5
    Wow, I've never seen such smooth 360 degrees image spins. 3d.sk should take a note! Appreciate the share, Swizzle!
  • DanBe
    http://onlinelifedrawing.com

    also not a bad resource... lots of male and female in action poses + clothing / costume
    unfortunetly it is a monthly subscription of $20
  • Frump
    Offline / Send Message
    Frump polycounter lvl 9
    Awesome, thanks for the link!

    360 reference of actual models and not strange people from the streets of eastern Europe. :)

    The amount of galleries for each model is crazy.
  • Aga22
    Offline / Send Message
    Aga22 polycounter lvl 6
    Lamont wrote: »
    You pay, they will do. There are people who will do it. Just make the contract to outline as such and the uses for the images.

    who talked about paying :\ . after all, isnt that the ultimate reason for art? to get chicks and look at boobs? :poly121:
  • EtotheRic
    Offline / Send Message
    EtotheRic polycounter lvl 13
    The biggest thing I don't like about 3dsk is the lighting is super flat. It's great for getting texture samples but for sculpting it's terrible.
  • nyx702
    Offline / Send Message
    nyx702 Polycount Sponsor
    Here is a rar for most of the full size images. ~200MB

    https://www.dropbox.com/s/tk5sk3hsv39y3bx/Page3_360.rar

    I didn't rip all of the girls. About 80%. Just the ones that had mostly neutral poses. The girls I did get I got all of their poses however.
  • Arno
    Offline / Send Message
    Arno polycounter lvl 6
    Great find !,

    Just had to explain to my collegue what the hell I was doing 10 o clock in the morning on my work pc :poly122:
  • LoTekK
    Offline / Send Message
    LoTekK polycounter lvl 11
    Thanks, nyx. Love how easy dropbox makes sharing stuff, too. Got an option to just directly add it to mine \o/
  • frontop
  • JR
    Offline / Send Message
    JR polycounter lvl 11
    Thanks nyx702. Good job.
  • Fingus
    Offline / Send Message
    Fingus polycounter lvl 8
    I took a peek at the page source, and it seems like the turntable is done with a simple javascript rather than flash or quicktime. I'm thinking it shouldn't be too hard to work that into a portfolio website.

    $(document).ready(function(){
    	
    	var images_array = new Array();
    	var current_pic = 0;
    	var is_drag_binded = false;
    	
    	$("div#ts-container").disableTextSelect();
    	
    	//show first image at start
    	$("div#ts-container").html("<img src='"+page360Array[0]+"' alt='"+page360NewArray[0].imageAltText+"' title='"+page360NewArray[0].imageTitle+"' />");
    	var uagent = navigator.userAgent.toLowerCase();
    
    
        if((uagent.search("android")!= -1) || (uagent.search("iphone") != -1) || (uagent.search("ipad") != -1)){
        	
        	$("div#ts-container").spritespin({
        	    width     : 570,
        	    height    : 1024,
        	    frames    : 34,
        	    image     :page360Array });
    
        	        
        }else{
    	//preload rest of images
    	for (a=0; a<page360Array.length; a++) {
    		images_array[a] = $("<img />").attr("src",page360Array[a]);
    	}
    	
    	
    	//change images on dragging
    	$("div#ts-container").mousedown(function(evt){
    		
    		is_drag_binded = true;
    		var sensitivity_initial = 1;
    		var sensitivity = sensitivity_initial;
    		var forward = true;
    		var start_point = evt.pageX;
    		var posun = 0;
    		var previous = 0;
    		$("body").css("cursor","ew-resize");
    
    		$("body").bind("mousemove",function(evt2){
    			
    			previous = posun;
    			posun = start_point - evt2.pageX;
    			
    			//resetni start_point pri zmene smeru
    			if (previous > posun && posun > start_point - evt2.pageX && forward == false) {
    				//console.log ("zmenil sa smer dopredu");
    				forward = true;
    				sensitivity = sensitivity_initial;
    				posun = 0;
    				previous = 0;
    				//start_point = evt2.pageX;
    			}
    			if (previous < posun && posun < start_point - evt2.pageX && forward == true) {
    				//console.log ("noo zmenil sa smer dozadu");
    				forward = false;
    				sensitivity = sensitivity_initial;
    				posun = 0;
    				previous = 0;
    				start_point = evt2.pageX;
    			}
    			
    			
    			if (Math.abs(posun) >= sensitivity) {
    				
    				if (posun >= 0) {
    					//dozadu
    					if (current_pic > 0)
    						current_pic--;
    					else
    						current_pic = 34;
    					
    				} else {
    					//dopredu
    					if (current_pic < 34)
    						current_pic++;
    					else
    						current_pic = 0;
    				}
    				//sensitivity = sensitivity + sensitivity_initial;
    				posun = 0;
    				previous = 0;
    				start_point = evt2.pageX;
    				
    				$("div#ts-container").html("<img src="+page360Array[current_pic]+" alt='"+page360NewArray[current_pic].imageAltText+"' title='"+page360NewArray[current_pic].imageTitle+"' />");
    			}
    			//$("div.share-this-page p").html(posun + " " + forward);
    		});
    	});
    	
    	$("body").mouseup(function(evt){
    		if (is_drag_binded)
    			$("body").unbind("mousemove");
    	});
    	
    	//mouse wheel 
    	//var current_pic = 0;
    	$("div#ts-container").bind("mousewheel",function(evt, delta){
    		evt.preventDefault();
    		posun = delta * 1;
    		
    		//$("div.share-this-page p").html(posun);
    		
    		if (Math.abs(posun) > 0.01) {
    			if (posun>0) {
    				if (current_pic < 34)
    					current_pic++;
    				else
    					current_pic = 0;
    			} else {
    				if (current_pic > 0)
    					current_pic--;
    				else
    					current_pic = 34;
    			}
    			$("div#ts-container").html("<img src="+page360Array[current_pic]+" alt='"+page360NewArray[current_pic].imageAltText+"' title='"+page360NewArray[current_pic].imageTitle+"' />");
    		}
    	});}
    });
    
    
    
    
    (function( $ ) {
    
    	  $.fn.spritespin = function(method) {
    	    if ( methods[method] ) {
    	      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    	    } else if (typeof(method) === 'object' || !method) {
    	      return methods.init.apply(this, arguments);
    	    } else {
    	      $.error( 'Method ' +  method + ' does not exist on jQuery.spritespin' );
    	    }
    	  };
    
    	  var methods = {
    	    init : function(options){
    	      // Default settings
    	      var settings = {
    	        // dimensions
    	        width             : undefined,              // Window width (or frame width)
    	        height            : undefined,              // Window height (or frame height)
    	        offsetX           : 0,                      // Offset in X direction from the left image border to the first frames left border
    	        offsetY           : 0,                      // Offset in Y direction from the top image border to the first frames top border
    	        frameStepX        : undefined,              // Distance in X direction to the next frame if it differs from window width 
    	        frameStepY        : undefined,              // Distance in Y direction to the next frame if it differs from window height
    	        frameStep         : undefined,              // Width of a single frame or step to the next frame
    	        framesX           : undefined,              // Number of frames in a single row
    	        frames            : 36,                     // Total number of frames
    	        frame             : 0,                      // Initial frame number
    	        resolutionX       : undefined,              // The spritesheet resolution in X direction
    	        resolutionY       : undefined,              // The spritesheet resolution in Y direction
    	        
    	        // animation & update
    	        animate           : true,                   // Run animation when after initialize
    	        loop              : false,                  // Repeat animation in a loop
    	        loopFrame         : 0,                      // Indicates the loop start frame
    	        frameTime         : 36,                     // Time between updates
    	        reverse           : false,                  // If true animation is played backward
    	        sense             : 1,                      // Interaction sensitivity used by behavior implementations
    	        
    	        // interaction
    	        slider            : undefined,              // jQuery-ui slider instance
    	        behavior          : "drag",                 // Enables mouse interaction
    	        
    	        // appearance               
    	        image             : "images/spritespin.jpg",// Stiched source image
    	        preloadHtml       : " ",                    // Html to appear when images are preloaded
    	        preloadBackground : undefined,              // Background image to display on load
    	        preloadCSS        : undefined,
    	        
    	        // events
    	        onFrame           : undefined,              // Occurs whe frame has been updated
    	        onLoad            : undefined,              // Occurs when images are loaded
    	        touchable         : undefined,              // Tells spritespin that it is running on a touchable device
    	        panorama          : false
    	      };
    	      
    	      // extending options
    	      options = (options || {});
    	      $.extend(settings, options);
    	      
    	      return this.each(function(){
    	        var $this = $(this);
    	        var data  = $this.data('spritespin');
    	        
    	        if (!data){
    	          // disable selection & hide overflow
    	          $this.attr("unselectable", "on").css({ overflow : "hidden" }).html("");
    
    	          var imageElement;
    	          if (!settings.panorama){
    	            imageElement = $this.find("img");
    	            if (imageElement.length === 0){
    	              imageElement = $("<img src=''/>");
    	              $this.append(imageElement);
    	            }
    	            imageElement.hide();            
    	          }
    	          
    	          // Initialize the plugin if it hasn't been initialized yet
    	          $this.data('spritespin', {
    	            target       : $this,
    	            settings     : settings,
    	            animation    : null,
    	            frameTime    : settings.frameTime,
    	            imageElement : imageElement,
    	            touchable    : (settings.touchable || (/iphone|ipod|ipad|android/i).test(navigator.userAgent))
    	          });
    
    	          // run configuration
    	          data = $this.data('spritespin');
    	          helper.reconfiger($this, data);
    	        } else {
    	          // reconfiger the plugin if it is already initialized
    	          $.extend(data.settings, options);
    	          data.frameTime = data.settings.frameTime; // override cached frameTime
    	          
    	          if (options.image !== null && options.image !== undefined){
    	            // when images are passed, need to reconfiger the plugin
    	            helper.reconfiger($this, data);
    	          } else {
    	            // otherwise just reanimate spritespin
    	            $this.spritespin("animate", data.settings.animate, data.settings.loop);
    	          }
    	        }
    	      });
    	    },
    	    destroy : function(){
    	      return this.each(function(){
    	        var $this = $(this);
    	        data = $this.data('spritespin');
    	        $this.unbind('.spritespin');
    	        $this.removeData('spritespin');
    	      });
    	    },
    	    // Updates a single frame to the specified frame number. If no value is 
    	    // given this will increment the current frame counter.
    	    // Triggers the onFrame event
    	    update : function(frame, reverse){
    	      return this.each(function(){
    	        //console.log("XX");
    	        var $this = $(this);
    	        data = $this.data('spritespin');
    	        settings = data.settings;
    	        
    	        if (reverse !== undefined){
    	          settings.reverse = reverse;
    	        }
    	        
    	        // update frame counter
    	        if (frame === undefined){
    	          settings.frame = (settings.frame + (settings.reverse ? -1 : 1));
    	        } else {
    	          settings.frame = frame;
    	        }
    	        settings.frame = helper.wrapValue(settings.frame, 0, settings.frames);
    	        data.target.trigger("onFrame", data);
    	      });
    	    },
    	    // Starts or stops the animation depend on the animate paramter.
    	    // In case when animation is already running pass "false" to stop.
    	    // In case when animation is not running pass "true" to start.
    	    // To keep animation running forever pass "true" for the loop parameter.
    	    // To detect whether the animation is running or not, do not pass any
    	    // parameters.
    	    animate : function(animate, loop){
    	      if (animate === undefined){
    	        return $(this).data('spritespin').animation !== null;
    	      } else {
    	        return this.each(function(){
    	          var $this = $(this);
    	          data = $this.data('spritespin');
    	          settings = data.settings;
    	          
    	          // check the loop variable and update settings
    	          if (typeof(loop) === "boolean"){
    	            settings.loop = loop;
    	          }
    	          
    	          // toggle and update animation settings
    	          if (animate === "toggle"){
    	            animate = !settings.animate;
    	            settings.animate = animate;
    	          } else {
    	            settings.animate = animate;
    	          }
    	          
    	          if (data.animation !== null){
    	            clearInterval(data.animation);
    	            data.animation = null;
    	          }
    	          
    	          if (settings.animate){
    	            // start animation
    	            data.animation = setInterval(
    	              function(){ 
    	                try {
    	                  $this.spritespin("update");
    	                } catch(err){
    	                  // The try catch block is a hack for Opera Browser
    	                }
    	              }, data.frameTime);
    	          }  
    	        });
    	      }
    	    },
    	    // Gets the current framenumber when no parameter is passed or
    	    // updates the spinner to the sepcified frame.
    	    frame : function(frame){
    	      if (frame === undefined){
    	        return $(this).data('spritespin').settings.frame;
    	      } else {
    	        return this.each(function(){
    	          $(this).spritespin("update", frame);
    	        });        
    	      }
    	    },
    	    // Gets or sets a value indicating whether the animation is looped or not.
    	    // Starts the animation when settings.animate is set to true passed value
    	    // is defined
    	    loop : function(value){
    	      if (value === undefined){
    	        return $(this).data('spritespin').settings.loop;
    	      } else {
    	        return this.each(function(){
    	          var $this = $(this);
    	          data = $this.data('spritespin');
    	          $this.spritespin("animate", data.settings.animate, value);
    	        }); 
    	      }
    	    }
    	  };
    	  
    	  var helper = {
    	    storePoints : function(e, data){
    	      if (e.touches === undefined && e.originalEvent !== undefined){
    	        // jQuery Event normalization does not preserve the event.touches
    	        // we just try to restore it
    	        e.touches = e.originalEvent.touches;
    	      }
    	      
    	      data.oldX = data.currentX;
    	      data.oldY = data.currentY;
    	      
    	      if (e.touches !== undefined && e.touches.length > 0){
    	        data.currentX = e.touches[0].clientX;
    	        data.currentY = e.touches[0].clientY;
    	      } else {
    	        data.currentX = e.clientX;
    	        data.currentY = e.clientY;
    	      }
    	      
    	      if (data.startX === undefined || data.startY === undefined){
    	        data.startX = data.currentX;
    	        data.startY = data.currentY;
    	        data.clickframe = data.settings.frame;
    	      }
    	      
    	      if (data.oldX === undefined || data.oldY === undefined){
    	        data.oldX = data.currentX;
    	        data.oldY = data.currentY;
    	      }
    	      
    	      data.dX = data.currentX - data.startX;
    	      data.dY = data.currentY - data.startY;
    	      
    	      data.ddX = data.currentX - data.oldX;
    	      data.ddY = data.currentY - data.oldY;
    	      return false;
    	    },
    	    resetPoints : function(e, data){
    	      data.startX = undefined;
    	      data.startY = undefined;
    	      data.currentX = undefined;
    	      data.currentY = undefined;
    	      data.oldX = undefined;
    	      data.oldY = undefined;
    	      data.dX = 0;
    	      data.dY = 0;
    	      data.ddX = 0;
    	      data.ddY = 0;
    	    },
    	    clamp : function(value, min, max){ 
    	      return (value > max ? max : (value < min ? min : value));
    	    },
    	    wrapValue : function(value, min, max){
    	      while (value >= max){ value -= max; } 
    	      while (value < min){ value += max; }
    	      return value;
    	    },
    	    reconfiger : function(instance, data){
    	      helper.blankBackground(instance, data);
    	      helper.preloadImages(instance, data, function(){
    	        helper.updateBackground(instance, data);
    	        helper.hookSlider(instance, data);
    	        helper.rebindEvents(instance, data);
    	        if (data.settings.animate){
    	          methods.animate.apply(instance, [data.settings.animate, data.settings.loop]);
    	        }
    	        instance.trigger("onLoad", data);
    	      });
    	    },
    	    blankBackground : function(instance, data){
    	      image = "none";
    	      if (typeof(data.settings.preloadBackground) === "string"){
    	        image = ["url('", data.settings.preloadBackground, "')"].join("");
    	      }
    	      instance.css({
    	        width      : [data.settings.width, "px"].join(""),
    	        height     : [data.settings.height, "px"].join(""),
    	        "background-image"    : image,
    	        "background-repeat"   : "repeat-x",
    	        "background-position" : "0px 0px"
    	      });
    	      
    	      $(data.imageElement).hide();
    	    },
    	    updateBackground : function(instance){
    	      var data = instance.data("spritespin");
    	      var image = data.settings.image;
    	      var x = data.settings.offsetX;
    	      var y = -data.settings.offsetY;
    	      
    	      if (typeof(data.settings.image) === "string"){ 
    	        var stepX = (data.settings.frameStepX || data.settings.width);
    	        var stepY = (data.settings.frameStepY || data.settings.height);
    	        var numFramesX = (data.settings.framesX || data.settings.frames);
    	        var numFramesY = (numFramesX === data.settings.frames ? 1 : data.settings.framesY);
    	        var frameX = (data.settings.frame % numFramesX);
    	        var frameY = (data.settings.frame / numFramesX)|0;
    	        x -= (frameX * stepX);
    	        y -= (frameY * stepY);
    	      } else {
    	        // we expect an array in this case
    	        image = data.settings.image[data.settings.frame];
    	      }
    
    	      var css = {};
    	      if (data.imageElement){
    	        css = {
    	          position   : "relative",
    	          top        : y,
    	          left       : x        
    	        };
    	        if (data.settings.resolutionX && data.settings.resolutionY){
    	          css.width = data.settings.resolutionX;
    	          css.height = data.settings.resolutionY;
    	        }
    	        data.imageElement.attr("src", image).css(css).show();
    	        instance.css({
    	          position   : "relative",
    	          top        : 0,
    	          left       : 0,
    	          width      : data.settings.width,
    	          height     : data.settings.height
    	        });
    	      } else {
    	        css = {
    	          width      : [data.settings.width, "px"].join(""),
    	          height     : [data.settings.height, "px"].join(""),
    	          "background-image"    : ["url('", image, "')"].join(""),
    	          "background-repeat"   : "repeat-x",
    	          "background-position" : [x, "px ", y, "px"].join("")
    	        };
    	        // Spritesheets may easily exceed the maximum image size for iphones.
    	        // In this case the browser will scale down the image automaticly and
    	        // this will break the logic how spritespin works.
    	        // Here we set the webkit css attribute to display the background in its
    	        // original dimension even if it has been scaled down.
    	        if (data.settings.resolutionX && data.settings.resolutionY) {
    	          css["-webkit-background-size"] = [data.settings.resolutionX, "px ", data.settings.resolutionY, "px"].join("");
    	        }
    	        instance.css(css);
    	      }
    	    },
    	    hookSlider : function(instance, data){
    	      if (data.settings.slider !== undefined){
    	        data.settings.slider.slider({
    	          value   : data.settings.frame,
    	          min     : 0,
    	          max     : (data.settings.frames) - 1,
    	          step    : 1,
    	          slide   : function(event, ui) {
    	            methods.animate.apply(instance, [false]);    // stop animation
    	            methods.frame.apply(instance, [ui.value]);   // update to frame
    	          }
    	        }); 
    	      }
    	    },
    	    rebindEvents : function(instance, data){
    	      // unbind all events
    	      instance.unbind('.spritespin');
    
    	      // use custom or build in behavior
    	      var currentBehavior = data.settings.behavior;
    	      if (typeof(data.settings.behavior) === "string"){
    	        currentBehavior = behavior[data.settings.behavior];
    	      }
    	      
    	      var prevent = function(e){
    	        if (e.cancelable){
    	          e.preventDefault();
    	        }
    	        return false;
    	      };
    	      
    	      // rebind interaction events
    	      instance.bind('mousedown.spritespin',  currentBehavior.mousedown);
    	      instance.bind('mousemove.spritespin',  currentBehavior.mousemove);
    	      instance.bind('mouseup.spritespin',    currentBehavior.mouseup);
    	      instance.bind('mouseenter.spritespin', currentBehavior.mouseenter);
    	      instance.bind('mouseover.spritespin',  currentBehavior.mouseover);
    	      instance.bind('mouseleave.spritespin', currentBehavior.mouseleave);
    	      instance.bind('dblclick.spritespin',   currentBehavior.dblclick);
    	      instance.bind('onFrame.spritespin',    currentBehavior.onFrame);
    
    	      if (data.touchable){
    	        instance.bind('touchstart.spritespin',  currentBehavior.mousedown);
    	        instance.bind('touchmove.spritespin',   currentBehavior.mousemove);
    	        instance.bind('touchend.spritespin',    currentBehavior.mouseup); 
    	        instance.bind('touchcancel.spritespin', currentBehavior.mouseleave);
    	        instance.bind('click.spritespin',         prevent); 
    	        instance.bind('gesturestart.spritespin',  prevent); 
    	        instance.bind('gesturechange.spritespin', prevent); 
    	        instance.bind('gestureend.spritespin',    prevent); 
    	      }
    	              
    	      // disable selection
    		    instance.bind("mousedown.spritespin selectstart.spritespin", prevent);
    		    
    		    instance.bind("onFrame.spritespin", function(event, data){
    		      helper.updateBackground(data.target, data);
    	        
    	        // stop animation if we are back at looFrame
    	        if (data.settings.frame === data.settings.loopFrame && !data.settings.loop){
    	          methods.animate.apply(data.target, [false]);
    	        }
    	        
    	        // update the jquery-ui slider
    	        if (data.settings.slider){
    	          data.settings.slider.slider("value", data.settings.frame);
    	        }
    		    });
    		    
    		    // bind custom events
    		    if (typeof(data.settings.onFrame) === "function"){
    		      instance.bind("onFrame.spritespin", data.settings.onFrame);
    		    }
    		    if (typeof(data.settings.onLoad) === "function"){
    		      instance.bind("onLoad.spritespin", data.settings.onLoad);
    		    }
    	    },
    	    preloadImages : function(instance, data, callback) {
    	      var preload = $('<div class="preload"/>');
    	      if (instance.find(".preload").length === 0){
    	        instance.append(preload);
    	      }
    	      
    	      css = (data.settings.preloadCSS || {});
    	      preload.css(
    	        $.extend({
    	          width : data.settings.width,
    	          height: data.settings.height}, css))  
    	        .hide()
    	        .html(data.settings.preloadHtml)
    	        .fadeIn(250,
    	          function(){
    	            var loader = new SpriteLoader(data.settings.image, function(){
    	              instance.find(".preload").fadeOut(250, function(){
    	                $(this).detach();
    	              });
    	            callback.apply(instance, [instance, data]);
    	          });
    	        });
    	    }
    	  };
    	  
    	  function SpriteLoader(images, callback){
    	    if (typeof(images) === "string"){ images = [images]; }
    	    
    	    this.callback = callback;
    	    this.numLoaded = 0;
    	    this.numErrors = 0;
    	    this.numAborts = 0;
    	    this.numProcessed = 0;
    	    this.numImages = images.length;
    	    this.images = [];
    	    var i = 0;
    	    for (i = 0; i < images.length; i++ ) {
    	      this.preload(images[i]); 
    	    }
    	  }
    	  SpriteLoader.prototype.preload = function(imageUrl){
    	     // create new Image object and add to array
    	     var image = new Image();
    	     this.images.push(image);
    	  
    	     // set up event handlers for the Image object
    	     image.onload = SpriteLoader.prototype.onload;
    	     image.onerror = SpriteLoader.prototype.onerror;
    	     image.onabort = SpriteLoader.prototype.onabort;
    	  
    	     // assign pointer back to this.
    	     image.preloader = this;
    	  
    	     // assign the .src property of the Image object to start loading
    	     image.src = imageUrl;
    	  };
    	  SpriteLoader.prototype.onProcessed = function(){
    	    this.numProcessed++;
    	    if ( this.numProcessed === this.numImages ){
    	      this.callback(this.images, this.numLoaded);
    	    }
    	  };
    	  SpriteLoader.prototype.onload = function(){
    	    this.preloader.numLoaded++;
    	    this.preloader.onProcessed();
    	  };
    	  SpriteLoader.prototype.onerror = function(){
    	    this.preloader.numErrors++;
    	    this.preloader.onProcessed();
    	  };
    	  SpriteLoader.prototype.onabort = function(){
    	    this.preloader.numAborts++;
    	    this.preloader.onProcessed();
    	  };
    	  
    	  var behavior = {    
    	    none : {
    	      mousedown  : function(e){ return false; },
    	      mousemove  : function(e){ return false; },
    	      mouseup    : function(e){ return false; },
    	      
    	      mouseenter : function(e){ return false; },
    	      mouseover  : function(e){ return false; },
    	      mouseleave : function(e){ return false; },
    	      dblclick   : function(e){ return false; },
    	      
    	      onFrame : function(e, frame){ return false; }
    	    },
    	    spin : {
    	      mousedown  : function(e){
    	        var $this = $(this), data = $this.data('spritespin');
    	        helper.storePoints(e, data);
    	        data.onDrag = true;
    	        return false; 
    	      },
    	      mousemove  : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        if (data.onDrag){
    	          // perform default drag behavior
    	          helper.storePoints(e, data);
    	          d = data.dX / data.settings.width;
    	          dFrame = d * data.settings.frames * data.settings.sense;
    	          frame = Math.round(data.clickframe + dFrame);
    	          
    	          methods.update.apply($this, [frame]);     // update to frame
    	          methods.animate.apply($this, [false]);    // stop animation
    	          
    	          // calculate framtetime for spinwheel
    	          if (data.ddX !== 0){
    	            d = data.ddX / data.settings.width;
    	            dFrame = d * data.settings.frames * data.settings.sense;
    	            data.frameTime = (data.settings.frameTime / dFrame);
    	            data.settings.reverse = (data.ddX < 0);
    	          }
    	        }
    	        return false;  
    	      },
    	      mouseup    : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        if (data.onDrag){
    	          data.onDrag = false;
    	          $this.spritespin("animate", true);
    	        }
    	        return false; 
    	      },
    
    	      mouseenter : function(e){ return false; },
    	      mouseover  : function(e){ return false; },
    	      mouseleave : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        if (data.onDrag){
    	          data.onDrag = false;
    	          $this.spritespin("animate", $this.spritespin("animate"));
    	        }
    	        return false; 
    	      },
    	      dblclick   : function(e){ 
    	        $(this).spritespin("animate", "toggle");
    	        return false; 
    	      },
    	      onFrame : function(e, data){
    	        if (data.ddX !== 0){
    	          data.frameTime = data.frameTime + 1;
    	        
    	          $(this).spritespin("animate", false);
    	          if (data.frameTime < 62){
    	            $(this).spritespin("animate", true);
    	          }  
    	        } else {
    	          $(this).spritespin("animate", false);
    	        }
    	        return false; 
    	      }
    	    },
    	    drag : {
    	      mousedown  : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        helper.storePoints(e, data);
    	        data.onDrag = true;
    	        return false; 
    	      },
    	      mousemove  : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        if (data.onDrag){
    	          helper.storePoints(e, data);
    	          d = data.dX / data.settings.width;
    	          dFrame = d * data.settings.frames * data.settings.sense;
    	          frame = Math.round(data.clickframe + dFrame);
    	          
    	          methods.update.apply($this, [frame]);     // update to frame
    	          methods.animate.apply($(this), [false]);  // stop animation
    	        }
    	        return false; 
    	      },
    	      mouseup    : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        helper.resetPoints(e, data);
    	        data.onDrag = false;
    	        return false; 
    	      },
    	      
    	      mouseenter : function(e){ return false; },
    	      mouseover  : function(e){ return false; },
    	      mouseleave : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        helper.resetPoints(e, data);
    	        data.onDrag = false;
    	        return false; 
    	      },
    	      dblclick   : function(e){ 
    	        var $this = $(this), data = $this.data('spritespin');
    	        $this.spritespin("animate", "toggle");
    	        return false; 
    	      },
    	      onFrame : function(e, frame){ 
    	        return false; 
    	      }
    	    }
    	  };
    	})(jQuery);
    

    And you call the script and set the images to use with this line in your html.
    <script type="text/javascript">
    var page360Array = ['http://www.page3.com/incoming/article31409.ece/BINARY/original/01.jpg', 'http://www.page3.com/incoming/article31410.ece/BINARY/original/02.jpg', 'http://www.page3.com/incoming/article31411.ece/BINARY/original/03.jpg'] ;
    var page360NewArray = [{imageUrl:'http://www.page3.com/incoming/article31409.ece/BINARY/original/01.jpg', imageAltText:'01.jpg', imageTitle:''}, {imageUrl:'http://www.page3.com/incoming/article31410.ece/BINARY/original/02.jpg', imageAltText:'02.jpg', imageTitle:''}, {imageUrl:'http://www.page3.com/incoming/article31411.ece/BINARY/original/03.jpg', imageAltText:'03.jpg', imageTitle:''}];
    </script>
    <script type='text/javascript' src="http://www.page3.com/skins/page3/js/360.js"></script>
    
1
Sign In or Register to comment.