My first project, modifying this code

[slapme]

I found this free code and for my first project wanted to change it a little.  Instead of accessing the words.dat file and moving around the words from within that file I wanted to access a GIF file and move it around.  To see what I mean, and download all the files you can go here:  http://www.broken-notebook.com/magnetic/

Thanks for the help

Slappy

 

<?php

$ma = new magneticAjax();

class magneticAjax
{
    public $numWords;
    public $words;

    public function __construct()
    {
        $this->processFile();
    }

    public function processFile()
    {
        $filename = "words.dat";
    	$fp = fopen($filename, 'r');
    	flock($fp, LOCK_SH);
        $contents = fread($fp, filesize($filename));
    	flock($fp, LOCK_UN);
    	fclose($fp);
    	$this->words = explode("\n", $contents);

    	$this->numWords = count($this->words);
    	for ($i=0; $i<$this->numWords; $i++) {
    		$this->words[$i] = trim($this->words[$i]);
    		$this->words[$i] = explode("|", $this->words[$i]);
    	}


    	if (strtolower($_SERVER['REQUEST_METHOD']) == 'post') {
        	if ($_POST['f'] == "save") {
    	       echo $this->save($_POST['id'], $_POST['x'], $_POST['y'], $_POST['z']);
        	} elseif ($_POST['f'] == "repaint") {
    	       echo $this->repaint();
        	}
    	}
    }

public function printTiles()
{
	$retHTML = "";
	for ($i=0; $i<$this->numWords; $i++) {
		$tileWidth = 7 * strlen($this->words[$i][1]);
		$tileHeight = 13;
		$retHTML .= '<div id="w_' . $this->words[$i][0] .
		            '" class="tile" style="position: absolute; top: 218px; left: 510px; width: ' . $tileWidth . 'px; height: ' .
		            $tileHeight . 'px; z-index: ' . $this->words[$i][4] . '">';

	 	$retHTML .= $this->words[$i][1];
		$retHTML .= '</div>
';
	}
	return $retHTML;
}

private function repaint()
{
	$retVal = "";
	for($i=0; $i<$this->numWords; $i++){
		$retVal .= $this->words[$i][2] . ":" . $this->words[$i][3] . ":" . $this->words[$i][4];
		if($i < $this->numWords-1){
			$retVal .=  "|";
		}
	}
	return $retVal;
}

private function save($obj, $x, $y, $z)
{
	$index = substr(strrchr($obj, "_"), 1);
	$index--;
	$this->words[$index][2] = $y;
	$this->words[$index][3] = $x;
	$this->words[$index][4] = $z;

	$str = "";
	for($x=0; $x<$this->numWords; $x++){
		$str .= $this->words[$x][0] . '|' .
		        $this->words[$x][1] . '|' .
		        $this->words[$x][2] . '|' .
		        $this->words[$x][3] . '|' .
		        $this->words[$x][4];
		if($x<$this->numWords-1){
			$str .= "\n";
		}
	}

	if ($fp = fopen("words.dat", "a")) {
		if (flock($fp, LOCK_EX)) {
			fseek($fp, 0);
			ftruncate($fp, 0);
			fwrite($fp, $str);
			flock($fp, LOCK_UN);
			fclose($fp);
		}
		return;
	}
	else {
		return "Could not open file!";
	}
}
}

[aschk]

Well the instead of opening a file to read in words you need to load up a set of image urls instead (from a database, or read in from a file or directory) and write those out into divs. The ajax is the same...

[slapme]

Thanks for the advice ASCHK.  What I tried was replaceing all the "words" and "numWords" with my image file name and also replacing the "words.dat" with the file name and ext (sunset.gif).  The image file I want to access is in the same folder as the PHP and JS files, but all I got was a garbled page.

Thanks

Slappy

[aschk]

What sort of page garbling?

The only line I thought you would have to change would be

$retHTML .= '<div id="w_' . $this->words[$i][0] .
		            '" class="tile" style="position: absolute; top: 218px; left: 510px; width: ' . $tileWidth . 'px; height: ' .
		            $tileHeight . 'px; z-index: ' . $this->words[$i][4] . '">';

 

to

 

$retHTML .= '<img id="w_' . $this->words[$i][0] .
		            '" src="FILENAMEHERE.JPG" class="tile" style="position: absolute; top: 218px; left: 510px; width: ' . $tileWidth . 'px; height: ' .
		            $tileHeight . 'px; z-index: ' . $this->words[$i][4] . '">';

 

or something similar.