SitePoint Sponsor

User Tag List

Results 1 to 3 of 3

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Relative URLs, double requests

    Hey all,

    I'm working on my first real Javascript attempt. It'll be an AJAX-like image/video gallery using JSON. I'm using the Prototype library.

    I have a few problems which I can't seem to figure out.

    URLs
    Using Zend_Router I can place my site in any public directory I want. All links will automatically change to the proper URL. At the moment I want to do an AJAX request, things get more difficult. Currently, I use the action attribute of a form element. But, when I want to use the returned data (in this case, item.filename) to display thumbnails for instance, I can't figure out a satisfying way to get the path to images (/baseUrl/gallery/images/thumbs/).

    Double requests
    Another problem I experience is that I have double requests. First to load the actual page, second to let Javascript be aware of the current viewed label (as this is parsed by PHP on the first page request). I think I need to get this info from the displayed website, but it's giving me a head-ache.


    I hope I explained the problems well, here's some code:

    Code:
    Event.observe(window, 'load', initialize, false);
    
    var gallery = null;
    
    function initialize() {
    	gallery = new Gallery();
    }
    
    var Gallery = new Class.create();
    Gallery.prototype = {
    	
    	/**
    	 * Viewed label
    	**/
    	label: null,
    	
    	/**
    	 * Constructor
    	 * Observes $('labelId') and triggers this.getLabel
    	 * 
    	 * Todo!!!
    	 * - On window.onLoad, fetch already parsed label
    	**/
    	initialize: function() {
    		
    		Event.observe('labelId', 'change', this.getLabel, false);
    	},
    	
    	/**
    	 * Creates a new Label object in this.label
    	**/
    	getLabel: function() {
    		this.label = new Label($('labelId').value);
    	},
    	
    	/**
    	 * Todo!!!
    	 * - Get thumbnail directory from somewhere
    	**/
    	parseThumbs: function() {
    		var thumbsContainer = $('thumbsContainer');
    		var thumbDirectory = '';
    		
    		thumbsContainer.innerHTML = '';
    		
    		if(this.label.items.length == 0) {
    			return;
    		}
    		
    		this.label.items.each(function(item) {
    			thumbsContainer.appendChild(item.create(thumbDirectory));
    		});
    	},
    	
    	/**
    	 * Todo:
    	 * - Parse given item to preview
    	**/
    	parsePreview: function() {
    		
    	}
    	
    }
    
    var Label = new Class.create();
    Label.prototype = {
    	
    	/**
    	 * LabelID
    	**/
    	id: null,
    	/**
    	 * Title of the label
    	**/
    	title: null,
    	/**
    	 * Array of items
    	**/
    	items: new Array(),
    	
    	/**
    	 * Constructor
    	 * Creates item objects
    	 * 
    	 * Todo:
    	 * - Assigns label info
    	**/
    	initialize: function() {
    		var labelIdForm = $('labelIdForm');
    		new Ajax.Request(
    			labelIdForm.action,
    			{
    				parameters: labelIdForm.serialize(),
    				onComplete: function() {
    					gallery.parseThumbs();
    				}
    			}
    		);
    	}
    	
    }
    
    var Item = Class.create();
    Item.prototype = {
    	
    	id: null,
    	mimetype: 'image/jpeg',
    	filename: null,
    	filesize: null,
    	width: null,
    	height: null,
    	
    	/**
    	 * Constructor
    	**/
    	initialize: function(item) {
    		this.id = item.id;
    		this.mimetype = item.mimetype;
    		this.filename = item.filename;
    		this.filesize = item.filesize;
    		this.width = item.width;
    		this.height = item.height;
    	},
    	
    	/**
    	 * Create item output based on mimetype
    	**/
    	create: function(itemPath) {
    		switch(this.mimetype) {
    			default:
    			case 'image/jpeg': 
    			case 'image/jpg': 
    			case 'image/gif': 
    			case 'image/png':
    				var item = new Image();
    				item.src = itemPath + this.filename;
    				item.alt = this.filename;
    			break;
    			
    			case 'video/mpeg':
    				alert('Video is not supported yet');
    			break;
    		}
    		
    		return item;
    	}
    	
    }
    Offcourse, If I made other mistakes, I'll be glad to hear them!

    Thanks in advance.

  2. #2
    SitePoint Wizard chris_fuel's Avatar
    Join Date
    May 2006
    Location
    Ventura, CA
    Posts
    2,750
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think it would be good to see an example of returned data in JSON form so we have an idea of what's going through the various functions you've implemented.

  3. #3
    SitePoint Member
    Join Date
    Jan 2007
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Excuse me, here it is:
    Code:
    {
    	"label": {
    		"id": "2",
    		"title": "Tour 2006",
    		"description": "",
    		"created": "1000000001",
    		"modified": null
    	},
    	"items": [
    		{
    			"id": "1",
    			"mimetype": "",
    			"filename": "test1.jpg",
    			"filesize": "2132121",
    			"width": "200",
    			"height": "100",
    			"created": "1000000000"
    		},
    		{
    			"id": "1",
    			"mimetype": "",
    			"filename": "test1.jpg",
    			"filesize": "2132121",
    			"width": "200",
    			"height": "100",
    			"created": "1000000000"
    		}
    	]
    }
    As the server-side is in development also, the returned data is incomplete. But I think it'll give an impression of what's going on.


    About the double request, I think I'm a step closer to a solution. This is what I came up with:
    Code:
    var Thumbs = Class.create();
    Thumbs.prototype = {
    	
    	thumbsContainer: null,
    	
    	/**
    	 * Constructor
    	 * Executes this.observe
    	**/
    	initialize: function() {
    		this.thumbsContainer = $('thumbsContainer');
    		this.observe();
    	},
    	
    	/**
    	 * Overwrites images in this.thumbsContainer from JSON data and
    	 * executes this.observe
    	**/
    	set: function(images) {
    		
    	}
    	
    	/**
    	 * Loops through images in this.thumbsContainer and adds an observer
    	 * to enable clicks for preview
    	**/
    	observe: function() {
    		
    	}
    	
    }
    But, I haven't got it working yet...

    The baseUrl issue is still a mistery to me.

    Thanks


Bookmarks

Posting Permissions

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