überarbeiteter Code!!!!
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:
objImageDetails.appendChild(objNumberDisplay);
unterhalb einfügen:
var objAddComment = document.createElement(“span”);
objAddComment.setAttribute(‘id’,'AddComment’);
objImageDetails.appendChild(objAddComment);
var objShowComment = document.createElement(“span”);
objShowComment.setAttribute(‘id’,'ShowComment’);
objImageDetails.appendChild(objShowComment);
suche:
Element.setInnerHTML( ‘numberDisplay’, “Image ” + eval(activeImage + 1) + ” of ” + imageArray.length);
ersetze:
Element.setInnerHTML( ‘numberDisplay’, “Image ” + eval(activeImage + 1) + ” of ” + imageArray.length);
previewdata(imageArray[activeImage][0]);Element.show(‘AddComment’);
Element.setInnerHTML( ‘AddComment’, “
“);
Element.show(‘ShowComment’);
Element.setInnerHTML( ‘ShowComment’, “
“);
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.
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, schreiben und lesen in einem! 
// Quelle: http://www.devblog.de
// “Shoutbox als AJAX-Anwendung”
// Code darf frei verwendet werden
// Quelle: http://www.devblog.de
// “Shoutbox als AJAX-Anwendung”
// Code darf frei verwendet werden// globale Instanz von XMLHttpRequest
var xmlHttp = false;// XMLHttpRequest-Instanz erstellen
// … für Internet Explorer
try {
xmlHttp = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch(e) {
try {
xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch(e) {
xmlHttp = false;
}
}
// … für Mozilla, Opera und Safari
if (!xmlHttp && typeof XMLHttpRequest != ‘undefined’) {
xmlHttp = new XMLHttpRequest();
}function previewdata(picid)
{
if (xmlHttp) {
xmlHttp.open(‘GET’, ‘./getdata.php?picid=’+picid, true);
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState == 4) {
document.getElementById(“showComment”).innerHTML = xmlHttp.responseText;
}
};
xmlHttp.send(null);
}
}function saveData()
{if(document.addcomment.USER_NAME.value != “” && document.addcomment.USER_TEXT.value != “”)
{if (xmlHttp) {
xmlHttp.open(‘POST’, ‘./setdata.php’);
xmlHttp.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’);
xmlHttp.send(‘USER_NAME=’+document.addcomment.USER_NAME.value+’&USER_TEXT=’+document.addcomment.USER_TEXT.value+’&picid=’+document.addcomment.picid.value+’&USER_MAIL=’+document.addcomment.USER_MAIL.value+’&USER_URL=’+document.addcomment.USER_URL.value);}
document.getElementById(“addComment”).innerHTML = ‘
Comment added!
‘;
setTimeout(“previewdata(document.addcomment.picid.value)”,100);
}else
{
document.getElementById(“showComment”).innerHTML = ‘
Min. Name und Nachricht befüllen!!
‘;
}
}
3) setdata.php script
// 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);?>
4)getdata.php script
// Quelle: http://www.devblog.de
// "Shoutbox als AJAX-Anwendung"
// Code darf frei verwendet werden// Cachen verhindern
header("Expires: Sat, 05 Nov 2005 00:00:00 GMT");
header("Last-Modified: ".gmdate("D, d M Y H:i:s")." GMT");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
header("Pragma: no-cache");// 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 moeglich.');
}// Datenbank auswählen
$dbselected = mysql_select_db($db, $dblink);
if (!$dbselected) {
die ('Kann Datenbank nicht erreichen.');
}$picid = explode('id=',$_REQUEST['picid']);
$picid = $picid[1];
// Datensätze ermitteln
$dbresult = mysql_query("SELECT * FROM comments WHERE '".$picid."' = ID_PIC ORDER BY ID DESC");#LIMIT 0,$messages_count
if (!$dbresult) {
die('Ungueltige SQL-Query.');
}// Datensätze auslesen und formatieren
while ($row = mysql_fetch_assoc($dbresult)) {echo '
‘;
}// 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 1:
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….
Edit 2:
nachdem ein User (danke vielmals) nachgefragt hat wann das tutorial kommt, habe ich diesen Beitrag hier um das lesen der Kommentare
ergänzt! Ausserdem ist mir dabei aufgefallen, dass ich bei Schritt 1 etwas vergessen hatte.
lg
echo ‘
‘;
echo ”.ereg_replace (“
” ,”
” ,nl2br($row["USER_TEXT"])).’