Hallo!
Ich habe in meiner Extension auch eine Bilderdarstellung integriert.
Im Prinzip wird ein Projekt angezeigt, links ein Text und rechts ein Bild.
Es können jedoch auch ein paar Bilder abgespeichert werden, diese werden dann im Feld picture wie folgt gespeichert: foto1.jpg,foto2.jpg,foto3.jpg
Ivh benötige nun eine kleine Funktion/Extension die ich in meine einbauen kann und die jeweils das erste Bild anzeigt. Durch einen Klick auf eine Navigationsleiste (oder Pfeile) oben soll auf das nächste Bild innerhalb dieses Datensatzes gewechselt werden.
Habt Ihr mir eine Idee?
Danke und Grüße
Du liest das Feld picture aus, splittest den String nach Komma und liest das Ganze in ein Array. Bei einem Klick iterierst du durch das Array (evtl. mit AJAX).
Falls die Ladezeiten es zulassen kann man auch alle Bilder an den Client ausliefern, eins davor mit CSS anzeigen und bei einem Event mit JavaScript iterierst.
Sicher gibt es noch andere Möglichkeiten..
Gruß
Genau, CSS und JavaScript / jQuery nimmst du am besten dafür. Gerade mit jQuery kann man so was mit sehr wenig Zeilen Code hinbekommen.
Hallo!
Dankeschön!
Habt ihr mir ein Beispielcode?
Danke und Grüße
so läuft das hier nicht 😉
zeig deinen Code bzw. frag wo du nicht weiterkommst dann wird dir auch geholfen.
Hallo!
Würde ich ja gerne - mir fehlt aber der Ansatz.
Ich möchte ja keine fertige Lösung sondern nur ein Beispielcode
Grüße
Ungetestet in TYPO3 und Coding Guidelines außer Acht gelassen aber so ungefähr sieht dann deine Ext-Klasse aus:
class tx_myext_pi1 extends tslib_pibase {
public function main ($content, $conf) {
foreach ($this->getImages() as $image)
$content .= "<img src=\"{$image}\" width=\"100\" height=\"100\" />\n";
return $this->pi_wrapInBaseClass($content);
}
private function getImages() {
$res = $GLOBALS['TYPO3_DB']->exec_SELECTquery('picture', 'table', 'uid=20');
return preg_split('/,/', preg_replace('/,$/', '', mysql_fetch_assoc($res)));
}
}
HTML:
<div class="tx-myext-pi1">
<img src="foto1.png" width="100" height="100" />
<img src="foto2.png" width="100" height="100" />
<img src="foto3.png" width="100" height="100" />
</div>
CSS:
.tx-myext-pi1 img {
position: absolute;
display: none;
}
.tx-myext-pi1 img:first-child {
display: inline;
}
JavaScript wobei hier jQuery zum Einsatz kommt
$(document).ready(function() {
$('.tx-myext-pi1 img').click(function(){
$(this).fadeOut('slow');
if($(this).next().length) {
$(this).next().fadeIn('slow');
} else {
$(this).parent().children(':first-child').fadeIn('slow')
}
})
});
Hallo Freshman,
vielen Dank!
Habe nun etwas herumversucht bin aber nicht wirklich weiter gekommen!
Das Problem ist das die ganze Sache innerhalb einer anderen Funktion passieren muss, da bekomme ich lauter Fehler weil der include (extends tslib_pibase) bereits oben in der anderen Funktion passiert ist und mit den Variablen funktioniert das irgendwie auch nicht so (unexpected T_PRIVATE).
Ich habe hier einmal das Script hochgeladen.
Es geht bei dem case projectdetails um die Zeile (Zeile 149) die mit
$content .= '<br /><br />' . '<dl class="projectdetail_item">' .$this->cObj->IMAGE(array('file' =>
beginnt.
Wie baue ich diese Funktion mit ein?
http://www.file-upload.net/download-3520672/extenstion.txt.html
Vielen Dank!
Hallo Freshman,
habe noch ein paar weitere Sachen versucht, leider auch ohne Erfolg.
Wenn ich die Funktionen außerhalb der anderen Funktion definiere und angebe bekomme ich schon einmal keinen Fehler. Jedoch muss die Funktion ja meiner Meinung nach in die andere in die oben genannten Zeile/Position rein, da sie ja innerhalb der anderen Funktion aufgerufen wird.
Desweiteren fehlt ja der Bezug um welche uid (Datensatz) es geht, wenn die Funktion außerhalb definiert ist.
Hier mal mein aktueller Stand (Dein Script ist am Ende und auf mein Datenmodell angepasst)
http://www.file-upload.net/download-3521156/extenstion.txt.html
Danke und Grüße
Du sollst doch nicht meine Klasse an das Ende deiner Datei anfügen! Das Beispiel sollte dir nur ein Denkanstoß sein d.h. es wurde nur das Wichtigste dargestellt.
Schau, deine Klasse tx_hwtexcreferences_pi1 heißt bei mir tx_myext_pi1, beide haben die Methode main...
In dieser Methode "spielt bei die Musik". Dort sollst du das Feld picture auslesen und diesen HTML-Code generieren:
<div class="tx-hwtexcreferences-pi1">
<img src="foto1.png" width="100" height="100" />
<img src="foto2.png" width="100" height="100" />
<img src="foto3.png" width="100" height="100" />
</div>
Den Rest machst du nur mit CSS und JavaScript!
Hallo Freshman,
sorry wenn ich nerve, ist die erste Extension die ich anpasse. Bis auf diese Slidesache habe ich alle Modifikationen irgendwie hinbekommen.
Habe es nun so versucht (Die Funktion innerhalb meiner so wie unten eingebaut, ist das schon einmal richtig?
Hier bemängelt er noch die getimagefunction:
Call to undefined method tx_hwtexcreferences_pi1::getImages()
Nur beim einbau der Private Function getimage() habe ich Probleme, er lässt sie nicht einfügen innerhalb der anderen Funktion, irgendwie muss ich sie ja aber aufrufen!?
// Alter $content für Bilder: $content .= '' . '<dl class="projectdetail_item">' .$this->cObj->IMAGE(array('file' => 'uploads/cc_extension/'.$objects_temp['image']));
//Neuer Code
foreach ($this->getImages() as $image)
$content .= "<img src=\"{$image}\" width=\"100\" height=\"100\" />\n";
return $this->pi_wrapInBaseClass($content);
Danke und Grüße