Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Dec 2006
    Posts
    417
    Thanks
    168
    Thanked 1 Time in 1 Post

    Trying to Create a Class That Preloads scrollable Images

    I am trying to load up images from a database dervied XML document. As the images get preloaded into an array I am then trying to allow the user to use the up/down key arrows to scroll through the images. The images must be stacked on one another (I am using z-index to do this). They are CT scan images of a brain.. so they must stack on top of one another so users can scroll.


    I am getting it -- but not entirely. Despite my reading tutorials and experimenting and trying to learn on my own I can't seem to refer to the first method (called "preLoadImage") in the second one (called "keyDetectEvent") when the up/down arrow is pressed.

    for instance, referring to myObject.preLoadImage() returns "undefined"

    Also once I do manage to get the currently displayed image in the array image_url, I then have to change it's z-index to the highest number in the array so that it displays on top. I think I am going to do a style change to do this by changing the z-index to "image_url.length", correct?

    Code:
    // DEFINE the class constructor.
    myClass = function() {
        this.images = [];
    };
    
    // select the type of image group to load for this page
    var groupid = 1;
    
    // If you call these functions with the correct scope
    // they will both refer to the same "images" Array.
    myClass.prototype = {
    	
        preLoadImage: function() {
        	
        				var div = document.getElementById('outputImages');
    						div.innerHTML = 'Loading Images...';
        	
    					  var sUrl = "php/loadCTScanXML.php?groupid=" +groupid;
    						
    						var handleSuccess = function(o){
    						  
    									if(o.responseXML !== undefined){
    											
    										    var root = o.responseXML.documentElement; 
    										    var oTotalImages = root.getElementsByTagName('totalImages')[0].firstChild.nodeValue; 
    									
    										    var x; // initialize the counter
    										    // Format and display results in the response container.
    										    for (x = 0; x < oTotalImages; x++) {
    								
    										    	var oFilepath = root.getElementsByTagName('filepath')[x].firstChild.nodeValue; 
    										   	  var oFilenames = root.getElementsByTagName('filenames')[x].firstChild.nodeValue; 
    										    	var oModality = root.getElementsByTagName('modality')[x].firstChild.nodeValue; 
    											
    											    var imgSrc = "<span id=" + x + " style='position: relative; z-index: " + x + "'><img src='" + oFilepath + oFilenames + "'></img></span>";
    								
    									    		div.innerHTML = imgSrc;
    								
    								
    											/* preload the images */
    								
    											    if (document.images) {
    								
    												      	preload_image_object = new Image();
    												      	// set image url
    												      	image_url = new Image();
    												      	image_url[x] = imgSrc;
    								
    												       	// var i = 0;
    												       	// for(i=0; i<= oTotalImages; i++) 
    											         		
    											         	//	preload_image_object.src = image_url[i];
    								
    											    }else{
    												
    													document.writeln("Your browser is too old.  Please update it.");
    								
    											    }  
    								  
    									  	  } // end for loop
    								
    										}
    					
    						}
    						
    						var handleFailure = function(o){
    							
    							// document.writeln{"failed"};
    						
    						}
    						
    						var callback =
    						{
    						  success:handleSuccess,
    						  failure: handleFailure
    						  // argument: { foo:"foo", bar:"bar" }
    						}
    						
    						var request = YAHOO.util.Connect.asyncRequest('GET', sUrl, callback); 
        },
    
        keyDetectEvent: function(e) {
    
    					var evt = e || window.event;
    					var writeroot = document.getElementById('writeroot');
    					writeroot.innerHTML += 'keyCode is ' + evt.keyCode;
    					   if(e.keyCode==38){
    						// if the up arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0005.jpg
    			
    					   }
    			
    					   if(e.keyCode==40){
    									
    									// if the down arrow is pressed then increment the currently displayed image up by one (ie. change cthead0004.jpg to cthead0003.jpg
    			
    						 }
    						return document.defaultAction;
    
    			}
    				
    }; 
    
    // Call the constructor to create one instance of the above class. 
    myObject = new myClass(); 
    
    document.onkeypress=myObject.keyDetectEvent
    window.onload = myObject.preLoadImage;
    Any additional help would be greatly appreciated


    live code here:

    http://gabbr.com/sandbox/yahooui/yui.v2.2.0/ctscan2.php

  • #2
    Senior Coder shyam's Avatar
    Join Date
    Jul 2005
    Posts
    1,563
    Thanks
    2
    Thanked 163 Times in 160 Posts
    notice anything fishy here...

    Code:
    /* preload the images */
    
    if (document.images) {
    
    		preload_image_object = new Image();
    		// set image url
    		image_url = new Image();
    		image_url[x] = imgSrc;
    
    		// var i = 0;
    		// for(i=0; i<= oTotalImages; i++) 
    			
    		//	preload_image_object.src = image_url[i];
    
    }else{
    
    	document.writeln("Your browser is too old.  Please update it.");
    
    }


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •