ajax comment modification for lightbox 2

Nachdem man im Internet nichts zu diesem Thema findet, habe ich kurzerhand den Script etwas umgeschrieben.
Problem:
Ich will in der Lightbox 2 eine Form einbauen mit der es möglich ist Benutzerkommentare per Ajax in die Datenbank zu schreiben.
Ich habe mir den ajax Script von http://www.devblog.de genommen und auf meine wünsche angepasst.


Lösung: Habe ich! ^^
So sieht es dann aus wenn der Script erweitert wurde.
Oder auch die live Demo unter http://www.tomig.at/gallery/42/Tattoo%20Convention%2008



Und hier gibt es nun den script...

1) lightbox.js

suche:

Element.setInnerHTML( 'numberDisplay', "Image " + eval(activeImage + 1) + " of " + imageArray.length);

ersetze:

Element.setInnerHTML( 'numberDisplay', "Image "+ eval(activeImage + 1) + " of " + imageArray.length + "<div id="asb_content">
<form action="#" method="POST" name="adacomment" onsubmit="saveData(); return false;">
<h3>Add a comment</h3>
Name:<br><input type="text" name="USER_NAME" class="text"><br>
Text:<br><textarea cols="40" rows="4" name="USER_TEXT" class="commenttext"></textarea><br>
<input type="submit" name="btnsend" class="button2" value="send">
<input type="hidden" name="picid" value="" + imageArray[activeImage][0]+ ""> </form></div>");

in der Form wird die JavaScript funktion saveData() aufgerufen... diese wird benötigt um die per POST gesendeten Daten an den PHP script weriterzuleiten der in die DB schreibt.

<input type="hidden" name="picid" value="" + imageArray[activeImage][0]+ "">

Hier wird die gesamte URL des Fotos per hidden input an die JS function übergeben. Wirklich wichtig ist nur das id in der URL das einfach im PHP script angehängt wird
zb:

http://www.tomig.at/partypics/pics/42/Tattoo_Convention_Gleisdorf_2008_198.jpg?id=255

2) hier der shoutbox.js Script

// Quelle: http://www.devblog.de
// "Shoutbox als AJAX-Anwendung"
// Code darf frei verwendet werden

var xmlHttp = false;

try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch(e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch(e) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}


function saveData()
{
if (xmlHttp) {
xmlHttp.open('POST', './setdata.php');
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.send('USER_NAME='+document.adacomment.USER_NAME.value+'&USER_TEXT='+document.adacomment.USER_TEXT.value+'&picid='+document.adacomment.picid.value);
}

// statt form wird comment added angezeigt
document.getElementById("asb_content").innerHTML = '<h2>Comment added!</h2>';

}

3) setdata.php script

<?php

// Quelle: http://www.devblog.de
// www.tomig.at mod für lightbox 2 comments
// "Shoutbox als AJAX-Anwendung"
// Code darf frei verwendet werden

// Einstellungen laden
$dbhost='foo';
$dbuser='bar';
$dbpass='foopassword';
$db='foodatabase';


// Verbindung zu mySQL aufbauen
$dblink = mysql_connect($dbhost, $dbuser, $dbpass);
if (!$dblink) {
die('Keine Verbindung zur Datenbank möglich.');
}

// Datenbank auswählen
$dbselected = mysql_select_db($db, $dblink);
if (!$dbselected) {
die ('Kann Datenbank nicht erreichen.');
}

$txttime = strftime("%d.%m.%Y-%H:%M:%S");
$txtip = $_SERVER['REMOTE_ADDR'];

$picid = explode('id=',$_REQUEST['picid']);

$picid = $picid[1];
$USER_TEXT = htmlentities($_REQUEST['USER_TEXT']);
$USER_NAME = htmlentities($_REQUEST['USER_NAME']);
// Neuen Datensatz speichen
$result = mysql_query("INSERT INTO comments (ID_PIC,USER_NAME,USER_TEXT,DATUHR,IP)
VALUES (
'".$picid."',
'".$USER_NAME."',
'".$USER_TEXT."',
'".$txttime."',
'".$txtip."'
)");
if (!$result) {
die('Ungueltige SQL-Query');
}

// Verbindung zur Datenbank schließen
mysql_close($dblink);

?>

Viel erfolg dabei... lasst es mich wissen ob es bei euch funktioniert hat! (oder auch nicht ^^)

Edit:

Wichtig!
Der PHP Script prüft nicht wirklich ob die Daten auch zulässig sind.
Ebenso prüft der Javascript Code noch nicht ob auch Daten in den Feldern drinnen stehen.
Ist hier imageArray[activeImage][0] die gesamte URL drinnen die dann per PHP auf die id zerlegt wird.

Und als Krönung des Ganzen.....habe ich gerade die Kommentare direkt in die Lightbox eingebaut.
D.h. die Kommentare werden nun direkt unterhalb des geöffneten Bildes angezeigt.
Tutorial folgt.... :)

lg